Cascading Style Sheets

Cascading Style Sheets BasicsTeague, Chapters 1-3

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

How to add CSS to HTML Tags • You can use the tags <style> </style>to list a series of definitions embedded in the header • The styles are used to define specific sets of attributes for HTML tags, classes, or IDs. Classes can be attributed to tags by using a class attribute : <p class="fred">

Block vs. inline tags (p. 18) • Block-level tags such as <p> add a line 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 definitions, 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 Header • Surround with <style> … </style> tags. For HTML include comments:<style >  </style>Omit for XHTML. • Selectors can be HTML tags, classes (.fred) or Ids (#fred). Ids can only be used once per XHTML page. • Define the specifics for the HTML tags by producing the tag and enclosing the list of characteristic styles pairs in parentheses

Sample Style sheet in Header <style type="text/css"> h1 {font: small-caps bold italic 2.5em Georgia, ‘Times New Roman’, Times, serif; color:red; text-align:center;} h2 {font: bold 3.5em 'minion web Georgia', 'Times New Roman', Times, serif; color:orange;} .dropcap {font: 100%/200% serif; color: blue; margin-top: 1em; position:relative; left: 10px; top: 10px;} P {color: red; font-family:monospace; padding: 1em;} #fred {border: 2px solid #cf4;} </style>

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 append the dropcap to the tag • p.dropcap and add the class name <p class="dropcap"> • Define a set of div or span tags and add the class= attribute • <span class="dropcap">

External Linking • You may also define a style sheet as a text file which includes the defined set rules. • The file contains only the selectors and the property:value pairs. • The file is similar to the definitions in the header tags 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) • 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 • 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 be override the css definition. • (see chart page 84)

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 a new tag name. The new tag name can define the area and a set of characteristics for the area. • The ID always starts with a number sign (#) • You type the definitions for this ID between the set of curly brackets. • To apply the ID tag to the HTML tag, you add the attribute id="idname"

#area1 {color: red} • . • . • . • < p 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;} • 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, Firefox) • Child selectorsli>p {color: red;} • Adjacent siblingsli+li {color: #234;} • Universal (wild card) selector (in IE<7 used as a hack:* html #fred {font-size:2em;}, called the "star html" bug) • #copy * i{color:#123456;} • Attribute selectorsa[href="page2.html"] {color: black;} ORp[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, :lang() • Now with IE7 (and always with Firefox) can use the "whatever:hover" e.g.li:hover {text-decoration:underline;}

Pseudo-elements • Not often used. Also not if IE <7 • :first-letter, :first-line, :before, :after

Some specific settings • !important tag • Adding the !important to the style rule will override any other rule. • Media=screen/print (also handheld, etc.) • This pair value can be added to the linked or embedded css to set different styles for use by different types of displays. media=“print” — used for a print page style sheet. • media="screen" – used for a browser display

Competing rules • The cascade as described earlier • Inheritance (rules passed to descendants) • Specificity (id=100, class=10, tag=1) (sort of) • Lower rule 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

Type on the Web • HTML Text • Easy to edit and search • Graphic text • Graphics which include text—not searchable • Vector Text • Easy to change and position and allows special effects • Flash is the current “universal” application—requires a plug-in • Scalable Vector Graphics • New style similar to flash—being pioneered by Adobe and a standard from W3C

Setting Font • font-family: list of fonts (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(filelcaton);} • 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 • List all the 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