Cascading Style Sheets: - Deepa Acharya

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">

</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>
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>
p{
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>
p.one {
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>
.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>
*{
color: purple;
}
</style> </head>
<body>
<h1> Web Programming </h1>
<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

<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Checkboxes </title>
input:focus
{
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>
p.one
{
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>
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>
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>
.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>
.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

Cascading Style Sheets: - Deepa Acharya

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets: - Deepa Acharya

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

 However, these presentation specifications can be more precisely and more

 A style sheet is a syntactic mechanism for specifying style information.

 The CSS1 specification was developed in 1996.

 CSSs provide the means to control and change presentation of HTML

 CSS is not technically HTML, but can be embedded in HTML documents

 Style is specified for a tag by the values of its properties

 XHTML style sheets are called cascading style sheets

 Lower level style sheets can override higher level style

 Inline style sheets appear in the tag itself

If no style sheet information is specified,

<link rel = "stylesheet" type = "text/css"

 The @import directive is an alternative way to use style

 Format depends on the level of the style sheet

 Style sheet appears as a list of rules that are the

EXAMPLE WHICH USES

 For example, the rule form em {font-size: 14pt;}

 This is a contextual selector (sometimes called a descendant selector).

 Used to allow different occurrences of the same tag to use

• A generic class can be defined if you want a style to

 An id selector allow the application of a style to one

 Pseudo classes are styles that apply when something

font-family: ‘Courier New';

 There are 60 different properties in 7 categories:

 Keywords - left, small, …

 The font-family property is used to specify a list of font names.

 For example, the property:

font-family: Arial, Helvetica, Futura

 font-weight - degrees of boldness

 On <li>, list-style-type applies to just that item

 Could use an image for the bullets in an unordered list

<head> <title>CSS Bullets-Image</title> <

style type = "text/css">

<h1>Different types of lists</h1>

<li class = "image"> Unordered List</li>

<li class = "image"> Ordered list</li>

<li class = "image"> Definition List</li>

Property value Sequence type First four

 Color is a problem for the Web for two reasons:

3. There is a much larger set, the Web Palette

 The text-indent property can be used to indent the first

 The text-align property, for which the possible keyword

 The float property is used to specify that text should flow

 Margins and Padding: The margin properties are named margin,

 The padding properties are named padding, which applies to all

 From highest to lowest

You might also like