CIS 421 › CSS › CSS Review

CSS Review

Advantages of External CSS for layout

Wyke-Smith, stylin' with CSS (2nd ed)

Advantages of standards-based coding (pp. 6-7):

can be delivered to multiple media (e.g., PDA's)
better performance (faster download)
works with all browsers
separates content from presentation - easier maintenance
fluid pages that scale to content
validate code against standards
faster production
easier to distribute content
easier to make accessible to disabled
less work for the developer

Additional benefit--

Pages with clean HTML code (without styles) rank higher on Search Engine Optimization
- spider reads more meaningful page content
- reads fewer "styling" words as it traverses the page.
- the more meaningful key words on a page, the higher the ranking

top

How do you write valid XHTML code? (pp. 17-19)

Declare DOCYTPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Declare XML namespace:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
Declare content type:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
Close all tags (even empty ones like <br />
Nest tags correctly, closing inner nested ones first
<div><p>Apples</p></div>
Don't nest block level tags inside inline tags
Write HTML tags in lower case
attribute values must be inside quotation marks
use character codes for entities such as < (<,)and & ( &)

top

linking to external CSS files

Styles can be defined in:

external CSS files which are linked to HTML files that use them
internal style sheets, which are embedded in the header tag of an HTML file between styles tags
inline styles, which are defined within HTML tags within an HTML document
The precedence of styles is that inline styles trump internal style sheets, which in turn trump external style sheets
The link to an external style sheet goes in the header tag and is written in this format:
<link href="../styles/421.css" rel="stylesheet" type="text/css" />
import external style sheet:
@import url(exsoeelasticlayout.css);
- If you have many styles, separate them into different style sheets for each category of style. Then import the different style sheets required for a particular page into one main style sheet, which is then imported into the HTML page.
  The stylesheet "exsoeelastic" contains the following CSS code.
  /* CSS Document */
  @import url(exsoeelasticlayout.css);
  @import url(exsoeelastictext.css);
  @import url(exsoeelasticnav.css);

top

Classes and IDs

These styles are not dependent on a particular tag but can be applied to multiple types of tags

Difference between them:
Classes can be used multiple times, and
IDs are used only one time in a document. IE does not adhere to this standard so IDs can be applied to multiple tags in IE. If you style renders as intended in IE, but not in Firefox, that means IE is "guessing" what you meant, not that Firefox is wrong.
IE's rendering of margins has been a big problem, since it interprets them differently.,
In a CSS doc, a
class begins with a period .
an id begins with a hash mark or #
The class book is defined with:
.book { font-style:italic; font-weight:bold; }
The ID wrapper is written:
#wrapper { padding:3px; }

top

CSS Rules have 2 parts

Selector

name of the tag the rule selects.-- uses name of tag:
h1 {font-style:italic; font-size: 1em;}

Declaration

states what happens when rule is applied.
Declaration has two parts: color:#000000;
property (such as color)
value such as #0000ff
Multiple declarations can be contained within one rule, with commas separating selectors
h1, h2, h3 {font-weight:bold; color:#00FF00;}
unit values defining size greater than 0 must have units
Absolute unit values defining fixed size -- examples:
cm = centimeters
pt = points = 1/72 inch
pc = pica = 12 points, or one-sixth of an inch
px = pixel = 1 dot on the screen
in = inches =Imperial unit of measure; 2.54 centimeters
cm = centimeters
mm - millimeters
Relative unit values
em = width of characters and uppercase "M"in the font being used
ex = height of lowercase "x" in the font being used (more obscure, less used)
% = percent of parent element
Color values can be written in
#FF00CC = hexadecimal of RGB code
#F0C = short hex of RGB code where both numbers for each color are the same
RGB(255, 0, 128) = RGB code for color
black = color name
RGB(100%, 0%, 66%) Percent of total saturation possible

top

Contextual selectors

make it possible to target tags in a specific context, such as a <p> nested inside a <div> tag. The style would not apply to all paragraphs in the document, but only ones inside <div> tags
written:
div p {font-size: .5em;}
This style would apply to what text?
p em {color:#FF0000;'}

top

Contextual Class Selectors

Even more specific any paragraph with the class code has san-serif bold yellow font:
p {font-family:sans-serif;}
.code {font-weight:bold;}
p.code {color:#FFFF00;}
html code using this style would be written:
<p class="code">sans serif bold yellow font</p>

Contextual ID Selectors

Selector using an ID is even more specific
p {font-family:sans-serif;}
#specialcode {font-weight:bold;}
p#specialcode {color:#FFFF00;}
html code using this style would be written:
<p id="specialcode">sans serif bold yellow font</p>

top

Pseudo-Classes

cause rules to be applied to the markup when certain events occur, such as mouse rollover or mouse click

Anchor-link Pseudo-Classes

link applies to hyperlinks a:link {color:#00FFFF;}
visited applies to visited links a:visited {color:#FF00FF;}
hover applies to rolled over links a:hover {color:#00FF00;}
Accessibility accommodation:
focus add this pseudo-class to the a:hover style to make the link accessible to a user who tabs to it
a:hover, a:focus {
background-color:#ffffcc;
color:#990000;
}
active applies to clicked links a:active {color:#0000FF;}

top

Pseudo-Elements

First-Child

applies to first instance of an element within another element
#specialchild, #specialline {font-weight:bold;}
div#special em:first-child {{font-size:250%;}
first-child example where second em text not affected

First-letter applies to first letter of selector
div.GAS h4:first-letter{font-size:130%;}

first-letter
First-line applies to first line of an element
#specialchild, #specialline {font-weight:bold;}
div#special p:first-line {text-decoration:line-through;}
first-line example where first line of paragraph text has a line through it but the second line does not affected

top

Inheritance

Some styles are inherited from their parent elements, and others are not.
Box model styles NOT inherited:
- positioning of elements
- margins
- padding
- borders
The default font style declared in the body style is inherited by the other HTML elements, unless it is specifically changed in a child style.
Proportional font styles are multiplied in child styles, for example:
body {font-size:90%;}
p {font-size:90%}
would yield a paragraph font size of 81% (90% x 90%)

top

The Cascade in Cascading Stylesheets

Order in which browser looks at Cascade

1. Default browser stylesheet

2. User stylesheet

3. Developer stylesheet

4. Embedded stylesheet

5. Inline styles

top

Cascade Rules that determine order in which styles are applied

1. Find all the style declarations that apply to each element

2. Sort styles by order & weight

3. Sort styles by specificity

Specificity (thanks to Jon Wiley)

Browsers calculate specificity like this:

HTML element selector has value = 1
class selector has a value = 10
ID selector has value = 100
add up values in the set of selectors
highest valued style wins

div {...} = 1 point because it is just an HTML element selector
p.content {...} = 11 because HTML element selector + class selector
p.content ul li {...} = 13 because class selector+ 3 HTML element selectors
body div#primary h1.xHead {...} = 113 because ID + class selector + 3 HTML element selectors

If 2 rules have exactly the same weight, the one furthest down the Cascade wins. (e.g., inline beats external CSS

See Designing more parsimonious CSS using inheritance.

top

Page index

Section index