Cascading Style Sheets

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 <style> </style>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 : <p class="fred">

Block vs. inline tags • Block-level tags such as <p> add a line break before and after the tag. • <div> is block-level • Inline tags such as <b> do not. • <span> is inline • Don't confuse these with inline styles, e.g.: • <p style="color:red";>

Styles inline: in the Tag • CSS rules consist ofselector {property1:value1; property2:value2;}. • (For inline styles, the rules are enclosed in quotes.) • <h1 style="font-family: 'Times New Roman'; font-variant: small-caps; color: red;"> Hello World </h1>

Style Sheets Defined in <head> • Surround with <style> … </style> tags. For HTML include comments:<style type="text/css"> /* CSS rules go here */</style> • 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 <head> <style type="text/css"> 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;} </style> (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 <p class="dropcap"> • Define a set of div or span tags and add the attribute class=" " • <span class="dropcap">

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 <head> element without the <style></style> tags.

The external file is then connected to the HTML page by using the tag • <link rel="stylesheet" href="xxx.css" type="text/css" /> Note /> for XHTML; for HTML5 just <link rel=“stylesheet” href=“xxx.css” > • 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 another: <style type="text/css"> @import url(other.css)</style>.

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 <div class="header">. Note in HTML5 this would be replaced by <header> • The ID always starts with a pound/hash sign (#): #idname • To apply the ID tag to the HTML tag, you add the attribute <p id="idname"> • See Zeldman chapter 8 for reasons to use id.

Example • #area1 {color: red} • < div id="area1">

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 selectorsli>p {color: red;} (all p that are children of an li) • Adjacent siblingsli+li {color: #234;} (all li that are adjacent siblings of li) • Universal (wild card) selector * {color:red;} • #copy * i{color:#123456;} • Attribute selectorsa[href="page2.html"] {color: black;} ORdiv[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 <link …> or <style> media="screen" media="print" media="handheld" media="all" etc. <style media="print"> • 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 winsh1 {color:blue;}h1 {color:red;} so h1 will be red

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

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 quotesfont-family: "courier new", courier, monospace; • @font-face is used to define the name and location of a font to be downloaded to the user’s computer. • @font-face{font-family: 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;

Cascading Style Sheets