Cascading Style Sheets
- Deepa Acharya
Introduction
XHTML is concerned primarily with content rather than the details of how that
content is presented by browsers.
However, these presentation specifications can be more precisely and more
consistently described with style sheets.
A style sheet is a syntactic mechanism for specifying style information.
The CSS1 specification was developed in 1996.
CSS2 was released in 1998
CSS3 is the latest version
CSSs provide the means to control and change presentation of HTML
documents.
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
XHTML style sheets are called cascading style sheets
because they can be defined at three different levels to
specify the style of a document.
Lower level style sheets can override higher level style
sheets, so the style of the content of a tag is determined,
in effect, through a cascade of stylesheet applications.
Levels of Style Sheets
There are three levels of style sheets
• Inline - specified for a specific occurrence of a tag and apply only to that tag
• Document-level style sheets - apply to the whole document in which they
appear
• External style sheets - can be applied to any number of documents
When more than one style sheet applies to a specific tag in a document,
the lowest level style sheet has precedence
Inline style sheets have precedence over document style sheets, which
have precedence over external style sheets.
In a sense, the browser searches for a style property, starting with inline, until
it finds one (or there isn’t one)
Levels of Style Sheets
(continued)
Inline style sheets appear in the tag itself
Document-level style sheets appear in the head of the
document
External style sheets are in separate files, potentially
on any server on the Internet
Written as text files with the MIME type text/css
If no style sheet information is specified,
the browser default property values
are used.
Linking an External Stylesheet
A <link> tag is used to specify that the browser is to fetch and use an external style sheet file.
Within <link>, the rel attribute is used to specify the relationship of the linked-to document to the
document in which the link appears.
The href attribute of <link> is used to specify the URL of the style sheet document, as in the following
example:
<link rel = "stylesheet" type = "text/css"
href = "http://www.wherever.org/termpaper.css">
</link>
The @import directive is an alternative way to use style
specifications from other files. The
form of this directive is
@import url(file name);
Notice that the file name is not quoted.
- External style sheets can be validated
http://jigsaw.w3.org/css-validator/
validator-upload.html
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_1;
property_2: value_2;
…
property_n: value_n"
Format for 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 must be placed in an HTML comment,
because it is not HTML
Comments in the rule list must have a different form -
use C comments (/*…*/)
General Form, Document
Level
General form:
<style type = "text/css">
<!--
rule list
-->
</style>
Form of the rules:
selector {list of property/values}
Each property/value pair has the form:
property: value
Pairs are separated by semicolons, just as in the value of a
<style> tag
EXAMPLE WHICH USES INLINE
STYLE SHEET
<html>
<head>
<title>Sample CSS</title>
</head>
<body>
<h1 style ="font-family: 'Lucida Handwriting'; font-size:
50pt; color: Red;"> Web Programming
</h1>
</body>
</html>
EXAMPLE WHICH USES DOCUMENT
LEVEL STYLE SHEET
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
h1 {
font-family: 'Lucida Handwriting';
font-size: 50pt;
color: Red; }
</style> </head>
<body>
<h1>Web Programming</h1>
</body>
</html>
General Form, External style
sheets
EXAMPLE WHICH USES
EXTERNAL STYLE SHEET Style1.css
<html> <head> <title>Sample h1
CSS</title> <link rel =
{
"stylesheet" type =
"text/css" href = font-family: 'Lucida
"Style1.css" /> </head> Handwriting';
<body> font-size: 50pt;
<h1>Web Programming</h1> color: Red;
</body> }
</html>
Selector Forms: Simple
1. Simple Selector Forms
• In case of simple selector, a tag is used. If the properties of the tag are
changed, then it reflects at all the places when used in the program.
• The selector can be any tag. If the new properties for a tag are not
mentioned within the rule list, then the browser uses default behaviour
of a tag.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
p{
font-family: 'Lucida Handwriting';
font-size: 50pt;
color: Red;
}
</style>
</head>
<body>
<p> OOMD</p>
<p>ECS</p>
<p>Web Programming</p>
</body>
</html>
Output
Selectors can also specify that the style should apply only to elements in
certain positions in the document.
This is done by listing the element hierarchy in the selector, with only
white space separating the element names.
For example, the rule form em {font-size: 14pt;}
applies its style only to the content of emphasis elements that are nested
in a form element in the document.
This is a contextual selector (sometimes called a descendant selector).
Class Selectors
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 list}
p.wide {property/value list}
• The class you want on a particular occurrence of a tag is
specified with the class attribute of the tag
For example,
<p class = "narrow">
...
</p>
...
<p class = "wide">
...
</p>
In class selector, it is possible to give different properties for different elements
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
p.one {
font-family: 'Lucida Handwriting';
font-size: 25pt;
color: Red;
}
p.two {
font-family: 'Monotype Corsiva';
font-size: 50pt;
color: green; }
</style> </head>
<body>
<p class = "one">OOMD</p>
<p class = "two">Web Programming</p>
</body>
</html>
Output
Generic Selectors
• 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
Example,
.really-big { … }
Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
.one {
font-family: 'Monotype Corsiva';
color: green;
}
</style>
</head>
<body>
<p class = "one"> Web Programming </p>
<h1 class = "one"> Web Programming </h1>
<h6 class = "one"> Web Programming </h6>
</body>
</html>
Output
id Selectors
An id selector allow the application of a style to one
specific element
General form:
#specific-id {property-value list}
Example:
#section14 {font-size: 20}
An id selector allows the application of a style to one specific element.
<html> <head> <title>Sample CSS</title> <style type = "text/css">
#one {
font-family: 'lucida calligraphy';
color: purple;
}
#two {
font-family: 'comic sans ms';
color: orange;
} </style> </head>
<body>
<p id = "two">Web Programming</p>
<h1 id = "one"> Web Programming </h1>
</body>
</html>
Output
Universal Selectors:
The universal selector, denoted by an asterisk (*), applies its style to all elements in a
document.
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
*{
font-family: 'lucida calligraphy';
color: purple;
}
</style> </head>
<body>
<h1> Web Programming </h1>
<h2> Web Programming </h2>
<h3> Web Programming </h3>
<p> Web Programming </p>
</body>
</html>
Output
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
Pseudo Class Example
<!-- pseudo.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Checkboxes </title>
<style type = "text/css">
input:focus
{
font-family: 'lucida calligraphy';
color: red;
font-size:100;
}
input:hover
{
font-family: ‘Courier New';
color: violet;
font-size:40; }
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</p>
</form>
</body>
</html>
output
Input.hover input.focus
Properties
There are 60 different properties in 7 categories:
Fonts
Lists
Alignment of text
Margins
Colors
Backgrounds
Borders
Property Values
Keywords - left, small, …
Not case sensitive
Length - numbers, maybe with decimal points
Units:
px - pixels
in - inches
cm - centimeters
mm - millimeters
pt – points (1/72 of 1inch)
pc - picas (12 points)
No space is allowed between the number and the unit
specification e.g., 1.5 in is illegal!
Font Properties
font-family
The font-family property is used to specify a list of font names.
The browser uses the first font in the list that it supports.
For example, the property:
font-family: Arial, Helvetica, Futura
tells the browser to use Arial if it supports that font. If not, it will use Helvetica if it
supports it. If the browser supports neither Arial nor Helvetica, it will use Futura if it
can. If the browser does not support any of the specified fonts, it will use an
alternative of its choosing.
If a font name has more than one word, the whole name should be delimited by
single quotes, as in the following example: font-family: ‘Times New Roman’
A generic font can be specified as a font-family value.
The possible generic fonts and examples of each are
shown in below Table.
Each browser has a font defined for each of these
generic names.
Font Properties (continued)
font-size
Possible values: a length number or a name, such as Many relative font-size values are defined, including xx-small, x-
small, small, medium, large, x-large, and xx-large. In addition, smaller or larger can be specified.
font-variant:
The default value of the font-variant property is normal, which specifies the usual character font. This property can be set to
small-caps to specify small capital characters.
font-style
italic, oblique, normal
font-weight - degrees of boldness
bolder, lighter, bold, normal
Could specify as a multiple of 100 (100 – 900). Where 400 is same as normal & 700 is bold
font
For specifying a list of font properties
font: bolder 14pt Arial Helvetica
Order must be: style, weight, size, name(s)
The letter-spacing property controls the amount of space between characters in text. The possible values of
letter-spacing are any length property values—for example, 3px.
<html>
<head> <title>Font Properties</title>
<style type = "text/css">
p.one
{
font-family: 'lucida calligraphy';
font-weight:bold; font-size:75pt;
color: purple;
letter-spacing:3px;
}
h1.two
{
font-family: 'cambria';
color: violet;
font-style:italics;
}
p.three
{
font: small-caps italic bold 50pt 'times new roman'
}
</style>
</head>
<body>
<p class = "one">Xtensible MArkup Language</p>
<h1 class = "two">CascaDING Style Sheets</h1>
<p class = "three">Java Script</p>
List properties
Two presentation details of lists can be specified in XHTML documents: the shape of the
bullets that precede the items in an unordered list and the sequencing values that precede the
items in an ordered list. The list-style-type property is used to specify both of these.
list-style-type property
Unordered lists
Bullet can be a disc (default), a square, or a circle
Set it on either the <ul> or <li> tag
On <ul>, it applies to list items
<h3> Some Common Single-Engine Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
List properties (continued)
On <li>, list-style-type applies to just that item
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li style = "list-style-type: disc">
Cessna Skyhawk </li>
<li style = "list-style-type: square">
Beechcraft Bonanza </li>
<li style = "list-style-type: circle">
Piper Cherokee </li>
</ul>
List properties (continued)
Could use an image for the bullets in an unordered list
<html>
<head> <title>CSS Bullets-Image</title> <
style type = "text/css">
li.image {
list-style-image: url(bullet.png);
font-size:25pt;
</style> </head>
<body>
<h1>Different types of lists</h1>
<ul>
<li class = "image"> Unordered List</li>
<li class = "image"> Ordered list</li>
<li class = "image"> Definition List</li>
</ul>
</body> </html>
On ordered lists - list-style-type can be used to
change the sequence values
Property value Sequence type First four
Decimal Arabic numerals 1, 2, 3, 4
upper-alpha Uc letters A, B, C, D
lower-alpha Lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i, ii, iii, iv
Colors
Color is a problem for the Web for two reasons:
1. Monitors vary widely
2. Browsers vary widely
- There are three color collections
1. There is a set of 16 colors that are guaranteed to be displayable
by all graphical browsers on all color monitors
Colors (continued)
2. Most Web browsers now recognize 140 named colors, although these names are not part of a
W3C standard and prevent CSS validation.
3. There is a much larger set, the Web Palette
216 colors
These colors, which are often called Web-safe colors, are displayable by Windows- and
Macintosh-based browsers, but may not be correctly displayed with some old terminals
__________________________________________
The color property specifies the foreground color of elements
<style type = “text/css”>
th.red {color: red}
th.orange {color: orange}
</style>
…
<table border = "5">
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>
The background-color property specifies the background color of elements
ALIGNMENT OF TEXT
The text-indent property can be used to indent the first
line of a paragraph. This property takes either a length or a
percentage value.
The text-align property, for which the possible keyword
values are left, center, right, and justify, is used to
arrange text horizontally.
The float property is used to specify that text should flow
around some element, often an image or a table. The
possible values for float are left, right, and none, which is
the default.
<html>
<head> <title>Text Alignment</title>
<style type = "text/css">
h1.one
{text-align: center ;}
p.two
{text-indent: 0.5in; text-align: justify;} img{float:right}
</style> </head>
<body>
<h1 class = "one">Web Programming</h1>
<p> <img src = "kk.jpg" alt="error"/> </p>
<p class=“two”> The float property is used to specify that text should flow around some
element, often an image or a table. The possible values for float are left, right, and
none, which is the default. For example, suppose we want an image to be on the right
side of the display and have text flow around the left side of the image. To specify this
condition, the float property of the image is set to right. Because the default value for
text-align is left, text-align need not be set for the text.</p>
</body>
</html>
Output
BACKGROUND IMAGES
The background-image property is used to place an image in the background of
an element.
<html>
<head> <title>Background Image</title> <style type = "text/css">
body {
background-image:url(bg3.jpg);
}
p{
text-align: justify; color:white;font-size:25pt;
} </style> </head>
<body>
<p> Programming the Web </p>
</body>
</html>
Output
Text Decoration
The text-decoration property is used to specify some special features of
text. The available values are line-through, overline, underline, and none,
which is the default.
<html>
<head> <title>Text Decoration</title>
<style type = "text/css">
h1.one {
text-decoration: line-through;
}
h1.two {
text-decoration: overline;
}
h1.three {text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">Web Programming</h1> <p>[This is line-through]</p><br/>
<h1 class = "two"> Web Programming </h1> <p>[This is overline]</p><br/>
<h1 class = "three"> Web Programming </h1>
<p>[This is underline]</p><br/>
</body> </html>
Output
THE <span> AND <div> TAGS
In many situations, we want to apply special font properties to less than a
whole paragraph of text. The <span> tag is designed for just this purpose.
<html>
<head> <title>span</title>
<style type = "text/css">
.spanviolet {
font-size:25pt;font-family:'lucida calligraphy';color:violet;
}
</style> </head>
<body>
<p > If we want to apply special font properties to less than a whole paragraph of
text,we can use <span class = "spanviolet"> SPAN TAG </span> which does this
job</p>
</body>
</html>
Output
It is more convenient, however, to be able to apply a style to a section of
a document rather than to each paragraph.
This can be done with the <div> tag. Its primary use is to specify
presentation details for a section or division of a document.
<html>
<head> <title>div</title>
<style type = "text/css">
.one {
font-size:20pt;font-family:'lucida calligraphy';
color:violet;
}
.two {font-size:25pt;font-family:'comic sans ms'; color:green;
}
</style> </head>
<body>
<div class = "one">
<p>Paragragh 1 under division 1</p>
<p>Paragragh 2 under division 1</p> <p>Paragragh 3 under
division 1</p>
</div> <div class = "two">
<p>Paragragh 1 under division 2</p> <p>Paragragh 2 under
division 2</p> <p>Paragragh 3 under division 2</p>
</div>
</body>
</html>
Output
The Box Model
On a given web page or a document, all the elements can have
borders.
The borders have various styles, color and width.
The amount of space between the content of the element and its
border is known as padding.
The space between border and adjacent element is known as
margin.
Borders:
Border-style
It can be dotted, dashed, double
Border-top-style
Border-bottom-style
Border-left-style
Border-right-style
Border-width
It can be thin, medium, thick or any length value
Border-top-width
Border-bottom-width
Border-left-width
Border-right-width
Border-color
Border-top-color
The Box Model (continued)
Margins and Padding: The margin properties are named margin,
which applies to all four sides of an element:
margin-left
margin-right
margin-top
margin-bottom.
The padding properties are named padding, which applies to all
four sides:
padding-left
padding-right
padding-top
padding-bottom.
Conflict Resolution
When two or more rules apply to the same tag there are rules for
deciding which rule applies
Document level
In-line style sheets have precedence over document style sheets
Document style sheets have precedence over external style sheets
Within the same level there can be conflicts
A tag may be used twice as a selector
A tag may inherit a property and also be used as a selector
Style sheets can have different sources
The author of a document may specify styles
The user, through browser settings, may specify styles
Individual properties can be specified as important
p.special {font-style: italic !important; font-size: 14}
Precedence Rules
From highest to lowest
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent)
origin
Tie-Breakers
Specificity
1. id selectors
2. Class and pseudo-class selectors
3. Contextual selectors
4. General selectors
Position
Essentially, later has precedence over earlier
