Cascading Style Sheet

Cascading Style Sheets
Cascading Style
Sheets
• Allow the specification of the style of the
page separately from the structure and
content
– spacing, margins, fonts
– the look and feel
• styles definehow to display HTML elements
• styles are stored inStyle Sheets
• multiple style definitions will cascade into
one
• Allows better management
• Makes changing style easier
Cascading Style
Sheets
• Cascading Style Sheet is a simple, declarative
language that allows authors and users to apply
stylistic information to structured documents written
in HTML or XML.
• World Wide Web Consortium (W3C):
– CSS1 (1996);
– CSS2 (1998);
– CSS3 (2001)
– CSS4(2007)
• Netscape and Microsoft Corporations;
• Internet Explorer (IE) and Netscape Navigator (NN)
supports styles.
Advantages and
Disadvantages
• Advantages:
– Greater typography and page layout controls
– Easier site maintenance
– The style sheet information can be stored
separate from your HTML document, and shared
among many HTML files. Change one style sheet
file, and the appearance of the entire site is
updated.
• Disadvantages
– Browser compatibility must be the most common
difficulty.
Why?
• to save a lot of work and our time;
• easier to handle and edit web
documents;
• easier to control content and layout of
the multiple web sites.
The order of the cascading
• External Style Sheet
• Internal Style Sheet
• Inline Style
Inline Style
• is used inside the HTML tags:
• Each CSSproperty is followed by a colon then the value of the
attribute
• Properties are separated by semicolons
• The STYLEattribute allows the specification of a style property
<p style="color: green"> First Paragraph </p>
Example :
<HTML><BODY>
<P>Some Text - just plain</P>
<P STYLE=“font-size: 20pt”>Some more text</P>

<P STYLE=“font-size: 20pt; color: #0000FF”>And even more
text</P>
</BODY></HTML>
Internal Style Sheet
• is inside of the HTML tag <HEAD>
<head>
<style type="text/css">
h1 {color: maroon}
p {margin-left: 2cm}
body {background-image: url(”examples/
saule.gif")}
</style>
</head>
Example:
• <HEAD>
• <TITLE>Style Sheets</TITLE>
• 
• <STYLE TYPE = "text/css">
• EM { background-color: #8000FF;
• color: white }
• H1 { font-family: Arial, sans-serif }
• P { font-size: 18pt }
• .blue { color: blue }
• </STYLE>
• </HEAD>
• <BODY>
• 
• <H1 CLASS = "blue">A Heading</H1>
• <P>Here is some text.</P>
• </BODY>
• </HTML>
External Style Sheet
• is the additional web page saved in format
.css;
• each document must have a link to the file
saved as .css:
<head><link rel="stylesheet" type="text/css” a
ref=”first.css"></head>
• allow you to control and change layout of the

whole document by the editing one single
page!
External Style Sheet
import style
• Into HTML file • Into another style sheet
• <head> (sectionstyles.css)
• ... - @import instruction must
be first
• <style type=“text/css”> line of file!
• 
• </style> • /*sectionstyles start here*/
• </head>
• h1 {
• font-size: 200%;
• color: #6b84b5
• }
Structure of the Style
• selector {property: value}
– selector is an element which we are defining;
– property is an attribute;
– value specifies how a selector should be displayed.
• {property: value} is a definition of the selector.
• the property and value are separated by
a colon and surrounded by curly braces;
• if the value consists from multiple words, it should be with
quotes around it:
body {color: black}
• if there are more than one property, each property should be
separated with a semi-colon: p {text-align: center; color: maroon}.
Class Attribute
defines different styles for the same element:
p. center {text-align: center}
in HTML document:
<p class=“center”>Paragraph</p>
.center {text-align: center}

means:
<h1 class="center">Heading is centered</h1>
<p class="center">Paragraph is centered</p>
Class Attribute
• CSS:
– …
– .blue {color: #082984}
– .red {color: #de2131}
• HTML
– …
– <h1 class=“red”>Headline</h1>
– <p class=“red”>a summary</p>
– <p class=“blue”>some text</p>
– …
Class Attribute
• Used when an HTML element can display more than one
behaviour (e.g. hyperlinks)
• CSS:
a:link {color: #000}

a:visited {color: #000}
a:hover {color: #69f}
a:active {color: #000}
• HTML
<a href=“nextpage.html”>Next page</a>

ID Attribute
there can be only one element with a
given id in a document:
• to match all elements with a id:

–#intro {font-weight:bold; color: #0000ff}
• only elements with id="intro":
–p#intro {font- weight:bold; color:#0000ff;}
ID Attribute
• CSS
…
#red_heading {color: red}
#summary {color: red}
p#conclusion {color: blue}
• HTML
…
<h1 id=“red_heading”>Headline</h1>
<p id=“summary”>Summary</p>
<p id=“conclusion”>Conclusion</p>
…
Grouping
you can group selectors:
h1, h2, h3 {color: maroon}
h4 {color: green}
Note:
each selector has been separated with a
comma.
The Golden Rules for Styles
• Element Names are always case-insensitive.
HTML
• Attribute Names are always case-insensitive.
HTML
• Attribute Values are generally case-insensitive.
HTML
• CLASS Names are case-sensitive. HTML /
CSS Style
• ID Names are case-sensitive. HTML / CSS
Style
Comments
are used for the explaining the code.
It can help to edit the code later:
/* Comment */
p {text-align: center; font-family: arial}

Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet

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 Sheet

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

<P STYLE=“font-size: 20pt”>Some more text</P>

• allow you to control and change layout of the

.center {text-align: center}

a:link {color: #000}

<a href=“nextpage.html”>Next page</a>

• to match all elements with a id:

You might also like