CSS (Cascading Style CSS (Cascading Style Sheet)Sheet)

What Is CSS?What Is CSS?

HTML tags allow mixing of: HTML tags allow mixing of: Structures (e.g., list, table, form) Structures (e.g., list, table, form) Display formats (e.g., h1, b, i, font). Display formats (e.g., h1, b, i, font).

However, control is limited in formatting.   However, control is limited in formatting.   For example, For example,

Browsers interpret H1 tag as a large font, but it is up Browsers interpret H1 tag as a large font, but it is up to the browser to decide its actual size.  to the browser to decide its actual size. 

If you want to change font and color of half dozen If you want to change font and color of half dozen subtitles, you need to repeat a sequence to tags for subtitles, you need to repeat a sequence to tags for each subtitle.each subtitle.

What Is CSS?What Is CSS?

CSS offers the designers finer control of CSS offers the designers finer control of how to how to displaydisplay Web pages Web pages

CSS allows separation of: CSS allows separation of: Structures (HTML) Structures (HTML) How documents are formatted (CSS) How documents are formatted (CSS)

Examples Examples

One difficulty with HTMLOne difficulty with HTMLHow to provide margins on a text page.  How to provide margins on a text page.  Here is a simple solution using CSS.  Here is a simple solution using CSS.  

Without margins With margins (using CSS) (using CSS) Headings (using CSS) (using CSS) Altering Headings by changing one line (using by changing one line (using

CSS) CSS)

World Wide Web Consortium World Wide Web Consortium (W3C) (W3C)

Has actively promoted the use of style sheets on Has actively promoted the use of style sheets on the Web since 1994the Web since 1994

Has produced two W3C Recommendations Has produced two W3C Recommendations (CSS1 and CSS2) which are widely, although (CSS1 and CSS2) which are widely, although not consistently, implemented in browsers.  not consistently, implemented in browsers. 

By attaching style sheets to structured By attaching style sheets to structured documents on the Web (e.g. HTML), authors documents on the Web (e.g. HTML), authors and readers can influence the presentation of and readers can influence the presentation of documents without sacrificing device-documents without sacrificing device-independence or adding new HTML tags.  independence or adding new HTML tags. 

CSS RulesCSS Rules

CSS consists of a set of CSS consists of a set of rulesrules which which describe how elements of a Web page are describe how elements of a Web page are to be displayed. to be displayed.

Here is an example of a Here is an example of a rulerule. .

h1 {color: red } /* red text with <h1> */ p {font-style: italic} /* paragraph in italics */

CSS RulesCSS Rules

A A rulerule consists of two parts: consists of two parts: selectorselector - the part before the brace - the part before the brace declarationdeclaration - the part within the braces - the part within the braces

h1 {color: red }p {font-style: italic}

DeclarationDeclaration

A A declarationdeclaration consists of one or more consists of one or more propertiesproperties and corresponding and corresponding valuesvalues. .

h1 {color: red;     font-style: italic; font-size: 15px; }

Associating CSS with HTML PageAssociating CSS with HTML Page

1.1. Document-wide style sheet for the Document-wide style sheet for the currentcurrent documentdocument using the using the STYLE elementSTYLE element. .

2.2. Style sheet to an Style sheet to an individual elementindividual element with the with the STYLE attributeSTYLE attribute. .

3.3. Document-wide style sheet by Document-wide style sheet by linkinglinking to an to an external style sheet external style sheet

4.4. Document-wide style sheet by Document-wide style sheet by importingimporting a style a style sheet with the CSS @import notation. This sheet with the CSS @import notation. This method can be used to link documents to an method can be used to link documents to an external style sheet by documents distributed in external style sheet by documents distributed in various locations on the Web. various locations on the Web.

Using the Using the Style Element<html> <head><title>CSS Demo</title>

<style type="text/css">   <!—h1 {color: red;    font-style: italic; }--></style>

</head>

<body>. . .  

<h1>New: More power and productivity guaranteed.</h1> <p>The runtime of your APC BackUPS will meet or exceed that of any same VA UPS for desk-top   applications, or your money back! There's plenty of   time to shut down safely.  

<h1>Mulipath protection for your whole system</h1>   <p>APC Back-UPS provides clean, consistent power to   your CPU and monitor, plus power protection for your    external modem, laser printer, fax machine, or zip drives.  

<h1>APC: Long lasting, cost effective</h1>   <p>APC QuickSwap battery packs are the quickest, easiest   way to safely renew your

Apc bACK-ups. "Disposable"   UPSs without hot-swappable batteries could mean the end   of your investment. </body> </html>

Changing Properties<html> <head><title>CSS Demo</title>

<style type="text/css">   <!—h1 {color: blue; /* new color */    font-style: italic; }--></style>

</head>

<body>. . .<!– Same as before

Cascading EffectCascading Effect

Suppose we have the following rules. Suppose we have the following rules.

body {color: blue} body {color: blue} h1   {color: red} h1   {color: red} p    {color: black}p    {color: black}

What is the color of text in <h1>? What is the color of text in <h1>? What is the color of text in <p>? What is the color of text in <p>? What is the color of text in <ul>? What is the color of text in <ul>?

Parent-Child Relationship among Parent-Child Relationship among HTML ElementsHTML Elements

<html>     <head> <title>Marianne's Restaurant</title></head>

<body> <h1>Marianne's Restaurant Guide</h1>

  <p> <i>Marianne's Restaurant</i> offers excellent food and wine at reasonable price in a quite and elegant atmosphere. The menu includes:        </p>       

Tree Structure of the DocumentTree Structure of the Document

html

head body

title h1 P ul p

i ili

li

li

<ul>   <li>Traditional American Cuisine    <li>Progressive Hawaiian Dishes    <li>Experiemental Japanese Plates       

</ul>

  <p><i>Marianne''s Restaurant</i> is located on the scenic bank of the Maumee River, a 10 minute driver west of the downtown Centerville.");  </p>     </body>  </html>  

Parent-Child Relationship among Parent-Child Relationship among HTML ElementsHTML Elements

<html>     <head> <title>Marianne's Restaurant</title></head>

<body> <h1>Marianne's Restaurant Guide</h1>

  <p> <i>Marianne's Restaurant</i> offers excellent food and wine at reasonable price in a quite and elegant atmosphere. The menu includes:        </p>       

Inheriting Style Properties by Children<html>     <head> <title>Marianne's Restaurant</title>      

<style type="text/css">  body { color: red; } </style></head>

<body> <h1>Marianne's Restaurant Guide</h1> . . . <!– Same as before       

Overriding Parent’s Style Property

<html>     <head> <title>Marianne's Restaurant</title>      

<style type="text/css">  body { color: red;} ul {color: blue;} </style></head>

<body> <h1>Marianne's Restaurant Guide</h1> . . . <!– Same as before       

Type SelectorsType Selectors Associate Style Associate Style Rules with Predefined HTML Tags. Rules with Predefined HTML Tags.

h1 {color: blue; }

h2 {color: #00ff00; }

h3 {color: #ffffff’ }

P {background-color: #ff00ff;    font-family: "Times New Roman“ }     

Class Selectors-- User-defined -- User-defined Selector NamesSelector Names

<html> <head> <title>Class Attribute</title>

<style type="text/css"> .fancy {color: #669900;         font-family: cursive;          font-style: italic;          font-size: 14pt;        } </style> </head> ...

<body> <p> This paragraph is formatted in default style, with the <i>Times Roman</i> in <i>black</i> color. </p>

<p class=fancy> This paragraph is formatted in a special style, specified by the <b>class</b> attribute. </p>

</body> </html>

Overriding Parent’s Style Property

<html>     <head> <title>Marianne's Restaurant</title>      

<style type="text/css">  body { color: red;} ul {color: blue;} </style></head>

<body> <h1>Marianne's Restaurant Guide</h1> . . . <!– Same as before       

New Tags and Attributes for New Tags and Attributes for Finer Control of Display Styles Finer Control of Display Styles

TagsTags<span> <span>

-- for in-line formatting-- for in-line formatting

<div><div>

-- for block formatting (like <p>)-- for block formatting (like <p>)AttributesAttributes

classclass

idid

Embedding Class Attribute in <span> Tag <html><head> <title>Marianne's Restaurant</title> <style type="text/css"> body { background-color: blue;        color: white;         font-size: 18pt;      }h1 { color: red;   }ul { color: lime;   }      . . .

.logo { color: #FFCC00;       font-family: "Comic Sans MS";       font-style: italic;        font-size: 18pt       } 

</style></head>

<body>   <h1>Marianne's Restaurant Guide</h1><p> Established in 1958, <span class=logo>Marianne's Restaurant</span> offers excellent food and wine at reasonable price in a quite and elegant atmosphere. The menu includes:. . .

ID Attribute ID Attribute

The value of an The value of an ID attributeID attribute must be must be uniqueunique (used only once) throughout a (used only once) throughout a document. document.

The value of class attribute may be The value of class attribute may be repeated.repeated.

An ID Rule Begins with a An ID Rule Begins with a pound pound SignSign (#) before its name. (#) before its name.

<style type="text/css">#header { color: red;          text-size: 16; }  #maintext { color: green;               font-size: 14; }.logo {color: blue;       text-decoration: underline; }</style>

How To Use the How To Use the IDID Attribute Attribute

<body><div id=“header”>The History of Chaminade University</div> <!– header

<div id=“maintext”><span class=“logo”>Chaminade University</span>was founded in 1985 by a group of Marianist brothers, who sailed from Dayton, Ohio, at the request of the bishop of Hawaii. . . .

</div> <!-- maintext--></body>

ID Must Be UniqueID Must Be Unique

The following use in the same document The following use in the same document will not be allowed.will not be allowed.

<span id=“mainText”>San Francisco State University</span> 

<p id=“mainText”>Montana State University</p>

Contextual Selectors Contextual Selectors Consider the following HTML code.Consider the following HTML code.

<h1>Please read the following paragraph <h1>Please read the following paragraph <i>very</i> carefully.</h1> <i>very</i> carefully.</h1>

We wish to make all <h1> text red, and we want We wish to make all <h1> text red, and we want to make italicized words to make italicized words onlyonly within <h1> within <h1> to be to be blue.. blue..

h1 { color: red }  h1 { color: red }  i { color: blue } i { color: blue }

This will make This will make allall italicized words to be blue. italicized words to be blue.

Contextual Selectors Contextual Selectors The solution is contextual selectors.The solution is contextual selectors.

h1 { color: red }  h1 i { color: blue }

Example of Contextual Selector <html> <head><title>Contexual Selectors</title>  <style type="text/css">  h1 { color: red }  i { color: green }  h1 i { color: green }  </style>  </head>  <body>  <p>This sentence is not <i>really</i> that exciting.  <h1>Please read the following paragraph <i>very</i> carefully.<h1>  </body>  </html>

Pseudoclass Pseudoclass

HTML specifies the colors of linked HTML specifies the colors of linked elements. elements.

<body text="#000000“<body text="#000000“ link="#0000ff“ link="#0000ff“ vlink="#800080“ vlink="#800080“ alink="#ff0000"> alink="#ff0000">

PseudoclassPseudoclass

This can be expressed in CSS by using a This can be expressed in CSS by using a pseudoclasspseudoclass. Currently, only the anchor . Currently, only the anchor tag (tag (AA) supports pseudoclasses.) supports pseudoclasses.

A:link { color: blue } A:link { color: blue } A:visited { color: red } A:visited { color: red } A:active { color: green }A:active { color: green }

Example of Pseudoclass SelectorExample of Pseudoclass Selector<html> <head> <title>Links</title>")

<style type='text/css'>")A:link { color: blue } A:visited { color: red } A:active { color: green } </style> 

</head> 

<body> . . .  

DIV and SPAN Elements DIV and SPAN Elements

Two new tags that allows you to embed Two new tags that allows you to embed class attributes: class attributes: <div><div>

block-level element, much like block-level element, much like <p><p>

<span><span>inline element inline element

<html>  <!– SHOW THIS <head><title>DIV and SPAN</title> <style text="text/css"> .thickBox {border-style: ridge;            border-width: thick;            border-color: red; } .special {background-color: black;              color: lime;           font-size: 16pt;          } </style> </head> <body>. . .

In-Line Style Sheets In-Line Style Sheets

If you want to change one word--in fact, If you want to change one word--in fact, one character, one sentence, or any one character, one sentence, or any portion of the body--you can use an portion of the body--you can use an in-linein-line CSS. CSS.

Consider the following document. The Consider the following document. The default text color is black. We can change default text color is black. We can change the formatting of a single word with the formatting of a single word with In-line In-line style sheetstyle sheet..

<html>  Show This <head><title>Inline CSS</title> </head>  <body>   <h1>In-Line CSS</h1>   This is the first sentence, which is usually important.<br>   Here is the second sentence which is less <span style="color: blue; font-weight: bold">IMPORTANT</span>.<br>   Here is the third sentence which is <span style="color: red; font-style: italic">AGAIN IMPORTANT</span>.<br></body></html>

About In-line CSSAbout In-line CSS

Note the following points for the in-line CSS:Note the following points for the in-line CSS: Uses the Uses the STYLESTYLE attribute within a tag. attribute within a tag. Can be written within almost any tag, e.g., Can be written within almost any tag, e.g., <P><P> or or

<H1>.   <H1>.   <DIV> or <SPAN><DIV> or <SPAN> are convenient tags for inserting are convenient tags for inserting in-line style.in-line style.

Multiple rules--property: value--are separated by Multiple rules--property: value--are separated by ;;.. Should be used sparingly, since it isn't reusable.  Should be used sparingly, since it isn't reusable.  Use it only to override inherited style rules.  Use it only to override inherited style rules.  In general, the STYLE element in the header section In general, the STYLE element in the header section

makes more sense. makes more sense.

What Is Cascading?What Is Cascading?

Style rules are defined in style sheets, Style rules are defined in style sheets, which can be defined at any of the which can be defined at any of the following places. following places. In-line within an HTML tag, using the STYLE In-line within an HTML tag, using the STYLE

attribute in a tag attribute in a tag At the document-level, embedded within a At the document-level, embedded within a

page, using the STYLE element page, using the STYLE element Externally, linked to the document, using the Externally, linked to the document, using the

LINK element LINK element Externally, Externally, importedimported to the document from a to the document from a

remote source. remote source.

What Is Cascading?What Is Cascading?

An HTML element can receive stylistic An HTML element can receive stylistic specifications from multiple style sheets. specifications from multiple style sheets.

For example, if one style sheet defines the For example, if one style sheet defines the h1 { color: red }h1 { color: red } rule and another style rule and another style sheet defines the sheet defines the h1 { font-style: italic }h1 { font-style: italic }, , both these rules apply to all both these rules apply to all h1h1 tags in the tags in the document. This is the meaning of document. This is the meaning of cascadingcascading. .

What Is Cascading?What Is Cascading?

But what is the rule if two style sheet sources But what is the rule if two style sheet sources give conflicting rules? give conflicting rules? For example, suppose an externally linked For example, suppose an externally linked style sheet specifies the rule style sheet specifies the rule h1 { color: red }h1 { color: red } and an embedded style sheet specifies the rule and an embedded style sheet specifies the rule h1 {color: blue }h1 {color: blue }. . Will the h1 titles of the document be red or Will the h1 titles of the document be red or blue? blue?

In the case of conflicting rules, the innermost In the case of conflicting rules, the innermost definition, i.e., the one closest to the tag in definition, i.e., the one closest to the tag in question, applies. question, applies.

Order of PrecedenceOrder of Precedence

Here is the order of precedence for the Here is the order of precedence for the style sheets, with the strongest at the top style sheets, with the strongest at the top of the list.of the list.

1.1. In-line, using the STYLE attribute In-line, using the STYLE attribute

2.2. Embedded in the document's Embedded in the document's headhead section, section, using the STYLE element using the STYLE element

3.3. linked to an external file, using the LINK linked to an external file, using the LINK element element

<html> <head><title>Cascading Style Sheet</title> <style type="text/css">h2 { color: red } </style> </head> 

<body>  <h2> The style of this line is specified by the CSS in the head section. </h2> . . .

ExampleExample

<h2 style="font-style: italic"> This headline is in red and italic, because of the combination of the two STYLE elements--document-wide and in-line).</h2> <h2 style="color: blue"> This headline is in blue, because the in-line rule overrides the document-wide rule. </h2>  <h2> This headline is back in red because of the CSS in the head section. <h2>  </body>  </html>

Linking to External CSSLinking to External CSS

Separate CSS from a particular HTML Separate CSS from a particular HTML page page To allow many pages to use the same CSS.To allow many pages to use the same CSS. To display one HTML page in different waysTo display one HTML page in different ways

How?How?

Create a separate file containing CSS Create a separate file containing CSS (e.g., (e.g., mystyle.cssmystyle.css) )

In HTML page that uses it, include the In HTML page that uses it, include the following line in the <head> section:following line in the <head> section:

<link rel=“stylesheet”<link rel=“stylesheet” type=“text/css” type=“text/css” href=“mystyle.css”> href=“mystyle.css”>

CSS File: CSS File: mystyle.cssmystyle.css

body {background-color: black; color: white; }h1 {font-size: 16pt; color: yellow; }

HTML File: HTML File: myfile.htmlmyfile.html

<html><head><title>External CSS</title><style rel=“stylesheet” type=“text/css” href=“mystyle.css”></head>

<body><h1>External CSS Demo</h1>The text in this page . . .</html>

Examples of External CSSExamples of External CSS

Version 1Version 1 HTML FileHTML File CSS FileCSS File

Version 2Version 2 HTML FileHTML File CSS FileCSS File

Version 3Version 3 HTML FileHTML File CSS FileCSS File