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 > <!-- hide from old browsers CSS rules go here--> </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 selectors

a[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.<!--[if IE 7]> <link type="text/css" rel="stylesheet" href="ie7.css"><![endif]-->OR <!--[if lte IE 7> ... <![endif]-->Or <!--[if IE]> ... <![endif]-->

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;}