css: cascading style sheets - pennsylvania state...
TRANSCRIPT
CSS: Cascading Style Sheets
IST 516 Penn State
Dongwon Lee, Ph.D.
2
Cascading Style Sheet CSS (Cascading Style Sheets)
Low-level formatting information to specify physical properties of HTML o Eg, font, color, layout, etc
Stored in a separate file from HTML (usually) o can be shared or re-used for many HTML files
Advantages Separation of logical and physical contents Consistency among many HTML documents
3
Cascading Style Sheet CSS V 2.1 (2009)
http://www.w3.org/TR/CSS21/
W3C’s official CSS validation service http://jigsaw.w3.org/css-validator/
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
4
5
Cascading Style Sheet Example HTML HTML+CSS
<html> <body> <h1><u><font color=red>CSS</></u> Example for <i><font color=green>IST Class</></i></h1> </body> </html>
<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>
4 Ways to Use CSS in HTML Files Inlined within HTML tags
Embedded within HTML <style>
Linked or Imported
or
6
<head> <style type=“text/css”> /* CSS code here */ </style>
</head> …
… <h1 style=“font-size:150%;”>Title here</h1> <p style=“color:red;”> regular HTML text here</p>
<link href=“foo.css” rel="stylesheet" type="text/css">
<style type="text/css”> @import “foo.css"; </style>
High Priority
Low Priority
Most Recommended
Cascading Overriding Rules Inlined CSS overrides others (Embedded,
Linked, and Imported CSS) Highest Priority
Embedded CSS overrides Linked/Imported
7
<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>
Inlined CSS
Embedded CSS
Linked CSS
Using XMLSpy
30-day trial version available from: http://www.altova.com/xml-editor/
foo.html
foo.css
HTML tags
CSS properties
Using XMLSpy: Text Editing
9
1. 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
10
Basic Syntax
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”
11
Selector { Property : Value ; }
Declaration
Basic Syntax: Example
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
12
Selector { Property : Value ; }
Declaration
Grouping Syntax
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
13
Selector, … , Selector { Property : Value ; … Property : Value ; }
Nesting Syntax
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 14
Selector Selector { Property : Value ; … Property : Value ; }
Whitespace
Basic Example <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>
15
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;}
16
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;}
17 From http://www.computerhope.com/htmcolor.htm
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;}
18
CSS Font Properties Font Family
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%;}
19
CSS Link Properties Link (<a>) has special 4 states
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
20
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="http://foo.com">Unvisited link</a> and <a href="http://
bar.com">Visited link</a> appears with different color</p> </body> </html>
21
CSS List Properties HTML has 2 lists
<ul>: unordered list w. default bullet item marker <ol>: ordered list w. default number item marker
22
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
23
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, … …
24
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>
25
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
o Eg, td {text-align: left} Vertical: top, bottom, middle
o Eg, td {vertical-align: middle} 26
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; }
27
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>
28
CSS Class
Class in CSS allows multiple formats for the same HTML tag
Eg, In CSS: p.first {color:blue;} p.second {color:red;} In HTML:
o <p class=“first”>This is blue</p> o <p class=“second”>This is red</p>
29
Selector . classname { Property : Value ; }
<tag class=“classname”> … </tag>
In CSS
In HTML
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>
30
More CSS Properties and Values CSS has more properties and corresponding
values than shown here Online reference sites:
http://www.w3schools.com/css/css_reference.asp http://www.tizag.com/cssT/reference.php
CSS-based web site building reference sites: http://www.csszengarden.com/
31
Reference CSS: The Definite Guide, Eric Meyer,
O’Reilly, 2006 Tizag.com CSS Tutorial
http://www.tizag.com/cssT/ CSS Tutorial
http://www.csstutorial.net/introductionCSS.php
32