Cascading Style Sheets

CSS
Cascading Style Sheets

Objectives
• Using Inline Styles

• Working with Selectors
• Using Embedded Styles
• Using an External Style Sheet
• Applying a Style to a Web Site
• Understanding Cascading Order
http://www.w3schools.com/css/
Great tutorial – Go look

Style Sheets
• In HTML, want the content of the
documents clearly separated from the
document's presentation layout.
• Styles sheets define how HTML elements
are to be displayed
Cascading Style Sheets (CSS)
• Like HTML, style sheets must use a
common language and follow common
rules. This language is known as
Cascading Style Sheets, CSS.
• CSS has been developed by the WWW
Consortium (www.w3c.org organization
that develops standards for HTML).
• CSS is designed to augment (not replace)
HTML.
Styles
• Styles can be specified
– inside a single HTML element (Inline)
– inside the <head> element of an HTML
page (Internal)
– or in an external CSS file. (External)
Inline Style (in body)
• An inline style loses many of the
advantages of style sheets by mixing
content with presentation. Use this
method sparingly. Inline styles are
easy to use and interpret because
they are applied directly to the
elements they affect.
Inline Style
• To use an inline style you use the style
attribute in the relevant tag. The style
attribute can contain any CSS property.
<element style=“property1:
value1; property2:value2; …>
Inline Style
• Enclose the properties and values in
quotes.
• Separate properties with a semicolon.
<p style="color: red; margin-left: 20px ">

paragraph </p>
Inline Style
<body>
<h3 style=“font-family:Arial,
font-style:italic; color:green”>
This is H3, Arial, italic and green
</h3>
<h3>This is simply H3</h3>
</body>
This is H3, Arial, italic and green

This is simply H3
Syntax
• The CSS syntax for internal and external
styles is made up of three parts:
selector {property: value}
• The selector is normally the HTML
element/tag you wish to define, the
property is the attribute you wish to
change, and each property takes a value.
Syntax
• The property and value are separated by a
colon and surrounded by curly braces:
body {color: black}
• If the value is multiple words, put quotes
around the value.
• Separate properties with a semi-colon.
p {font-family: “sans serif”; color: red}
Background
• Background colors can be applied to
almost any element in a Web page not just
the page itself.
H1 {background-color: rgb(204,102,255)}
This is an H1 header with a purple background

Background
• background-image : url(file.jpg)
• examples\css\style-background.html
• http://www.w3schools.com/css/css_backgr
ound.asp
Comment
• /* This is a CSS comment. */
• Same as JavaScript multi-line comment.

Grouping
• Separate selectors with a comma:
• h1,h2,h3,h4,h5,h6 { color: green }
• All header elements will be green.
TopStyle
• Software that generates correct syntax.
• It’s on the machines in the lab.
• It can be downloaded for free.
• Go see it.
Internal (Embedded) Style Sheet
• Applies to a single document (HTML file)
• Internal styles are embedded in the head
section :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
</style>
</head>
Internal (Embedded, Global)
Style Sheet
<head>
<style>
h3 {font-family:Arial; font-style:italic;
color:green}
</style>
</head>
<body>
<h3>This is H3, Arial, italic and green</h3>
<h3>And so is this H3</h3>
</body> This is H3, Arial, italic and green
And so is this
External Style Sheet
• An external style sheet is a text file that
contains style declarations
• It can be linked to any page in the site,
allowing the same style declaration to be
applied to the entire site
• An external style sheet can be written in
any text editor. The file should not contain
any html tags. It should be saved with a
.css extension.
• Example:
hr {color: sienna}
p {margin-left: 20px}
• Notes:
– No spaces between the property value and
the units: 20px
– This is the entire file. Within a style sheet, you
don’t need <style> tags, just the style
declarations.
• An external style sheet can control the
appearance of many web pages.
• Each page must link to the style sheet using the
<link> tag inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href=“site_style.css" />
</head>
• See style_sheets.html
External Style Sheets
• External style sheets enable you to
change the appearance and layout of all
the pages in your site by editing just one
single CSS document.
• They give a consistent look to the entire
site.
• Multiple external style sheets may be
referenced inside a single HTML
document.
External style sheet
● Create a text file containing the style declarations.

– File should have extension “.css” such as: mystyle.css
● Link, or import that file to the HTML file using special
tags in the header.
<link href=“URL” rel=“stylesheet” type=“text/css”>
mystyle.css
OR @import or multiple LINK
tags allow you to use
<style> more than one style sheet
@import url(“mystyle.css”) in the same document
</style>
Cascading Order
• If a property has been set for the same
selector in different style sheets, the value
will be inherited from the more specific
(innermost) style sheet.
• (next slide)
Cascading Order
• We 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 (.css file)
3. Internal style sheet (inside the <head>)
4. Inline style (inside an HTML element)
Style Inheritance
• If a style is not specified for an
element, it inherits the style of its
parent element; This is called style
inheritance.
CSS
• http://www.w3schools.com/css/css_border
.asp
• http://www.w3schools.com/css/css_text.as
p
• http://www.w3schools.com/css/css_text.as
p
The id Selector
• The style rule below will match any
element that has an id attribute with a
value of "green":
#green {color: green}
<h1 id="green">Some text</h1>

The id Selector
• The style rule below will match any p
element that has an id attribute with a
value of "green":
p#green {color: green}
The class Selector
• HTML and XHTML require each id be
unique– therefore an id value can only be
used once in a document
• You can mark a group of elements with a
common identifier using the class attribute
<element class=“class”> … </element>

The class Selector
• Omit the tag name in the selector to define
a style that will be used by all elements
that have that class:
.center {text-align: center}
• Both h1 and p have class="center".
<h1 class="center"> center-aligned </h1>
<p class="center"> also center-aligned. </p>
The class selector
● Define a class (in the header) by
– giving it a name preceded by a period
– adding the standard style definitions inside {}
<style type=“txt/css”>
.bright {font-weight:bold; color:red}
</style>
● Apply the class to any HTML tag
<strong class=“bright”> text </strong>
<h1 class=“bright”> text </h1>
The class Selector
• With the class selector you can define
different styles for the same type of HTML
element:
p.right {text-align: right}
p.center {text-align: center}
The class Selector
• 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>
Hyperlink pseudo-class
• a: link {style for never visited links}
• a: visited {style for visited links}
• a: active {style for link that is currently being
clicked}
• a: hover {style when the mouse cursor is
hovering over the link} – rollover effect.
a:hover {color=red; text-transform:uppercase;
font-weight=bold}
• examples/css/link_rollover.html
The <div> tag
• The <div> tag defines a division/section
in a document.
• <div> is an HTML tag (not CSS)
• It does not format content
• Browsers usually place a line break
before and after the div element
The <div> tag
• It is like a generic block level tag
• Use the <div> tag to group block
elements.
• You can assign a CLASS (or ID or
STYLE or ONCLICK or
ONMOUSEOVER etc).
<div>
This is some text
<div style="color:#FF0000;">
<h4>This is a header in a div section</h4>
<p>This is a paragraph in a div section</p>
</div>
This is some text
This is a header in a div section
This is a paragraph in a div section

The <span> tag
• The <span> tag is used to mark (or group)
inline elements like letters, words or
phrases.
The <span> tag
<p> text1 <span style="color:#0000FF;">
text2</span> text3
</p>
<p><span
style="color:#00DD45;">4</span>
</p>
output????
The <span> tag
<p> text1 <span style="color:#0000FF;">

text2</span> text3</p>
<p style="color:#00DD45;">4</p>
text1 text2 text3

4
styles.html

Cascading Style Sheets

Uploaded by

Copyright:

Available Formats

You might also like

Cascading Style Sheets

Uploaded by

Document Information

Original Description:

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

Uploaded by

Copyright:

Available Formats

CSS

Cascading Style Sheets

• Using Inline Styles

Great tutorial – Go look

<p style="color: red; margin-left: 20px ">

This is H3, Arial, italic and green

This is an H1 header with a purple background

• Same as JavaScript multi-line comment.

● Create a text file containing the style declarations.

<h1 id="green">Some text</h1>

<element class=“class”> … </element>

• Use the class attribute in your HTML

This is a paragraph in a div section

<p> text1 <span style="color:#0000FF;">

text1 text2 text3

You might also like