WT 2

Cascading Style Sheets
CSS
1
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files. with extension .css
• A simple mechanism for controlling the style of a Web document
without compromising its structure.
• It allows you to separate visual design elements (layout, fonts, colors,

margins, and so on) from the contents of a Web page.
• Allows for faster downloads, streamlined site maintenance, and global

control of design attributes across multiple pages.
2
CSS vs. just HTML
• What can we do with CSS that we can’t do
with HTML?
– Control of backgrounds.
– Set font size to the exact height you want.
– Highlight words, entire paragraphs, headings
or even individual letters with background
colors.
– Overlap words and make logo-type headers
without making images.
– Precise positioning.
– Linked style sheets to control the look of a
whole website from one single location.
– And more.
3
CSS Syntax
4
• A CSS rule-set consists of a selector and a
declaration block:
• The selector points to the HTML element you want to
style.
• The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name and
a value, separated by a colon.
• Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded
by curly braces.
5
style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value
6
How to write CSS?
• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)
7
The CSS element Selector
• The element selector selects HTML
elements based on the element name.
• Example
• Here, all <p> elements on the page will
be center-aligned, with a red text color:
• p{
text-align: center;
color: red;
}
8
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is unique within a page, so the id selector is used
to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• Example
• The CSS rule below will be applied to the HTML element with
id="para1":
#para1 {
text-align: center;
color: red;
}
9
Simple Program
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p{
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>
• <p>Every paragraph will be affected by the style.</p>

• <p id="para1">Me too!</p>
• <p>And me!</p>
• </body>
• </html>
10
Output
Every paragraph will be affected by the
style.
Me too!
And me!
11
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #para1 {
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>
• <p id="para1">Hello World!</p>

• <p>
• This paragraph is not affected by the style.</p>
• </body>
• </html>
12
Hello World!
This paragraph is not affected by the
style.
13
How to write CSS:
• The basic syntax of a CSS rule:

selector {property 1: value 1; property 2: value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before each value!
14
CSS Comments
• Comments are used to explain the code, and may help when you edit
the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the <style> element, and starts with /*
and ends with */:
• Example
• /* This is a single-line comment */
p{
color: red;
}
15
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• /* This is a single-line comment */
• p{
• color: red;
• }
• </style>
• </head>
• <body>
• <p>Hello World!</p>
• <p>This paragraph is styled with CSS.</p>
• <p>CSS comments are not shown in the output.</p>
• </body>
• </html>
16
OUTPUT
Hello World!
This paragraph is styled with CSS.
CSS comments are not shown in the
output.
17
<!DOCTYPE html>
<html>
<head>
<style>
/* This is
a multi-line
comment */
p{
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
18
Three ways to include CSS:
1. Local (Inline)
2. Global (Embedded, or Internal)
3. Linked (External)
19
1. Local
• Inline style sheet.
• Placed inside tags.
• Specific to a single instance of an html
tag on a page.
• Must be used instead of <font> tags to
specify font size, color, and typeface
and to define margins, etc.
• Use to override an external or
embedded style specification.
20
Local (inline)
• Example
<p style="font-size: 10pt; color: red; font-weight:
bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>
On the browser:
21
2. Global
• Embedded or internal style sheet
• Applicable to an entire document
• Styles are defined within the <style>
</style> tag, which is placed in the
header of the html file (i.e., within
<head> and </head>).
22
Global (Internal)
• Example:
<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
23
3. Linked
• External style sheet
• Styles are saved in a separate file, with
the extension .css
• This single stylesheet can be used to
define the look of multiple pages.
24
Linked (External)
• Example
Save this text
In TextPad,Notepad, etc.…
file as
p {font-family: verdana, sans- whatever.css
serif; font-size: 12pt; color: red}
h1 {font-family: serif; font-size:

14pt; color: green}
h2 {font-family: serif; font-size:

11pt; color: blue}
25
Linked (External)
• Example (continued)
To apply the stylesheet “whatever.css“ to

an HTML document, call it in from the
header:
<head>
<link rel="stylesheet"
href=“whatever.css" type="text/css">
</head>
26
Cascading
The way styles will be used when there is more than one
style specified for an HTML element:
1. Browser default
2. External Style Sheet (Linked) (in an external .css file)
3. Internal Style Sheet (Global, or embedded) (inside the <head>
tag)
4. Inline Style (Local) (inside HTML element)
• An inline style (inside an HTML element) has the highest

priority, which means that it will override every style declared
inside the <head> tag, in an external style sheet, and in the
browser (default value).
27
Let’s try this now!
<h1 style=“text-align: center; font-

weight:bold; color: blue”> Styling with CSS!
</h1>
<p style="font-size: 10pt; color: red; font-

weight: bold; font-family: Arial, Helvetica,
sans-serif“ >
Write whatever you want here </p>
28
CSS [attribute] Selector
• The [attribute] selector is used to select
elements with a specified attribute.
• The following example selects all <a>
elements with a target attribute:
• Example
• a[target] {
background-color: yellow;
}
29
Attribute selector
Program Output
30
CSS [attribute="value"]
Selector
31
CSS [attribute~="value"]
Selector
• The [attribute~="value"] selector is used
to select elements with an attribute value containing a
specified word.
• The following example selects all elements with a title attribute
that contains a space-separated list of words, one of which is
"flower":
• Example
• [title~="flower"] {
border: 5px solid yellow;
}
• The example above will match elements with title="flower",
title="summer flower", and title="flower new", but not title="my-
flower" or title="flowers".
32
Simple program
Program OUTPUT
33
Pseudo-classes
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {
property: value;
}
34
35
CSS Pseudo-elements
• A CSS pseudo-element is used to style specified parts of an element.
• For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element
• Syntax
• The syntax of pseudo-elements:
• selector::pseudo-element {
property: value;
}
36
Simple program
37
Grouping properties
• Separate properties with a semi-colon
– Example:
p {text-align:center;color:red; font-
family:Arial; font-style:italic}
38
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a
paragraph tag will be red)
39
The class Selector
• With a class selector you can define different
styles for the same type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-
aligned, italic, and red. </p>
<p class=“blue"> This paragraph will be center-
aligned and blue. </p>
40
The class Selector
• You can also omit the tag name in the
selector to define a style that will be used by
all HTML elements that have this class.
• Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem" will be

center-aligned and italic.
41
The class Selector
• Example (continued)
Both elements below will follow the
rules in the ".poem“ class:
<h1 class=“poem"> This heading will be

center-aligned and italic </h1>
<p class=“poem"> This paragraph will also

be center-aligned and italic. </p>
42
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>
The tags and classes can then be used in combination:
<h1 class=“boldred">This is rendered as 30-point red serif bold

text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif
bold text.</p>
43
Applying styles to portions of
a document:
• <div>
– A division tag: to “package” a block of
document into one unit. It defines a block
element.
– Causes a line break, like <br> and <p>.
• <span>
– “Wraps” a portion of text into a unit, but
doesn't cause a line break. Allows styles to
be applied to an 'elemental' region (such
as a portion of a paragraph).
44
Example
<p><span class="foo">This text is rendered

as foo-style</span> and this is not. </p>
<div class="foo">
<p>The "foo" style will be applied to this text,
and to <a href="page.html">this text</a> as
well.
</div>
45
Inheritance: which style prevails
when several are present?
• Inline (local) overrides internal (global)
• Internal (global) overrides external (linked).
46
Inheritan
ce
Inheritance is a process of
receiving values of properties by a
child element from its parent
element.
This is a simple example of
inheritance:
Source code of CSS-
h1 {
color: maroon;
}
In the external css file, we have set
color for H1 element as maroon.
Now look at the html source code,
we have an i element, located
within H1 element, to make the
word inheritance italic. Because of
inheritance, word inheritance has
also become maroon since it is a
child element of H1.
47

WT 2

Uploaded by

Copyright:

Available Formats

WT 2

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

WT 2

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

• It allows you to separate visual design elements (layout, fonts, colors,

• Allows for faster downloads, streamlined site maintenance, and global

• <p>Every paragraph will be affected by the style.</p>

• <p id="para1">Hello World!</p>

• The basic syntax of a CSS rule:

h1 {font-family: serif; font-size:

h2 {font-family: serif; font-size:

To apply the stylesheet “whatever.css“ to

• An inline style (inside an HTML element) has the highest

<h1 style=“text-align: center; font-

<p style="font-size: 10pt; color: red; font-

Any HTML element with class=“poem" will be

<h1 class=“poem"> This heading will be

<p class=“poem"> This paragraph will also

The tags and classes can then be used in combination:

<h1 class=“boldred">This is rendered as 30-point red serif bold

<p><span class="foo">This text is rendered

You might also like