Web topic 14 cascading style sheets

Web Authoring

Topic 14 –
Cascading Style Sheets

Objectives
Students should able to:
1 Explain Cascading Style Sheets.
2 Identify the basic syntax and use
Cascading Style Sheets.
ATTRIBUTE NAME and VALUE pair(s)
<STYLE> Tag
<LINK> Tag
<LINK REL >
3 Use Cascading Style Sheets to
create two or more HTML pages

Cascading Style Sheet
Gives complete control over the layout of
the Web page and the appearance of its
content.

You only need to specify presentational
preferences once, and the style can be
applied to an entire site.

Advantages of CSS
The presentation of an entire website can be
updated at a moment’s notice - standardising
the look and feel of a website.
Users of a website can compose style sheets
of their own.
Browsers are beginning to support multiple
style sheets.

Advantages of CSS
Style sheets allow content to be optimized for
more than one type of device.
Style sheets download much more quickly
because web documents using CSS take up
less hard disk space and consume less
bandwidth.

CSS Rules
A style sheet can be broken down into
progressively smaller bits. From large to
small, it goes like this:
• Style sheet
• Rule
• Selector
• Declaration
• Property
• Value

CSS Rules
Rule:-begins with a selector, followed by a
left curly brace, “{“ and ends with a right
curly brace “}”.
body {
margin: 0;
padding: 0;
background: #000
url(‘images/backgrounds/earth.jpg) no-
repeat fixed;
font: 12 px sans-serif;
}

CSS Rules
Selectors:- is the HTML element or elements to
which a CSS rule is applied (what to format).
body {
margin: 0;
padding: 0;
background: #000
repeat fixed;
}

CSS Rules
Declarations:- is the combination of a CSS
property and value.
body {
margin: 0;
padding: 0;
background: #000
repeat fixed;
}

CSS Rules
Declarations:- is the combination of a CSS
property and value.

The property appears before the colon,
and the colon is used to separate the
property from the value.

CSS Rules
Values:- keyword value is used to invoke a
predefined function.
body {
margin: 0;
padding: 0;
background: #000
repeat fixed;
}

CSS Rules
predefined function. Cont’d
a{
text-decoration: none;
color: lightblue;
}

CSS Rules
predefined function. Cont’d
The keywords are no-repeat, fixed and light
blue.
No-repeat and fixed provide the browser
with instructions for how to render the
background image.
Light blue is a keyword that tells the
browser what color the text of hyperlinks
should be.

Basic Syntax of CSS
A CSS rule consists of two main parts:
selecter ('H1') and declaration ('color:
blue').

Cascading Style Sheet
Two ways to specify cascading style rules.

1. Within the HTML document –
use <STYLE> tag

2. Via an external style sheet document -
use <LINK> tag

Using <style> Tag
The <STYLE> tag is always inside the
header of the document, i.e. between the
<HEAD> Start and End Tags.

<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>

Using <link> Tag
The <LINK> tag is used to access an
External Style Sheet that is contained in
another document. The Attributes REL
and TYPE are required.

<LINK> tag should be placed in the
HEAD section of the document. <STYLE>
tag is not required in external style sheet.

Using <link> Tag
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="styles.css"
type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific
composer.
</BODY>
</HTML>
In styles.css document
H1 { color: blue }

Using <link> Tag
<LINK rel="stylesheet" href="styles.css"
type="text/css">

Specifies the relationship between the
current document and the linked
document
Referenced to the external file called
styles.css

CSS File
An example of a CSS file – mystyle.css
body
{
background:brown
}
h1
{
color:blue;
font-size:x-large
}

Web topic 14 cascading style sheets

More Related Content

What's hot

Viewers also liked

Similar to Web topic 14 cascading style sheets

More from CK Yang

Recently uploaded

Web topic 14 cascading style sheets