Info 655 Intro Web Programing: Week 1: CSS Cascading Style Sheets
Info 655 Intro Web Programing: Week 1: CSS Cascading Style Sheets
Week 1: CSS
Cascading Style Sheets
• Introduction to CSS
• Three styles/approaches
• CSS Selectors
• Some CSS Properties
• CSS Validation
|2
CSS
• Cascading Style Sheets (CSS)
– Used to specify the presentation (formatting) of elements
separately from the structure and content of the page
• Three approaches:
– In-line
– Embedded
– External link
• CSS validator
jigsaw.w3.org/css-validator/
3
Cascading Style Sheets (CSS)
Inline, Embedded, Linking External
4
Inline CSS
|5
CSS: Inline Styles
• Inline style
– declare a style for an individual element by using the style
attribute in the element’s start tag
• CSS rule syntax:
– Each CSS property is followed by a colon and the value
– Multiple property:value pairs are separated by a semicolon
6
CSS: Inline Styles (Cont.)
8
CSS: Embedded Style Sheets
<head>
<style type="text/css">
h1 {color: #666;}
p{
font-size: 90%;
font-family: Verdana, sans-serif;
}
</style>
<title>Style Sheets</title>
</head>
10
CSS Selector
• CSS syntax selector {property: value;}
– Type (element) selector
h1 {color: red;}
– Class selector (starts with a dot)
.classname {font-weight: bold;}
p.classname {color: blue;}
– ID selector (starts with a pound sign #)
#idname {font-size: 0.5em;}
div#idname {background-color: #bbbbbb;}
– Contextual selector: descendant, child, adjacent/sibling selector, etc.
• Using space, comma, or plus (+) to indicate the relationship
11
CSS: Embedded Style Sheets
13
CSS: Linking External Style Sheets
• External style
14
CSS: Linking External Style Sheets
• 15link element
CSS: Linking External Style Sheets
• Recommended:
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
16
External CSS: Media Types
• A block of styles
18
External CSS: Media Types
div#conclusion {
background-color: #bbbbbb;
text-style: italic;
}
p a{
text-decoration: none;
}
20
Software Engineering Observation
21
CSS STYLE PROPERTIES
22
Font Weight
• font-weight property
23
Text Decoration
• text-
24
Pseudoclasses
• Special effects:
25
Backgrounds
• background-color
26
Element Dimensions
• Dimensions of
27
Length measurement
• Relative length
28
measurements:
More CSS properties:
29
CSS VALIDATION
30
HTML and CSS Validation
• HTML validation
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</a>
• CSS validation
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
31
Resources
32