Review: Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS In this chapter we will focus on introducing and examining the mechanics of CSS and how we can use style sheets to “beautify” the structure of a webpage.

Cascading Style Sheet A list of rules that define a particular style that is applied to XHTML markup. Ex: Font size of a paragraph, thickness of a border around an image, position of a headline. Gives web designers complete control over the layout of their web pages. Three ways to add CSS to a web page: Inline Embedded Linked

Put style declarations right in a specific tag with the “style” attribute. Not recommended and very rarely used. CSS and XHTML were implemented to get rid of presentational markup. Will override any styles declared in a linked or embedded style sheet. By adding inline CSS styling to this paragraph, we can override the default styles.

Place CSS styles in the head of your XHTML document. Again, not recommended because the scope is limited to one page. Will override a linked style sheet, but will still lose to an inline style. Embedded Styles h1 {font-size: 16px;} p {color:blue;} Link to example

Ideal method of using CSS  Truly separates presentation from structure. Styles have a site-wide scope  Can change one thing in the style sheet and it will impact every page that links to it. Can specify styles that make the page look good on different media (print, mobile, etc.) Embedded Styles Can change to other media types (list)list

Let’s make a sample page linked to an external style sheet. External Styles All paragraphs will be modified. See? Same style. It also has the same effect on us header 2’s. See? external.html style.css p {color:red;} h2 {color:blue; font-style:italic;} Link to example

Each rule in CSS follows a specific format: Selector {Property:value;} The selector is the corresponding tag in the XHTML markup. The property is one of the valid CSS style attributes (a good list of them). The values correspond to the specific property and can also be found on the w3schools CSS reference list.a good list of them

Multiple declarations can be contained within a rule. p {color:red; font-size:12px; line-height:15px;} Multiple selectors can be grouped. h1, h2, h3, h4 {color:red; font-size:12px;} Multiple rules can be applied to the same selector h1, h2, h3, h4 {color:red; font-size:12px;} h1 {font-style: italic;}

A CSS style declaration will apply to every tag of the selector’s type. In order to make it apply to only a certain part of your document, you must utilize XHTML’s document hierarchy. Here's the biggest heading. Here's a smaller one. This h1 won't have the style applied to it. hierachy.html div h1 {color:red;} style2.css Link to example

The second way of defining specific styles without the use of the document hierarchy is by adding “class” and “id” attributes to the XHTML markup. Define classes with a. This will be some special text This, unfortunately, won’t be. But this will be! This won’t. class1.html h1 {color:red;} p {color:blue;}.special {font-family: Helvetica, sans-serif; font-style:italic;} style3.css Link to example

If you want to, say, target one paragraph with a given class, you can write the following: p.special {font-family: Helvetica, sans-serif; font-style:italic;} You can also combine the document hierarchy with classes to further specify styles: Here's the biggest heading. Here's a smaller one. This h2 won't have any class styles applied to it. h1 {font-color:red;}.small {font-size:x-small;}.big {font-size:x-large;}.big span {font-style:italic;} style4.css class2.html Link to example

IDs work almost exactly like classes in that they can be used to identify specific portions of a webpage that will be styled. However, an ID is more powerful than a class because it is used to identify unique pieces of a page (header, footer, etc.). Can also be used to enable JavaScript to be triggered, and takes precedence over classes in cascading. This is special text p#specialtext {css rules;}

Tell the browser to only apply a certain style if a certain condition is met. Universal Selector *  All markup will contain the specified style, unless overridden. * {color:green;} Adjacent Sibling Selector +  Selects a tag that follows a specific sibling tag h1 + p {font-variant:small-caps;} Test This will be in small caps This won’t be Attribute Selectors []  Targets only elements with specific attributes img[title] {border: 2px solid blue;}

Cause rules to be applied when certain events occur. Most often used for mouse clicks or hovers. Anchor Link Pseudo-Classes Most commonly used with hyperlinks and color changing Link, Visited, Hover, Active Ex: a:link {color:black;} a:visited {color:gray;} a:hover {text-decoration:none;} a:active {color:navy;} Will set the link color to black, the link’s color to gray if you’ve clicked on it, removes the underlining when hovered, and changes the color to navy when the user holds the mouse down on the link.  You can use “hover” on any element to change its style when the mouse is hovered over it. Link to example

Adds markup around already existing content. first-letter, first-line, before, after “before” and “after” are useful for displaying items retrieved from a database in a coherent manner. Ex: number retrieved from db h2:before {content:”The user is “;} h2:after {content:” years old.”;} If the number was 25, the output on the page would be “The user is 25 years old.”

Inheritance is passing a style down the document hierarchy. Declaring the font family, color, etc. in the body selector will make the text in every text element that font type. Many properties are not inherited because it doesn’t make sense for them to be– e.g. a border will not be inherited by a table cell (td) inside a table with a border. Inheritance is cumulative– that is, if you define a tag’s font size as 80% and it is descendant from a tag with font size 80%, that child tag’s font size will be 64% (80% of 80%).

Cascading describes the process of letting the browser decide which styles to apply to a tag, amidst many possible style declarations. Browsers follow a natural hierarchy of styles, with each one below taking precedent over the ones above: Default browser style sheet User style sheet (rare, but useful for the visually impaired) Author style sheet (external / linked CSS file existing on the server) Author embedded styles Author inline styles Selectors with IDs have precedence over classes, which have precedence over selectors only. The more specific the style declaration, the higher the precedence. Defined styles override any inherited style, regardless of specificity.

Example of higher specificity: p {color:red;} p.largeText {color:orange;} p#largeText {color:yellow;}div p#largeText {color:green;} div ul.myList {background-color:blue;} Each has higher specificity than the one preceding it, thus giving each precedence over the ones before it. Link to example

Three types of values: Words Numerical Values Color Values Words  font-weight: bold; Numerical Values  font-size:12px; Color Values  color:#336699; For font sizes, when possible, and to retain consistency with page resizing and user styles, set the “base” font-size to 1em in the body, and use other size declarations as proportions of that base size. E.g. font-size:.5em will yield half the size of the base.

For color values, you have three options for declaring colors: Words  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Hexadecimal  #RRGGBB = 0, FF = 255 Percentages  R%, G%, B% color:black; color:#000000; color:rgb(0%, 0%, 0%);