Understanding CSS

Digital Media

Lecture Overview

• Cascading Style Sheets (CSS)
• Creating Style Rules
• Basic Properties
• "Flexbox" and "Float" Positioning

Cascading Style Sheets

• Cascading Style Sheets are commonly known as CSS
• CSS allows us to separate presentation (style) from the semantic structure represented by our HTML elements
• In other words, we should use HTML elements to structure our documents, and CSS to control how they are presented (styled)

Why CSS?

• One of the foundational concepts of the Semantic Web is the separation of structure and content
• This allows the same HTML document to be presented in different contexts. Each presentation context can have its own style sheet, customized to the specifics of its context:
• Mobile device
• Aural reader
• Web browser
• In this lecture and class, we only teach styling for browsers

Organizing CSS

• Since CSS is designed to separate presentation and structure, it's not surprising that CSS can be completely separated from HTML
• In fact, we can put our CSS in a separate file if we want to, but we won't worry about that to begin
• For now, we will put our CSS directly into our HTML document
• All CSS rules go inside a style element, which must go into the head section of our document

CSS Style Rules

• To implement CSS, we create what are called style rules or simply rules
• Each rule controls the presentation of a one or more HTML elements (i.e. a particular paragraph or all h2 elements)
• CSS rules have a very specific format: Selector, Curly Brackets, Declaration Block(s)

Rule Structure

• p {color:red; font-size:12px;}
• The three parts of every style rule are as follows:
• Selector:
• Identifies the specific HTML element that the rule will act upon
• Curly braces:
• Enclose the declaration block
• Declaration Block:
• Each declaration block controls one property (i.e. color, size, etc.)

Connecting Rules to Elements

• Now that we know how to create CSS rules, we need to know how to attach a CSS rule to an HTML element
• In the previous example, we didn't need to do anything explicit to attach our rule to an HTML element
• p {color:red; font-size:12px;}


• <p>This is a simple paragraph.</p>
• Because we used an element name as our selector (the p element), the browser applies this rule to all p elements in our document
• Let give this a try... (ex01.htm)

Specific Elements - Part 1

• We saw how to apply a rule to all instances of an element, but what if we want to apply a rule to a specific instance of an element?
• CSS gives us a simple, two-step process for doing this:
• First, we create a special rule called an "ID" rule as indicated by the '#' symbol
• #RedTitle {color:red; font-size:12px;}
• We connect the ID rule to an element by adding an ID attribute to the opening element
• <p id="RedTitle"> Text goes here</p>

Specific Elements - Part 2

• A "class" rule is like an ID but it can be applied to more than one element on a page
• Use the '.' symbol with the style rule instead of the '#'
• .RedTitle {color:red; font-size:12px;}
• Notice that the ID or class attribute goes inside the opening p tag (before the closing >, before the content)
• <p class="RedTitle"> Text goes here</p>
• Now our CSS rule identifies the specific HTML elements we want styled

CSS Properties

• Another piece of the puzzle for us to get started with CSS is to look at some of the useful properties
• We will concentrate of the simple visual properties for colors, fonts, text, backgrounds and borders

Color Property

• The color property sets the foreground color of an element:
• color: red;
• There are 140 color values identified by the CSS3 standard
• There are also many colors not in the standard that browsers will support (i.e. lightgreen or salmon) however, be aware that not all browsers support the same colors!

Font Properties

• There are four important font properties that modify the appearance of text:
• font-family (Arial, Times, Helvetica)
• font-size (12px or 200%)
• font-style (italic, oblique)
• font-weight (bold, bolder, lighter)
• Let's try some...

Text Properties

• CSS defines the following useful text properties:
• letter-spacing (length ie 10px)
• text-align (left, center, right, justify)
• text-decoration (underline, line-through)
• text-indent (length i.e. 12px)
• line-height (length: i.e. 12px, 25px)
• Let's try some....

Background Properties

• CSS contains following background properties:
• background-color (color)
• background-image (url attribute)
• background-repeat (repeat, repeat-x, repeat-y, no-repeat)
• Let's try it out...

Border Properties

• There are four properties that control the borders around an element:
• border-top | right | bottom | left (weight color style)
• border (will apply to all 4 borders)
• For each border we can set the size, color and style of the border:
• {border-bottom: 2px red dotted;}

Border Properties con't

• There are a few styles we can apply:
• dotted
• dashed
• solid
• double
• groove
• Some browsers handle styles differently, experiment!

Positioning Rules & Properties

• The last important piece to get started with CSS is to understand how to position elements and content on the page
• Normally, block-level elements are laid out vertically from top to bottom, one after another, with vertical distance determined by the margin, border, and padding properties
• Inline elements are laid out horizontally, one after another from the top of the containing block, also with margin, border, and padding that creating space between elements
• There are four options for positioning content (elements) on a page: Position, Floats, Flexbox, and Grid

Positioning con't

• Position property: defines where an element will be positioned on a page (i.e. static, fixed, relative, absolute, sticky)
• Float property: pushes a block-level element to the left or right, taking it out of the flow in relation to other block elements
• Flexbox: works in a "parent-child" relationship so that "flex" is applied to the parent element with appropriate declarations controlling the behavior of the child elements
• Grid: creates a 2-dimensional layout to manage both rows and columns
• In this class, we suggest using "float" to position images and "flexbox" to position the page's structural elements (examples on next slide)

Float Positioning

• Floating images
• .FloatRight {float: right;}
• <img src="myimage.png" class="FloatRight">

Flexbox Positioning

• Flexbox
• section {display: flex; flex-direction: row;}
• <section>
• <header> your navigation content goes here </nav>
• <article> your article content goes here </article>
• </section>

Flexbox Positioning con't

• Common Flexbox Properties:
• flex-direction: Specifies the direction of the flexible items inside a flex container
• flex-wrap: Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
• flex-flow: A shorthand property for flex-direction and flex-wrap

Flexbox Positioning con't

• Common Flexbox Properties Con't:
• justify-content: Horizontally aligns the flex items when the items do not use all available space on the main-axis
• align-items: Vertically aligns the flex items when the items do not use all available space on the cross-axis
• align-content: Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
• flex-grow: Specifies how large certain "child" items will grow

This slide intentionally left blank