Cascading Style Sheets Basics

Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed by making a single change to the rule—without requiring changes to all the pages in the site. A separate file can be defined for the rules. Standards-compliant

How to add CSS to HTML Tags You can use the tags to list a series of rules embedded in the header The styles are used to define specific sets of characteristics for HTML tags, classes, or IDs. Classes can be added to tags by using a class attribute :

Block vs. inline tags Block-level tags such as add a line break before and after the tag. – is block-level Inline tags such as do not. – is inline Don't confuse these with inline styles, e.g.: –

Styles inline: in the Tag CSS rules consist of selector {property1:value1; property2:value2;}. (For inline styles, the rules are enclosed in quotes.) Hello World

Style Sheets Defined in Surround with … tags. For HTML include comments: /* CSS rules go here */ Selectors can be HTML tags (h1), classes (.fred), ids (#fred), pseudo-classes (.fred:hover), pseudo-elements (.fred:first-letter) attributes (img[alt]), others. Ids can only be used once per HTML page.

Sample Style sheet in h1 {font-family: Georgia, ‘Times New Roman’, Times, serif; color: red; text-align: center;} h2 {font-weight: bold; color: orange;}.dropcap {font: 100%/200% serif; color: blue; margin-top: 1em; position: relative; left: 10px; top: 10px;} p {color: red; font-family: courier, monospace; padding: 1em;} #fred {border: 2px solid #cf4;} (Use vertical format as in Zeldman Chap. 9)

Using the Style Sheet When you use the H1, H2 or P tags the styles defined in the style sheet are applied. To use the.dropcap class you may –Either add the class to the tag.dropcap and add the class name –Define a set of div or span tags and add the attribute class=" "

External Linking You may also define a style sheet as a text file which includes the defined set of rules. The file contains only the selectors and the property: value pairs. The file is the same as the rules in the element without the tags.

The external file is then connected to the HTML page by using the tag Note /> for XHTML; for HTML5 just The xxx.css is the name of the file path that contains the list of rules. You should end the file with the extension css to be sure you know what the file contains. You may also import one CSS file into url(other.css).

Order of style rules (cascade) The last definition is the one which is applied to the tag. So if a css file is attached with a definition for p tags and there is an inline definition for the p tag after the reference to the embedded or external file, the inline definition will apply. In general inline>embedded>external. If the user has a set of defined browser characteristics which conflict with the css, the user characteristics will override the css definition.

Defining Classes You can define a set of specifics which may be applied to a series of tags. The definition is prefaced with a.classname. You reference the class name in the HTML tag by using the attribute class="classname"

Defining IDs In the style sheets, you may also define an ID, which acts like a class except there can be only one per page. Note in HTML5 this would be replaced by The ID always starts with a pound/hash sign (#): #idname To apply the ID tag to the HTML tag, you add the attribute See Zeldman chapter 8 for reasons to use id.

Example #area1 {color: red}

Multiple Tags with the same Style (grouped selectors) Separate the list of tags by commas and the place the set of style rules in parentheses for the entire group. h1, h2, h3 {color: blue;}

Descendant (contextual) Selectors You can pass a style definition down a list of related selectors. E.g. #copy li p {font-size: 1.5em;} (Read this right to left. All p that are descendants of li that are descendants of an element with id="copy" get this rule.) The selectors are separated by a space. The first selector in the list is the parent, the others are descendants. Changes to the first selector will be inherited by the next selector.

CSS 2.1 selectors (IE 7+, MOSe) Child selectors li>p {color: red;} (all p that are children of an li) Adjacent siblings li+li {color: #234;} (all li that are adjacent siblings of li) Universal (wild card) selector * {color:red;} #copy * i{color:#123456;} Attribute selectors a[href="page2.html"] {color: black;} OR div[align] {font-family: serif;}

Pseudo-classes Most common are :link, :visited, :hover, :active. E.g. a:hover {text-decoration:underline;} Also (2.1) :first-child, :focus, :blur, :lang() With IE7+ (and always with MOSe) can use the "whatever:hover" e.g. li:hover {text-decoration:underline;}

Pseudo-elements Not often used, but Gillenwater uses :before and :after for "generated content." :first-letter, :first-line, :before, :after

Some other options !important tag Adding the !important to the style rule will override any other rule. Media queries: in or media="screen" media="print" media="handheld" media="all" etc. media="print" — used for a print page style sheet. (Resume project) media="screen" – used for a browser display [but omit if only sending to a browser]

Competing rules The cascade as described earlier Inheritance (rules passed to descendants) Specificity (id=100, class=10, tag=1) (sort of) Lower rule in a style sheet or declaration wins h1 {color:blue;} h1 {color:red;} so h1 will be red

Comments CSS comments look like JavaScript: /* Multiple lines of comment go here and can continue until the closing mark */ p {color:red;} Conditional comments are best way to serve IE rules. E.g. OR... Or... comments

Defaults for font-family serif—small ornamentation at the end of the letters sans-serif – not serif monospace—all letters occupy same amount of space cursive—resembles handwriting fantasy—decorative fonts that are not the same as the other styles

Setting Font font-family: font stack (give the one you prefer first); multiple word families need quotes font-family: "courier new", courier, is used to define the name and location of a font to be downloaded to the user’s nametodownload; src:url(filelocation);} Best idea—use browser-safe screen fonts (Georgia, Verdana)

Other font properties font-size: –Absolute (pt, in cm, mm) –Relative (sort of) (px, em, %) –Absolute expression xx-small, x-small, small, medium, large, x-large, xx-large (smaller, larger are relative) font-style: – italic

font-weight: – normal, bold, lighter. –Or use a value of 100 to 900 in increments of 100. Creating smallcaps – font-variant small-caps normal Shorthand: font options separated by spaces after the font: property. E.g. h1 {font: bold italic small-caps 12px/18px verdana, serif;} At a minimum, need font-family, font-size. E.g. h1 {font: 12px georgia, "times new roman", times, serif;