CSS: Cascading Style Sheets

CSS: Cascading Style Sheets
IST 516 Fall 2011 Dongwon Lee, Ph.D.

Cascading Style Sheet CSS (Cascading Style Sheets) Advantages
Low-level formatting information to specify physical properties of HTML Eg, font, color, layout, etc Stored in a separate file from HTML (usually)  can be shared or re-used for many HTML files Advantages Separation of logical and physical contents Consistency among many HTML documents

Cascading Style Sheet CSS V 2.1 (2009)
W3C’s official CSS validation service

When to Use CSS Uniform look on multiple web pages or sites
Better maintenance of formatting Increased re-usability of web design If your project plans to have HTML pages or web sites  consider using CSS+HTML together

Cascading Style Sheet Example
HTML HTML+CSS <html> <head> <style type="text/css"> h1 {color:blue;} h1 u {color:red;} h1 i {color:green;} </style> </head> <body> <h1><u>CSS</u> Example for <i>IST Class</i></h1> </body> </html> <html> <body> <h1><u><font color=red>CSS</></u> Example for <i><font color=green>IST Class</></i></h1> </body> </html>

4 Ways to Use CSS in HTML Files
Inlined within HTML tags Embedded within HTML <style> Linked or Imported or High Priority … <h1 style=“font-size:150%;”>Title here</h1> <p style=“color:red;”> regular HTML text here</p> <head> <style type=“text/css”> /* CSS code here */ </style> </head> … <link href=“foo.css” rel="stylesheet" type="text/css"> Most Recommended <style “foo.css"; </style> Low Priority

Cascading Overriding Rules
Inlined CSS overrides others (Embedded, Linked, and Imported CSS)  Highest Priority Embedded CSS overrides Linked/Imported <head> <link href=“foo.css” rel="stylesheet" type="text/css”> <style type=“text/css”> p {color:blue;} </style> </head> … <p style=“color:red;”>Paragraph always appears RED</p> Linked CSS Embedded CSS Inlined CSS

Download 30-day trial version from:
Using XMLSpy CSS properties foo.css foo.html Download 30-day trial version from: HTML tags

Using XMLSpy: Text Editing
Embedded CSS: File  New  HTML 4 or XHTML 1 enter your HTML with CSS in the new file 2. Linked CSS: File  New  CSS

Using XMLSpy: Rendering Output

Selector { Property : Value ; }
Basic Syntax Selector { Property : Value ; } Declaration Selector: an HTML tag to apply { Property : Value} to Eg, h1, title, p, table, img, body Property: a CSS element to manipulate Eg, color, border, font-size, font Value: the value of the specified property Eg, “green”, “10pt”, “150%”, “Times-Roman”

Selector { Property : Value ; }
Basic Syntax: Example Selector { Property : Value ; } Declaration h1 { color : blue ; } Set the text color of <h1> tag to “blue” p { font-family : sans-serif ; } Paragraph <p> uses “sans-serif” font table { background-color : blue ; } Table <table> has “blue” background color

Property : Value ; … Property : Value ; }
Grouping Syntax Selector, … , Selector { Property : Value ; … Property : Value ; } Multiple selectors are delimited by “,” Multiple declarations are delimited by “;” Means: all declarations are equally applied to all HTML tags h1, h2, p { color : blue; font-size:10pt; } All HTML tags <h1>, <h2>, and <p> will have the same format of blue color and 10pt font size

Property : Value ; … Property : Value ; }
Nesting Syntax Whitespace Selector Selector { Property : Value ; … Property : Value ; } Multiple selectors are delimited by whitespace “ ” Eg, Selector1 Selector2 { declarations } Declarations are applied to the HTML tag “Selector2” IF it appears within the HTML tag “Selector1” (ie, nested) p u { color : blue; font-size:10pt; } Text within <u> tag has blue color with 10pt font if <u> appears within <p> tag

Basic Example </html>
<html> <head> <style type="text/css"> body {background: lightgray;} /* CSS comments */ h1, h2 {color:blue; background: white;} h1 u {color:red;} </style> </head> <body> <h1>H1 has blue color with <u>red underlined</u></h1> <h2>H2 has the same color as H1 with <u>blue underlined</u></h2> </body> </html>

CSS Background Properties
Background effects of an element Background Color Eg, body {background-color:red;} Using image as background Eg, body {background-image:url(“psu.gif”);} Positioning image in background Eg, body {background-image:url(“psu.gif”); background-position:right top;}

CSS Text Properties: Color
3 ways to specify color values A color name: eg, “red” An RGB value: eg, rgb(255,0,0) for red, green, blue A hexa-decimal value: eg, ”#FF0000” Eg, p {color:red;} From

CSS Text Properties Alignment: center, right, left, justify
Eg, p {text-align: right; } Decoration: overline, line-through, underline, blink, none Eg, p {text-decoration:underline;}

CSS Font Properties Font Family Font Style: normal, italic, oblique
Eg, p {font-family : "Times New Roman", Times, serif; } Font Style: normal, italic, oblique Eg, p {font-style :italic;} Font Weight: normal, bold, lighter Eg, p {font-weight: bold; } Font Size: px, %, Eg, h1 {font-size:40px;} h2 {font-size:200%;}

CSS Link Properties Link (<a>) has special 4 states Rules:
a:link: a normal, unvisited link a:visited: a link the user has visited a:hover: a link when the user mouses over it a:active: a link the moment it is clicked Rules: a:hover must come after a:link and a:visited a:active must come after a:hover

Link Example <html> <head> <style type="text/css"> a:link {background-color:#B2FF99;} /* unvisited link */ a:visited {background-color:#FFFF85;} /* visited link */ a:hover {background-color:#FF704D;} /* mouse over link */ a:active {background-color:#FF704D;} /* selected link */ </style> </head> <body> <p><a href=" link</a> and <a href=" link</a> appears with different color</p> </body> </html>

CSS List Properties HTML has 2 lists
<ul>: unordered list w. default bullet item marker <ol>: ordered list w. default number item marker

CSS <ul> Item Markers
list-style-type has 4 types for <ul>: none: No marker disc: a filled circle symbol (default) circle: an empty circle symbol square: a square symbol

CSS <ol> Item Markers
list-style-type has many types for <ol>: decimal: a number decimal-leading-zero: 01, 02, 03, … lower-alpha: a, b, c, … lower-roman: I, ii, iii, iv, … upper-alpha: A, B, C, … upper-roman: I, II, III, IV, … …

List Example <html> <head> <style type="text/css"> ul {list-style-type:square;} ol {list-style-type:upper-roman;} </style> </head> <body> <ul><li>one</li><li>two</li><li>three</li></ul> <ol><li>one</li><li>two</li><li>three</li></ol> </body> </html>

CSS Table Properties Border: specifies size and color of border
<table> <th> <td> can have separate borders Use border-collapse to merge multiple borders Eg, table, th, td { border: 1px solid black; } Width/Height: use px or % Eg, table {width:100%; height:100px;} Text alignment: Horizontal: left, right, center Eg, td {text-align: left} Vertical: top, bottom, middle Eg, td {vertical-align: middle}

CSS Table Properties Padding: space between border and content
Eg, td {padding: 20px; } Color: color and background-color Eg, th { background-color:green; color:white; }

Table Example <html> <head> <style type="text/css"> table, td, th { border:3px solid black; border-collapse : collapse;} th {padding:20px; background-color:green; color:yellow;} </style> </head> <body> <table> <tr><th>Country</th><th>Capital</th></tr> <tr><td>US</td><td>Washington DC</td></tr> <tr><td>UK</td><td>London</td></tr> </table> </body> </html>

CSS Class Class in CSS allows multiple formats for the same HTML tag
Selector . classname { Property : Value ; } In HTML <tag class=“classname”> … </tag> Class in CSS allows multiple formats for the same HTML tag Eg, In CSS: p.first {color:blue;} p.second {color:red;} In HTML: <p class=“first”>This is blue</p> <p class=“second”>This is red</p>

Class Example <html> <head> <style type="text/css"> p {font-size:200%;} p.first{ color: blue; } p.second{ color: red; } </style> </head> <body> <p>Normal BLACK paragraph</p> <p class="first">First BLUE paragraph</p> <p class="second">Second RED paragraph</p> </body> </html>

More CSS Properties and Values
CSS has more properties and corresponding values than shown here Online reference sites: CSS-based web site building reference sites:

Reference CSS: The Definite Guide, Eric Meyer, O’Reilly, 2006
Tizag.com CSS Tutorial CSS Tutorial

CSS: Cascading Style Sheets

Similar presentations

Presentation on theme: "CSS: Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

CSS: Cascading Style Sheets

Similar presentations

Presentation on theme: "CSS: Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback