Unit-III
Cascading Style Sheets
What is CSS
• Cascading Style Sheets
• Contains the rules for the presentation of HTML.
• CSS describes how HTML elements are to be displayed
+
HTML
=
+
=
CSS
=
Web Page
Before CSS
• Any modification in the design of websites was a very difficult and
boring task , as it evolves manually editing every HTML page.
Overview
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the
•
•
•
•
•
•
color of the text,
the style of fonts,
the spacing between paragraphs,
how columns are sized and laid out,
what background images or colors are used,
as well as a variety of other effects.
Why Use CSS? / Advantages of CSS
• CSS saves time - You can write CSS once and then reuse same sheet in multiple
HTML pages.
• Easy maintenance - To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
• Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.
Introduction to Cascading Style Sheet
(CSS)
• What is CSS?
oCSS stands for Cascading Style Sheets.
oStyles define how to display HTML elements.
oStyles were added to HTML 4.0 to solve a problem.
oExternal Style Sheets can save a lot of work.
oExternal Style Sheets are stored in CSS files.
• Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large web
sites, where fonts and color information were added to every single page, became a
long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• In HTML 4.0, all formatting could be removed from the HTML document, and stored
in a separate CSS file.
• All browsers support CSS today.
CSS Saves a Lot of Work!
• CSS defines HOW HTML elements are to be displayed.
• Styles are normally saved in external .css files. External style sheets
enable you to change the appearance and layout of all the pages in a
Web site, just by editing one single file!
CSS essentials
• CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p { color:red;
text-align:center;
}
CSS essentials
• CSS Comments
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
Insert CSS
• There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link
to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is
shown below:
hr {color: sienna;}
p {margin-left:10px;}
body {background-image: url("images/back40.gif");}
Do not add a space between the property value and the unit
(such as margin-left:20 px). The correct way is: margin-left:20px;
Internal Style Sheet
An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section of an HTML page, by using
the <style> tag, like this:
<head>
<style>
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style Sheet
Inline Styles
• An inline style loses many of the advantages of style sheets by mixing content
with presentation.
• To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p style="margin-left:40px; color:red;">This is a paragraph.</p>
Multiple Styles
If some properties have been set for the same selector in different style sheets, the values will be inherited from
the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt; }
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right; font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the
internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
• inside an HTML element
• inside the head section of an HTML page
• in an external CSS file
Even multiple external style sheets can be referenced inside a single HTML
document.
Cascading order
What style will be used when there is more than one style specified for
an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has the
highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag,
or in an external style sheet, or in a browser (a default value).
Note: If the link to the external style sheet is placed after the internal style
sheet in HTML <head>, the external style sheet will override the internal
style sheet!
Selectors
CSS Selectors
• Different types of selectors that CSS support are,
• Type Selector(HTML Element )
• Class Selector(.)
• ID Selector(#)
• Grouping Selectors(separate by , )
• Pseudo classes(:)
TYPE SELECTOR (HTML ELEMENT)
• Type Selectors are very simple.
• They correspond with any HTML element type.
• Example
<HEAD>
<style type="text/css">
b {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b>This is a customized headline style bold</b>
</BODY>
Class Selectors
• Allows you to define same style for the different elements
• A class selector is a name preceded by a period (.)
• The general syntax for a Class selector is:
.ClassSelector {Property:Value;}
example:
• <HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>
Combining class and type selectors
For two types of paragraphs in your document: one right-aligned paragraph,
and one centre-aligned paragraph:
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
Combining multiple classes
• Perhaps the most powerful aspect of class selectors is that multiple
classes can be applied to one HTML element. For examples,
• <p class="big indent"> sdsdsds </p>
.big { font-weight: bold; }
.indent { padding-left: 2em; }
Example
HTML code
<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="border box"></div>
CSS Code
.box { width: 100px; float: left; margin: 0 10px 10px 0; }
.red { color: red; background: pink; }
.blue { color: blue; background: light-blue; }
.green { color: green; background: light-green; }
.border { border: 5px solid black; }
ID selectors
• ID selectors are similar to class selectors. They can be used to
select any HTML element that has an ID attribute, regardless of
their position in the document tree.
• An ID selector is a name preceded by a hash character (#).
CSS
#firstname
{
background-color:yellow;
}
HTML
<p id="firstname">My name is
Donald.</p>
<p id="hometown">I live in
Duckburg.</p>
Should you use ID or class?
• Repeated use within a document
• Classes can be used as many times as needed within a document.
• IDs can only be applied once within a document.
• Combining class selectors
• You can use multiple classes to style an HTML element but
• you can only use one ID when styling an HTML element.
• For example,
• <p class="right color"> This paragraph will be right-aligned.
</p>
.right {text-align: right}
.color {color:green}
• IDs have higher specificity than classes
• If a class selector and ID selector were to be in conflict, the ID selector would
be chosen.
• <h3 class="color" id="color1"> This paragraph will be center-aligned.
</h3>
.color {color:green}
#color1 {color:red}
Grouping Selectors
• If multiple selector have same style then you can combine those
selector in one and each selector separate by comma (,).
• If you have elements with the same style definitions, like this:
h1 { text-align: center; color: red; }
h2 { text-align: center; color: red;}
p { text-align: center; color: red;}
• you can group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• In the example below we have grouped the selectors from the code
above:
Example
h1, h2, p {
text-align: center;
color: red;
}
Pseudo-Classes
• Pseudo Classes allow the designer the freedom to control how the element
should appear under different conditions.
• It represent dynamic events to customize those styles.
• A pseudo-class is used to change in state of an element.
• For example, it can be used to:
• Style an element when a user mouse over it
• Style visited and unvisited links differently
• A pseudo-class starts with a colon (:).
• No whitespace may appear between a type selector or universal selector and
the colon, nor can whitespace appear after the colon.
• Syntax
selector:pseudo-class {
property:value;
}
Pseudo Classes
• They include:
•
•
•
•
:link :- specifies unvisited hyperlinks
:visited :- specifies visited hyperlinks
:hover :- Applies properties on mouse over.
:focus :- Applies properties on focus (usually a form input field / if user has used
their keyboard to navigate to a link).
• :active:- specifies user currently clicking
• :first-child ,:last:-child:,:nth-child,nth-child(number),nth-last-child(number)
• For examples,
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
You can add class names and customize various links
a.linkColor:link { color: #FF0066; }
Pseudo Classes
• They include:
•
•
•
•
:link :- specifies unvisited hyperlinks
:visited :- specifies visited hyperlinks
:hover :- Applies properties on mouse over.
:focus :- Applies properties on focus (usually a form input field / if user has used
their keyboard to navigate to a link).
• :active:- specifies user currently clicking
• :first-child ,:last:-child:,:nth-child,nth-child(number),nth-last-child(number)
• For examples,
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
You can add class names and customize various links
a.linkColor:link { color: #FF0066; }
<head>
<style>
a:hover { color:#FF00FF; }
a.new:hover { color:red}
input.inp1:focus { background-color:yellow;}
</style> </head> <body>
<p><b><a href=“#" >This is a link</a></b></p>
<p><b><a href="#" class=“new”>This is a link</a></b></p>
<form>
User Name : <input type="text" class="inp1">
</form>
</body>
:first-child, :last-child
• The :first-child pseudo-class matches a specified element that is the first
child of another element and adds special style to that element that is the
first child of some other element.
• The :last-child pseudo-class matches a specified element that is the last
child of another element and adds special style to that element that is the
last child of some other element.
• :nth-child(x) selects every element that is the child number x of its parent
• :nth-last-child(x) selects every element that is the child number x of its
parent, counting from the last child.
<style>
p:first-child { background-color: #ff00ff; }
p:last-child { background-color: #00ff00; }
p:nth-child(odd) { background: red; }
p:nth-child(even) { background: blue; }
</style>
</head>
<body>
<h3>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</h3>
<h3>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</h3> </body>
::before Selector
• inserts something before the content of each selected element(s).
• Use the content property to specify the content to insert.
• p::before {
content: "Read this: ";
}
• Insert "Read this: " text before the content of each <p> element
Note: IE8 and Opera 4-6 only support the old, single-colon CSS2
syntax (:before). Newer versions support the standard, doublecolon CSS3 syntax (::before).
Note: For :before to work in IE8, a <!DOCTYPE> must be
declared.
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
::after Selector
• inserts something after the content of each selected element(s).
• Use the content property to specify the content to insert.
• p::after {
content: “ – Remember this: ";
}
• Insert “- Remember this: " text after the content of each <p> element
Note: IE8 and Opera 4-6 only support the old, single-colon CSS2
syntax (:after). Newer versions support the standard, double-colon
CSS3 syntax (::after).
Note: For :after to work in IE8, a <!DOCTYPE> must be declared.
p::after {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
CSS Links
Styling Links
• Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
• In addition, links can be styled differently depending on
what state they are in.
• The four links states are:
•
•
•
•
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
• a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
• When setting the style for several link states, there are some order
rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
Common Link Styles
• In the example above the link changes color depending on what state it is in.
• Lets go through some of the other common ways to style links:
• Text Decoration
• The text-decoration property is mostly used to remove underlines from links:
• Example
a:link {text-decoration:none;}
a:hover {text-decoration:underline;}
• Background Color
• The background-color property specifies the background color for links:
• Example
a:link {background-color:#B2FF99;}
a:hover {background-color:#FF704D;}
