Lecture 3: CSS (part 1)

Ouissem Ben Fredj

[email protected]
http://lms.tu.edu.sa/
502261-3 – Web Systems

Taif University
College of Computers and Information Technology
 The problem with HTML
● HTML was originally intended to describe the content of a
document
● Page authors didn’t have to describe the layout--the
browser would take care of that
● This is a good engineering approach, but it didn’t satisfy
advertisers and “artists”
● Even people that actually had something to say wanted more
control over the appearance of their web pages
● As a result, HTML acquired more and more tags to control
appearance
● Content and appearance became more intertwined
● Different browsers displayed things differently, which is a real
problem when appearance is important

0
 Cascading Style Sheets
● A Cascading Style Sheet (CSS) describes the
appearance of an HTML page in a separate document
● CSS has the following advantages:
● It lets you separate content from presentation
● It lets you define the appearance and layout of all the pages in
your web site in a single place
● It can be used for HTML, XHTML, and XML pages
● CSS has the following disadvantage:
● Internet Explorer doesn’t always follow the W3C standards

0
 CSS syntax, I
● CSS syntax is very simple--it’s just a file
containing a list of selectors (to choose tags) and
descriptors (to tell what to do with them):
● Example: h1 {color: green; font-family: Verdana}
says that everything included in h1 (HTML heading
level 1) tags should be in the Verdana font and colored
green
● A CSS file is just a list of these selector/descriptor
pairs
● Selectors may be simple HTML tags or XML tags, but
CSS also defines some ways to combine tags
● Descriptors are defined in CSS itself, and there is quite a
long list of them

0
 CSS syntax
● The general syntax is:
selector { property: value; }
● or
selector, ..., selector {
property: value;
...
property: value;
}
● where
● selector is the tag to be affected (the selector is case-sensitive if
and only if the document language is case-sensitive)
● property and value describe the appearance of that tag
● Spaces after colons and semicolons are optional
● A semicolon must be used between property:value pairs; a
semicolon after the last pair is recommended but optional

0
 Example of CSS
● /* This is a comment */
● h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */
● p, table, li, address { /* apply to all these tags */
font-family: "Courier New"; /* quote values containing spaces */
margin-left: 15pt; /* specify indentation */
}
● p, li, th, td {font-size: 80%;} /* 80% of size in containing element */
● th {background-color:#FAEBD7} /* colors can be specified in hex */
● body { background-color: #ffffff;}
● h1,h2,h3,hr {color:saddlebrown;} /* adds to what we said before */
● a:link {color:darkred} /* an unvisited link */
● a:visited {color:darkred} /* a link that has been visited */
● a:active {color:red} /* a link now being visited */
● a:hover {color:red} /* when the mouse hovers over it */
Adapted from: http://www.w3schools.com/css/demo_default.htm
0
 More about selectors, I
● As we have seen, an XML or HTML tag can be used as a
simple element selector:
body { background-color: #ffffff }
● You can use multiple selectors:
em, i {color: red}
You can repeat selectors:
h1, h2, h3 {font-family: Verdana; color: red}
h1, h3 {font-weight: bold; color: pink}
• When values disagree, the last one overrides any earlier ones
● The universal selector * applies to any and all elements:
* {color: blue}
• When values disagree, more specific selectors override general
ones (so em elements would still be red)

0
Example of overriding

0
 More about selectors, II

A descendent selector chooses a tag with a specific ancestor:

● p code { color: brown }
● selects a code if it is somewhere inside a paragraph
● A child selector > chooses a tag with a specific parent:
h3 > em { font-weight: bold }
selects an em only if its immediate parent is h3
● An adjacent selector chooses an element that immediately
follows another:
b + i { font-size: 8pt }
Example: <b>I'm bold and</b> <i>I'm italic</i>
Result will look something like: I'm bold and I'm italic

0
 More about selectors, III
● A simple attribute selector allows you to choose
elements that have a given attribute, regardless of its
value:
● Syntax: element[attribute] { ... }
● Example: table[border] { ... }
● An attribute value selector allows you to choose
elements that have a given attribute with a given value:
● Syntax: element[attribute="value"] { ... }
● Example: table[border="0"] { ... }

0
 More about values
● As we have seen, the syntax for a CSS rule is:
selector, ..., selector { property: value; . . . property: value }
● The value is whatever occurs between the colon and the
semicolon (or closing brace)
● Example: * {font-family: Trebuchet, Verdana, sans-serif;}
● This means to use the Trebuchet font for everything, if it is
available; else use the Verdana font, if available; else use
whatever sans serif font the browser uses as default
● section {border: thin solid blue;}
● This means to put a borders around section elements; the
borders are to be thin and solid and blue

0
 The class attribute
● The class attribute allows you to have different
styles for the same element
● In the style sheet:
p.important {font-size: 24pt; color: red}
p.fineprint {font-size: 8pt}
● In the HTML:
<p class="important">The end is nigh!</p>
<p class="fineprint">Offer ends 1/1/97.</p>
● To define a selector that applies to any element with
that class, just omit the tag name (but keep the dot):
.fineprint {font-size: 8pt}

0
 The id attribute
● The id attribute is defined like the class attribute, but uses #
instead of .
● In the style sheet:
p#important {font-style: italic} or
# important {font-style: italic}
● In the HTML:
<p id="important">
● class and id can both be used, and do not need to have different
names:
<p class="navigation_bar" id="navigation_bar">
● Important difference: id is used to specify a unique identifier,
so it should only be used once in any given document

0
 div and span
● div and span are HTML elements whose only purpose
is to hold CSS information
● div ensures there is a line break before and after (so it’s
like a paragraph); span does not
● Example:
● CSS: div {background-color: #66FFFF}
span.color {color: red}
● HTML: <div>This div is treated like a paragraph, but
<span class="color">this span</span> is not.</div>

0
 Using style sheets

● There are three ways of using CSS:

● External style sheet
● This is the most powerful
● Applies to both XHTML/HTML and XML
● All of CSS can be used
● Embedded style sheet
● Applies to XHTML/HTML, not to XML
● All of CSS can be used
● Inline styles
● Applies to XHTML/HTML, not to XML
● Limited form of CSS syntax

0
 External style sheets
● In XHTML/HTML, within the <head> element:
<link rel=”stylesheet" type="text/css"
href="Style Sheet URL">
● As a PI in the prologue of an XML document:
<?xml-stylesheet href="Style Sheet URL"
type="text/css"?>
● Note: "text/css" is the MIME type

0
 Embedded style sheets
● In XHTML/HTML, within the <head> element:
<style type="text/css">
<!--
CSS Style Sheet
-->
</style>
● Note: Embedding the style sheet within a comment is a
sneaky way of hiding it from older browsers that don’t
understand CSS
● There aren’t many of these around any more

0
 Inline style sheets
● The style attribute can be added to any HTML element:
<html-tag style="property: value"> or
<html-tag style="property: value;
property: value; ...; property: value">
● Advantage:
● Useful if you only want a small amount of markup
● Disadvantages:
● Mixes display information into HTML
● Clutters up HTML code
● Can’t use full range of CSS features

0
 Cascading order
● Styles will be applied to HTML in the following
order:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside other elements, outermost first)
● When styles conflict, the “nearest” (most recently
applied) style wins

0
 Example of cascading order
● External style sheet: h3 { color: red;
text-align: left;
font-size: 8pt
}
● Internal style sheet: h3 { text-align: right;
font-size: 20pt
}
● Resultant attributes: color: red;
text-align: right;
font-size: 20pt

0
 A novel example: XHTML
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Great American Novel</title>
<link rel="stylesheet" href="novel.css" type="text/css" />
</head>

<body>
<p class="foreword">This is the great American novel.</p>

<div class="chapter">
<p>It was a dark and stormy night.</p>

<p>Suddenly, a shot rang out!</p>

</div>
</body>
</html>

0
 A novel example: CSS
• .chapter { • p{
font-family: Papyrus, display: block
"Comic Sans MS", fantasy; }
}
.chapter { p.foreword {
display: block border: solid red;
} padding: 10px;
• .chapter:before { font-family: Impact;
content: "New chapter: " color: blue;
} }

• .chapter:first-letter {
font-size: 200%;
float: left
}

0
 A novel example: Results
Opera (Macintosh) IE 6 (Windows)

Firefox (Macintosh) IE 8 beta (Windows)

0
 Some font properties and values
● font-family:
● inherit (same as parent)
● Verdana, "Courier New", ... (if the font is on the client computer)
● serif | sans-serif | cursive | fantasy | monospace
(Generic: your browser decides which font to use)
● font-size:
● inherit | smaller | larger | xx-small | x-small | small |
medium | large | x-large | xx-large | 12pt
● font-weight:
● normal | bold |bolder | lighter | 100 | 200 | ... | 700
● font-style:
● normal | italic | oblique

0
 Shorthand properties
● Often, many properties can be combined:
h2 { font-weight: bold; font-variant: small-caps; font-
size: 12pt; line-height: 14pt; font-family: sans-serif }
can be written as:
h2 { font: bold small-caps 12pt/14pt sans-serif }

0
 Colors and lengths
● color: and background-color:
● aqua | black | blue | fuchsia | gray | green | lime |
maroon | navy | olive | purple | red | silver | teal |
white | #FF0000 | #F00 | rgb(255, 0, 0) | Additional
browser-specific names (not recommended)
● These are used in measurements:
● em, ex, px, %
● font size, x-height, pixels, percent of inherited size
● in, cm, mm, pt, pc
● Inches (2.54 cm), centimeters, millimeters, points (1/72 of an inch),
picas (1 pica = 12 points), relative to the inherited value

0
 Some text properties and values
● text-align:
● left | right | center | justify
● text-decoration:
● none | underline | overline | line-through
● text-transform:
● none | capitalize | uppercase | lowercase
● text-indent
● length | 10% (indents the first line of text)
● white-space:
● normal | pre | nowrap

0
 Pseudo-classes
● Pseudo-classes are elements whose state (and appearance) may
change over time
● Syntax: element:pseudo-class {...}
● :link
● a link which has not been visited
● :visited
● a link which has been visited
● :active
● a link which is currently being clicked
● :hover
● a link which the mouse is over (but not clicked)
● Pseudo-classes are allowed anywhere in CSS selectors
● Note, however, that XML doesn’t really support hyperlinks yet

0
 Choosing good names
● CSS is designed to separate content from style
● Therefore, names that will be used in HTML or (especially) in XML
should describe content, not style
● Example:
● Suppose you define span.huge {font-size: 36pt} and you use <span
class="huge"> throughout a large number of documents
● Now you discover your users hate this, so you change the CSS to be
span.huge {font-color: red}
● Your name is inappropriate; do you change all your documents?
● If you had started with span.important {font-size: 36pt}, your
documents wouldn’t look so dumb

0
 References

● Some of the examples in this presentation were taken from

the W3Schools online tutorial at
http://www.w3schools.com/css/css_syntax.asp
● Dave Raggett’s Adding a Touch of Style is a very nice
online tutorial at http://www.w3.org/MarkUp/Guide/Style
● Index DOT Css has also been a great source of information
about CSS:
http://www.blooberry.com/indexdot/css/index.html
● In particular, there is a list of when CSS features were first supported
by which browsers (-- means “not yet supported”) at
http://www.blooberry.com/indexdot/css/supportkey/syntax.htm