12/7/2015Cascading Style Sheets Part 11 Spring, 2008 Modified by Linda Kenney Feb. 28, 2008

04/21/23 Cascading Style Sheets Part 1 1

Cascading Style SheetsPart 1

Spring, 2008

Modified by Linda KenneyFeb. 28, 2008


PresentationXHTML is meant to be used to inform the browser about the internal structure of our Web pages and their content.


Presentation (cont.) Although HTML has historically offered a

variety of elements and attributes that could be used for providing presentational info to the browser, many of them have been deprecated.

In the interest of customizing HTML for structural use, these presentational aspects of HTML have been deprecated in favor of another language designed specifically for presentational purposes.

This presentational language is named Cascading Style Sheets (CSS).


A separate presentational language

Cascading Style Sheets (CSS) is a separate language from XHTML.

It has its own syntax rules and its own vocabulary of terms.

CSS was designed separately from XHTML .

It was designed for the specific purpose of conveying presentational info to the browser.

Since it was designed for a specific job, it is able to do that job very well without making compromises.


Advantages of CSSIt allows presentation to be specified separately.

This makes it possible to use the same presentational specifications for several pages.

This also makes it easier to change the presentation of those pages.

And it makes it possible to have different presentational info applied to the same page under different circumstances.

As an added benefit, it results in smaller, simpler XHTML documents for those pages.


The <div> and <span> elementsWe learned that the <div> container element can be used to create generic divisions within an XHTML document.

What we really meant is that the <div> element is a block element that has no other meaning in the context of XHTML structure.

Without any inherent structural meaning, the default presentation of the <div> element is just enough to render it as a block by adding the implied line break.


The <div> and <span> elements (cont.)

There’s a similar generic inline element called <span>

The <span> element has no implied structural meaning and therefore no default presentation associated with it.

If you were to use a <span> element without any associated CSS, it would have absolutely no effect on the way the browser presents the page.


The <div> and <span> elements (cont.)

Since both the <div> and <span> elements have no implied or default presentation, they are commonly used with CSS. These elements can be used, in combination

with the class or id attributes and appropriate CSS style rules, to effectively create custom elements that are presented in exact accordance with the author’s wishes.

Although it’s not a requirement to use <div> and <span> elements with CSS, it is a very common and convenient mechanism.

Don’t forget their end tags!


Inline stylesInline styles are added directly to the start tags of the elements to which they apply. They use the style attribute and set its value

equal to the CSS declaration desired.

A declaration has 2 parts Property Value

See http://pubpages.unh.edu/~ltv6/cs403/resource/samples.html

(Chapter 3 – about.html, numbers 1 and 2)


Example – inline.htmhttp://pubpages.unh.edu/~ltv6/samples/chap9/inline.htm

<p style="background-color:green;color:white;font-family:Arial;font-size:24px“ >This paragraph is using an inline style.</p>

<p>This paragraph is NOT using an inline style.</p>


Example – divexp.htmhttp://pubpages.unh.edu/~ltv6/samples/chap9/divexp.htm

div>This sentence is NOT using an inline style.

<div style="background-color:#00FF00;color:#FFFFFF;font-family:Arial;

font-size:24px">This sentence is in a div using an inline style.</div>

This sentence is NOT using an inline style. </div>


Example – spanexp.htmhttp://pubpages.unh.edu/~ltv6/samples/chap9/spanexp.htm

<div>This sentence is NOT using an inline style. <span style="background-

color:#00FF00;color:#FFFFFF;font-family:Arial;font-size:24px">

This sentence is in a span using an inline style.

</span> This sentence is NOT using an inline style. </div>


Because inline styles end up being scattered throughout the XHTML code, they increase the size of your XHTML files and defeat the maintenance advantages afforded by the centralization of presentational info in internal an external style sheets.

Therefore, it’s probably wise to avoid the use of inline styles whenever possible.

Carefully constructed internal or external style sheets are almost always preferable to inline styles.


Internal (or embedded) style sheets

An internal style sheet is just a collection of one or more style rules.

Because it’s part of the XHTML file with which it’s associated, the connection between the XHTML and the CSS is clear.


Internal (or embedded) style sheets (cont.)

It is included within the XHTML file using the <style> container element. The <style> container element must be

used only within the <head> element.

The <style> element should have a type attribute set equal to the MIME type for CSS: “text/css”.

The contents of the <style> element will be interpreted as CSS style rules and it must therefore follow CSS syntax, not XHTML syntax.


It is possible for a single XHTML document to utilize both internal style sheets and inline styles simultaneously.

Style rules are applied in the order they are seen by the browser. So when there are conflicts between the rules the

browser will decide in favor of whichever conflicting rule it sees last.

External Styles Internal Styles Inline Styles XHTML Attributes


An internal style sheet example<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS using an internal style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> h1 {color: red;} p {color: green;} h2 {color: orange;} div {color: gray;} </style> </head> <body> <h1>CSS Example 4</h1>

<p>This example uses a simple internal style sheet.</p> <h2>Using the color property</h2> <p>The color property is used to set the color of the text within this page.</p> <div>© 2004, A. Michael Gildersleeve<br /> <a href="mailto:[email protected]">[email protected]</a></div> </body></html>


Style rulesA style rule has two parts

Every style rule ends with a declaration enclosed within curly braces.

Every style rule starts with a selector, which is outside the curly braces.


Style rules – the declaration

The declaration provides the presentational aspects that the style rule specifies.

A declaration consists of a property and a value for that property, separated by a colon.

Although not strictly necessary, it’s common to end each declaration with a semicolon.

This allows a single rule to contain multiple declarations within a single set of curly braces, each separated from the next by a semicolon.

Various XHTML elements possess various properties. By setting the values of those properties, a Web author can

control how the browser presents that element.

h1 {color: green;}h1 {color: green;}h1 {color: green;}h1 {color: green;}h1 {color: green;}


Style rules – the selector Every style rule starts with a selector,

which is outside the curly braces.

The selector serves to associate that rule’s declaration with one or more elements in the associated XHTML.

For every element with which a rule’s declaration is associated, a browser will set that element’s properties in accordance with the values specified for those properties in the declaration .

The example above says “set the color property of all <h1> elements to a value of green”.


Element name selectorsThe most commonly used type of selector is the element name selector. An element name selector is simply the

name of an XHTML element being used as a selector.

For example, the following style rule uses the name of the <h1> element as its selector.

This selector tells the browser to apply the style rule to every <h1> element in the associated XHTML file.

Note that only the name of the element is used as the selector, not the angle brackets that make the element name into a tag.

All XHTML element names may be used as element name selectors.

h1 {color: green;}


Example -- embedded.htmhttp://pubpages.unh.edu/~ltv6/samples/chap9/embedded.htm

<head><title>Embedded Styles</title><style type="text/css">body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif;}</style></head>


Example – embedded2.htmhttp://pubpages.unh.edu/~ltv6/samples/chap9/embedded2.htm

<head><title>Embedded Styles</title><style type="text/css">body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif}h1 { color: #FF0000; font-style:italic;}</style></head>


InheritanceWhen one element is nested within another, we can think of the outer element as the parent element and the inner element as the child element. In CSS, children can inherit properties from

their parents. When a style rule sets a property of one

element, any children of that element generally inherit that property setting. For example, if a rule sets the color property of

all <p> elements to green, children of <p> elements will inherit that green color.


Inheritance (cont.) Of course, any child whose color property has been

explicitly set by another rule will use the color that has been set for it rather than the color it inherits from its parent.

In general, more specific settings take precedence over more general settings in CSS.

Inheritance is considered very general, so it is easily overridden with more specific rules.

Since all elements that represent visible content within the page are descendent elements of the <body> element, style rules associated with the <body> element can be inherited throughout all the elements on a page.


Using external style sheetsWriting an external style sheet is simply a matter of creating a text file that contains one or more style rules and saving it with a name ending in .css

To make use of that external style sheet, however, it must be linked to an XHTML document.

<link rel="stylesheet" type="text/css" href="mainstyles.css" />


The <link /> element must be inserted into the <head> of the XHTML document.

The <link /> element’s rel attribute is set to a value of “stylesheet” to indicate the type of linkage being created.

Its type attribute is set to “text/css” so the browser knows to interpret the contents of the linked file as CSS.

And its href attribute is set to the URL of the external style sheet’s file.

When the <link /> element is used to link an XHTML file and an external style sheet, the rules in the external style sheet apply throughout the XHTML document.


CSS filesLike an XHTML file, a CSS file is just a text file.

We create and edit CSS files with a text editor. CSS files must be given names that end with a .css

extension.

Unlike an XHTML file, however, a CSS file contains no XHTML tags or elements.

A CSS file does not contain a <!DOCTYPE> element. Instead, a CSS file contains nothing but style rules.

A CSS file must contain at least one style rule. There is no limit on how many style rules a single CSS file

may contain.

For our purposes, a CSS file needs to be associated with one or more XHTML files.

A CSS file used in this way is an external style sheet. External style sheets provide presentational guidance to

the browser for any XHTML file with which they are associated.


Advantages to External Style Sheets…

Most authors try to use external style sheets whenever possible.

Since several different XHTML documents can derive their presentational info from a single external style sheet, external style sheets offer excellent centralization of presentational info.

This makes it easier to specify the presentation of several pages initially and easier to update that presentation later.


Advantages to External Style Sheets…

It also means the presentational info does not appear in each XHTML document.

So, the Web (html) pages are smaller and can be retrieved from the server more quickly.

The external style sheet also needs to be retrieved, but after it’s retrieved for the first time it can be stored in the browser’s cache to speed up the display of other pages that use it as well.


A sample external style sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS using an external style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles01.css" /> </head> <body> <h1>CSS Example 1</h1>

<p>This example uses a simple external style sheet.</p> <h2>Using the color property</h2> <p>The color property is used to set the color of the text within this page.</p> <div>© 2004, A. Michael Gildersleeve<br /> <a href="mailto:[email protected]">[email protected]</a></div> </body></html>

h1 {color: red;}p {color: green;}h2 {color: orange;}div {color: gray;}


Chapter 3 Exampleshttp://pubpages.unh.edu/~ltv6/cis599/

samples/chapter3/

See examples 4 - 9


An example of inheritance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS demonstrating inheritance</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles02.css" /> </head> <body> <h1>CSS Inheritance Example</h1>

<p>This example demonstrates <dfn>inheritance</dfn>, which is an <em>important</em> concept in <acronym>CSS</acronym>.</p> <div>© 2004, A. Michael Gildersleeve<br /> <a href="mailto:[email protected]">[email protected]</a></div> </body></html>

h1 {color: red;}p {color: green;}em {color: black;}div {color: gray;}


Class selectorsWhile element name selectors are useful, they can be too generalized for some purposes.

Sometimes we’d like to define a rule that is associated only with certain elements of a specific type, but not all elements of that type.

Other times, we’d like to define a rule that is associated with several elements of different types.

For both these purposes we can use a class selector.


Class selectors (cont.) A class selector associates a rule with all

elements that belong to a specific class. To add an element to a specific class, simply

add a class attribute to that element’s start tag and assign it the class name as its value.

Any XHTML element that can appear within a <body> element can accept a class attribute.

And a style rule with a class selector will be associated with all elements that belong to that class, regardless of element type.

<h1 class="subtle">This is a heading</h1><p class="subtle">This is a paragraph</p>


Class selectors (cont.) To create a class selector, simply precede the

name of the class with a period.

Since class selectors are more specific than element name selectors, class selectors take precedence when a conflict occurs.

.subtle {color: gray;}


ID selectorsAny XHTML element that can accept a class attribute can also accept an id attribute.

While the class attribute is used to indicate the element’s membership in a group, the id attribute is used to give each element a unique identity.

For this reason, no two elements in a single page may have the same value for their id attribute.

<h1 id="title">The page title</h1><div id="footer">© 2004. All rights reserved.</p>


ID selectors (cont.) To associate a style rule with a specific

identified element, use that element’s unique id value as an ID selector. An ID selector is simply an id value preceded by a

pound sign (#)

ID selectors are typically used to format page elements that are sure to appear only once per page, such as titles, headers, and footers.

Since ID selectors are more specific than class selectors, ID selectors take precedence when conflicts occur.

#title {color: red;}#footer {color: gray;}


An example of class and ID selectors

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS class and ID selectors</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles03.css" /> </head> <body> <h1 id="title">CSS Class and ID Example</h1>

<p>This example demonstrates <dfn class="dark">inheritance</dfn>, which is an <em>important</em> concept in <acronym class="dark">CSS</acronym>.</p> <h1>A second heading</h1> <p class="dark">Another paragraph, but this one is in the dark class.</p> <div id="footer">© 2004, A. Michael Gildersleeve<br /> <a href="mailto:[email protected]">[email protected]</a></div> </body></html>

h1 {color: teal;}p {color: green;}.dark {color: maroon;}#title {color: red;}#footer {color: gray;}



samples/chapter3/

See examples 10, 11, 14


Combining selectorsclass and id selectors can be combined with element name selectors to create more specific selectors.

To accomplish this, simply start with the element name selector and add the desired class or id selector to the end of it.

The above example applies only to <h1> elements that are members of the “chapter” class.

This color applies only to a <td> element with an id of “logo”.

h1.chapter {color: purple;}

td#logo {color: maroon;}


Pseudo-classesPseudo-classes are similar to regular classes in that they apply only to certain elements.

However, unlike regular classes, the author does not associate pseudo-classes with elements, the browser does.

This allows pseudo-classes to capitalize on the browser’s knowledge of the page and the state of each item on it.


Pseudo-classes (cont.) This is particularly useful in association with

links.

A link is created with an <a> element.

Links can be in several different states: unvisited, visited, active or hover.


Pseudo-classes (cont.) It’s the same <a> element regardless of the state the

link is in. So a single <a> element can be in any one of these states at different times.

Only the browser knows for sure what state the link is in. The browser associates the link with a specific pseudo-class based on its current state.

A link may start out displayed in the unvisited state, enter the hover state as a user moves the mouse over it, and then enter the active state if the user clicks the mouse button. If the user then returns to the same page later, that same link will be in the visited state.

Using pseudo-classes as selectors, we can change the appearance of the link in each of these distinct states.


Pseudo-class selectorsWhen a pseudo-class appears in a style rule’s selector, it is called a pseudo-class selector. Pseudo-class selectors are typically

associated with the <a> element as an addendum to its element name selector. There is a separate pseudo-class selector for each

of the four states it is possible for a link to be in.

a:link {color: navy;}a:visited{color: teal;}a:hover {color: blue;} a:active {color: maroon;}


Pseudo-class selectors (cont.) In the previous example, the rules instruct

the browser to display unvisited links in navy, visited links in teal, active links in maroon, and hover links in blue.

Be cautious when setting link colors; many users are accustomed to the standard browser default colors (unvisited blue; visited purple; active red; hover not defined) and could be confused by drastically different color schemes. This doesn’t mean you shouldn’t change the colors,

just do so with good reason.

The order in which you specify these selectors in important.

Use LoVe/HAte as a mnemonic.


Pseudo-element selectorsCSS also offers pseudo-element selectors that allow rules to be associated with specific portions of block elements.

One pseudo-element selector is used to associate a rule with only the first letter in a block element.

Another pseudo-element selector is used to associate a rule with the entire first line of a block element.

Note that it would be impossible to accurately predict the extent of the first line as an author, since the length of a line is generally determined by the browser based upon factors such as the size of the browser window and the text.

Not all properties are available for use in rules that use these pseudo-element selectors, so be sure to research and/or test before relying upon them.

Most of the properties that would make sense, however, are available.

See: http://www.w3schools.com/css/css_pseudo_elements.asp

h1 {color: navy;} h1:first-letter {color: blue;}

p {color: black;} p:first-line {color: maroon;}



samples/chapter3/

See examples 12, 13


Contextual selectorsSometimes it is useful to define style rules that are applied only to elements that appear in a specific context. For example, we might want a rule that

applies to <em> elements only when they appear nested within <li> elements. In this case, we can use a contextual selector.

Note that the contextual selector simply consists of two or more other selectors separated by spaces.

em {color: red;}li em {color: maroon;}


Grouping selectorsAnother convenient feature of CSS is the ability to group several selectors together for a single style rule.This allows an author to apply a single rule to several different elements, classes, ids, etc.To group several selectors for a single rule, simply separate them with commas.

The example above sets the color for all headings at once. Note that it is the commas that make this a grouping of several selectors and not a contextual selector.

h1, h2, h3, h4, h5, h6 {color: maroon;}


Grouping selectors (cont.)

This example applies to all <p> elements, any <div> in the “special” class, and the first letter of any <h1> element.

Grouping selectors in this way saves the trouble of writing the same declaration for several different rules. Not only does this save typing when writing a

style sheet, it also makes it easier to make changes later.

p, div.special, h1:first-letter {color: maroon;}



samples/chapter3/

See examples 15


Conflicts in CSSAs you begin writing style sheets and inline styles that apply to various elements throughout various XHTML documents, conflicts between rules are virtually inevitable.

A conflict occurs when several style rules apply to a single element and specify mutually exclusive presentational aspects.


The cascadeThe Cascading Style Sheets standard defines a set of rules for resolving the conflicts that are likely to arise when CSS is used in the “real world” These rules are collectively referred to as the

cascade. The CSS standard lays out the rules in unambiguous

but technical language that makes sense to the programmers who write browsers, but not to a typical Web author.

Fortunately, Web authors typically don’t need to know the details.

In fact, the general rules of thumb that “more specific takes precedence over more general” and “last seen gets used” typically suffice.


The cascade (cont.)However, a somewhat more detailed understanding is sometimes required to predict how conflicts will be resolved.

Inline styles take precedence over rules in internal style sheets, since they are seen after the internal style sheet is processed.

Rules in internal style sheets take precedence over rules in external style sheets, if the <style> element follows the <link /> element.

Rules in external style sheets take precedence over rules in internal style sheets if the <link /> element follows the <style> element.

Rules in external style sheets take precedence over the defaults provided by the browser.

If rules at the same level of precedence conflict, the conflict is resolved by the specificity of their selectors.

ID selectors are more specific than class selectors. Class selectors are more specific than element name selectors.


Examples used from:

Build Your Own Web Site the Right Way Using HTML & CSS by Ian Lloyd

Web Developer & Design Foundations with XHTML by Terry Felke-Morris

“Summer, 2006 CS403 PowerPoint” by Mike Gildersleeve

Documents

12/7/2015Cascading Style Sheets Part 11 Spring, 2008 Modified by Linda Kenney Feb. 28, 2008