Cascading Style Sheets
(CSS)
Xingquan (Hill) Zhu
xqzhu@cse.fau.edu
CSS
1-1
CSS
 Introduction
 Levels of Style Sheets
 Inline style sheets
 Document-level style sheets (embedded style sheets)
 External style sheets
 Style Specification Formats
 Depends on the level of the style sheet
 Inline vs Document level
 Selector Forms
 Simple selector, Class selector, Generic selector, Id selector
 Pseudo Classes
 Property value forms
 Fonts, Lists, Alignment of text, Margins, Colors,
Backgrounds, Borders
CSS
1-2
Introduction
 Evolution
 The CSS1 specification was developed in 1996
 CSS2 was released in middle-1998
 CSS3 is on its way
 Things you should know about CSS

CSSs provide the means to control and change presentation
of HTML documents
• But Why? Element presentation vs document structure



CSS is not technically HTML, but can be embedded in HTML
documents
Style sheets allow you to impose a standard style on a whole
document, or even a whole collection of documents
Style is specified for a tag by the values of its properties
CSS
1-3
Levels of Style Sheets
 Inline


Specified for a specific occurrence of a tag and apply only to that
tag
Appears in the tag itself (Example)
 Document-level style sheets


Apply to the whole document in which they appear
Appears in the head of the document (Example)
 External style sheets (Example)






Can be applied to any number of documents
In separate files, potentially on any server on the Internet
A <link> tag is used to specify that the browser is to fetch and use
an external style sheet file
<link rel = "stylesheet" type = "text/css"
href = "http://www.wherever.org/termpaper.css">
</link>
CSS
1-4
CSS Validation
http://jigsaw.w3.org/cssvalidator/validator-upload.html
CSS
1-5
CSS
 Introduction
 Levels of Style Sheets
 Inline
 Document-level style sheets (embedded style sheets)
 External style sheets
 Style Specification Formats
 Depends on the level of the style sheet
 Inline vs Document level
 Selector Forms
 Simple selector, Class selector, Generic selector, Id selector
 Pseudo Classes
 Property value forms
 Fonts, Lists, Alignment of text, Margins, Colors,
Backgrounds, Borders
CSS
1-6
Style Specification Formats
 Format depends on the level of the style sheet
 Inline
 Style sheet appears as the value of the style
attribute
 General form:
style = "property_1: value_11, value_12, value_13;
property_2: value_2;
…
property_n: value_n;“
Final ; optional but preferred
Example
CSS
1-7
Style Specification Formats:
Document level
 Style sheet appears as a list of rules that are
the content of a <style> tag
 The <style> tag must include the type attribute,
set to "text/css"
 The list of rules
Selector1 {property_1: value_1; property_2: value 2}
 Selector2 {property: value}

 Comments in the rule list must have a different
form - use C comments (/*…*/)
Example
CSS
1-8
Style Specification Formats:
Conflicting Styles
 Styles defined by the user take precedence over
styles defined by the user agent
 Styles defined by authors take precedence over
styles defined by the user.
 Styles defined for parent elements are also inherited
by children (nested) elements
Inheritance Example
 In case of conflict
 Properties defined for child and descendant elements have a
greater specificity than properties defined for parent and
ancestor elements.
CSS
1-9
CSS
 Introduction
 Levels of Style Sheets
 Inline
 Document-level style sheets (embedded style sheets)
 External style sheets
 Style Specification Formats
 Depends on the level of the style sheet
 Inline vs Document level
 Selector Forms
 Simple selector, Class selector, Generic selector, Id selector
 Pseudo Classes
 Property value forms
 Fonts, Lists, Alignment of text, Margins, Colors,
Backgrounds, Borders
CSS
1-10
Selector Forms
 Simple Selector Form

The selector is a tag name or a list of tag
names, separated by commas
• Simple examples:
– H1, h3, p
• Contextual selectors
– Ol ol li
– P em
CSS
1-11
Selector Forms: Class Selector
 Used to allow different occurrences of the
same tag to use different style specifications
 A style class has a name, which is attached to
a tag name
p.narrow {property: value; …}
 p.wide {property: value; …}

 The class you want on a particular occurrence
of a tag is specified with the class attribute
of the tag
<p class = "narrow"> This is narrow </p>
 <p class = "wide"> This is wide class </p>

CSS
1-12
Selector Forms: Generic Selector
 A generic class can be defined if you want a
style to apply to more than one kind of tag
 A generic class must be named, and the name
must begin with a period

.really-big { … }
 Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
…
 <p class = "really-big"> … </p>

Example
CSS
1-13
Selector Forms: id Selector
 Allow the application of a style to one specific
element

General form:
• #specific-id {property-value list}

Example:
• #section14 {font-size: 20}
• When referring to this the id selector
– <h1 id=“section14”> Welcome to my Home </h1>
CSS
1-14
Pseudo Classes
 Pseudo classes are styles that apply when
something happens, rather than because
the target element simply exists
 Names begin with colons
hover classes apply when the mouse cursor is
over the element
 focus classes apply when an element has focus

Example
CSS
1-15
CSS
 Introduction
 Levels of Style Sheets
 Inline
 Document-level style sheets (embedded style sheets)
 External style sheets
 Style Specification Formats
 Depends on the level of the style sheet
 Inline vs Document level
• Conflicting Styles
 Selector Forms
 Simple selector, Class selector, Generic selector, Id selector
 Pseudo Classes
 Property value forms
 Fonts, Lists, Alignment of text, Margins, Colors,
Backgrounds, Borders
CSS
1-16
Property Value Forms
 There are 60 different properties in 7
categories
Fonts
 Lists
 Alignment of text
 Margins
 Colors
 Backgrounds
 Borders

CSS
1-17
Units of Measurement
 Units (no space is allowed between the value and the
unit specification)








px - pixels
in – inches (1 inch = 2.54 cm)
cm - centimeters
mm - millimeters
pt – points (1/72 inch)
pc - picas (12 points)
em - height of the letter ‘M’
ex-height - height of the letter ‘x’
 Example
 P { line-height:150% }
/* 150% of ‘font-size’ */
 P {line-height: 1.5em}
 #banner { height: 60%; width:70%; margin-left:15%; border:
1px solid #000} /* a box */
CSS
1-18
Font Property
 Font-family
 Value is a list of font names - browser uses the first in
the list it has
 font-family: Arial, Helvetica, Courier
 Generic fonts: serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS)
 Browser has a specific font for each
 If a font name has more than one word, it should be
single-quoted
 Font-size
 Possible values: a length number or a name, such as xxsmall, smaller, xx-large, etc
Example
CSS
1-19
Font Property
 Font-style

italic, oblique (useless), normal
 Font-weight - degrees of boldness
 bolder, lighter, bold, normal
 Could specify as a multiple of 100 (100 – 900)
• 400 is the normal size
 Font (shorthand)
 For specifying a list of font properties
 font: bolder 14pt Arial Helvetica
 Order must be: style, weight, size, name(s)
CSS
1-20
Text related Properties
 Text-decoration
 line-through, overline, underline, none
 Letter-spacing; Word-spacing
 Value is any length property value
 Text-align
 Left; right; center; justify
 Vertical-align
 Baseline; sub; super; top; text-top; middle; bottom; textbottom; <percentage>
 Text-transform
 Capitalize; uppercase; lowercase; none
 Text-indent
 Value (percentage)
 Line-height
 Value (number, percentage)
CSS
1-21
Position properties
 Absolute positioning
 Position: absolute; top, left, z-index
Example
# one{
position:absolute; top: 1em; left: 1em;
}
 Relative positioning
Position: relative;
 Span

Example
• Grouping element: does not apply any inherent
formatting to its contents
CSS
1-22
Alignment of Text
 Element dimensions
 Specify the actual dimensions of each page element
Example
 Nested elements Example
 The text-indent property allows indentation

Takes either a length or a % value
 The text-align property has the possible values,
 Left (the default), center, right, or justify
 Sometimes we want text to flow around
another element
the float property
 Left, right, and none (default)

CSS
1-23
Alignment of Text (contd.)
 If we have an element we want on the right, with text flowing
on its left, we use the default text-align value (left) for the
text and the right value for float on the element we want on
the right
 <img src = "c210.jpg"
style = "float: right" />
-- Some text with the default alignment – left
 Clear float

<p style=“float: clear” …
Example
CSS
1-24
Border related properties
Box model
 Margin-top (right, left, bottom)

Value (percentage)
 Padding-top (right, left, bottom)
 Value (percentage)
 Border-top-width (right, left, bottom)
 Thin, medium, thick (value)
 Border-style
 Dotted, dashed, double, none
 Border-color
Example
CSS
1-25
Background
 Background-color:
 Red; #0000FF
 Background-image:
 url(myimage.jpg)
 Background-repeat:
 Repeat; no-repeat; repeat-x; repeat-y:
 Background-position:
 Top; center; bottom; left; right; 20px 20px
 Background-attachment:
 Fixed; scroll;
Background for single elements
Example
CSS
1-26
List Property
 list-style-type

Disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none.
 Can also use an image for the bullets in
an ordered list

<li style = "list-style-image: url(bird.jpg)">
Example
CSS
1-27
User Style Sheets
 Users format pages based on preference
 <html xmlns = "http://www.w3.org/1999/xhtml">
 <head>

<title>User Styles</title>

<style type = "text/css">
.note { font-size: 9pt }




</style>
</head>
<body>
<p>Thanks for visiting my Web site. I hope you enjoy it.
</p><p class = "note">Please Note: This site will be moving soon.
Please check periodically for updates.</p>
</body>
 </html>
Example
CSS
1-28
Other interesting stuff
 Cursor

Example
Specifies the type of cursor to be displayed when pointing on an
element.
• Cursor: url(sample.cur), cursor: crosshair
 First letter

(pseudo element)
Example
Adds special style to the first letter of a text
• P:first-letter{color:#000; font-size:xx-large}
 Mighty Hover Example
http://icant.co.uk/csstablegallery/index.php?css=75#r75
Complete CSS2 Properties:
http://www.w3schools.com/css/css_refere
nce.asp
CSS
1-29
CSS
 Introduction
 Levels of Style Sheets
 Inline
 Document-level style sheets (embedded style sheets)
 External style sheets
 Style Specification Formats
 Depends on the level of the style sheet
 Inline vs Document level
• Conflicting Styles
 Selector Forms
 Simple selector, Class selector, Generic selector, Id selector
 Pseudo Classes
 Property value forms
 Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds,
Borders
CSS
1-30