Web-Engineering: CSS - Cascading Style Sheet

Web-Engineering
CSS – Cascading Style Sheet

CSS - Introduction
 Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation semantics ( look
and formatting) of a document written in a markup
language.
 Its most common application is to style WebPages
written in HTML and XHTML, but the language can also
be applied to any kind of XML document.
 CSS is used to control the style and layout of multiple

Web pages all at once.
 Styles were added to HTML 4.0
 Save a lot of work with CSS!
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 Syntax and CSS Types
 A CSS rule has two main parts:
1. a selector
2. one or more declarations
 A CSS declaration always ends with a semicolon and declaration
groups are surrounded by curly brackets.
 When a browser reads a style sheet, it formats the

document according to the instruction in the style sheet.
 There are three types of style sheets
 Inline Style Sheet
 Internal Style Sheet
 External Style Sheet
Type of CSS – Inline Style Sheet
 An inline style sheet should be used when a unique style
to be applied to a single occurrence of an element.
 To use the inline style sheet, you use the style attribute
in the relevant tag.
 The style attribute can contain any CSS property.
 <html>
 <body>
 <p style = "color:red">
 This text is in red color
 </p>
 </body>
 </html>
 Out put of Code
Type of CSS – Internal Style Sheet
 Following example demonstrates how to format an HTML
document with an inline style information added to the
<head> section.
 <html>
 <head>
 <style type=“text/css”>
 h1 { color: red}
 h3 { color: blue}
 </style>
 </head>
 <body>
 <h1> This is header 1 </h1>
 <h3> This is header 3</h3>
 </body>
 </html>
 Note:- Every time you use the h1 or h3 tag the color attribute will also be applied to the
text of h1 or h3 tag, on the same web page.
Type of CSS – Internal Style Sheet ….
<html>
<head>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h2>This header is blue</h2>
<h1>This header is 36 pt</h1>
<h2>Again This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
Type of CSS – External Style Sheet
 External style sheet is ideal when the same style is applied
to manage pages.
 With an external style sheet you can change the
appearance and layout of all the pages in a Web site, just
by editing one single file.
 Each web 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>
Note: Multiple external style sheets can be referenced inside a

single HTML document.
External Style Sheet - Example
 Consider the code and output of previous
example of Internal CSS.
 Create and external CSS File, using any text

editor like notepad.
 Write the code below
<style>
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
Save the code with name “mystyle.css”

External Style Sheet – Example Cont…
 Create a HTML file using the editor and access the
external .css file using <link> tag.
<html>
<head>
<link rel="stylesheet" type="text/css“ href="mystyle.css">
</head>
<body>
<h2>This header is blue</h2>
<h1>This header is 36 pt</h1>
<h2>Again This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
Using Multiple Style Sheet
 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!
CSS - id and class Selectors
 In addition to setting a style to HTML element, CSS allows you
to specify your own selector called “id” and “class”.
 The id selector
 is used to specify a style for a single, unique element.
 uses the id attribute of the HTML element, and is defined with a "#".
 The style rule below will be applied to the element with id=“se5":
<html> <head>
<style>
#se5
{ text-align:center;
color:red;
}
</style>
</head> <body>
<p id="se5">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
<h1 id="se5"> This is h1 using the same id </h1>
</body> </html>
CSS - class Selectors
 The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on several
elements.
 This allows you to set a particular style for many HTML elements with
the same class.
 The class selector uses the HTML class attribute, and is defined with a
"."
 In the example below, all HTML elements with class="center" will be
center-aligned:
CSS - class Selectors Example 1
 <html>
 <head>
 <style>
 .center
 { text-align:center; }
 </style>
 </head>
 <body>
 <h1 class="center">Center-aligned heading</h1>
 <p class="center">Center-aligned paragraph.</p>
 </body>
 </html>
 Output of Code
CSS - class Selectors Example 2
 You can also specify that only specific HTML elements
should be affected by a class.
<html>
<head>
<style>
p.center
{ text-align:center; }
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>

Web-Engineering: CSS - Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Web-Engineering: CSS - Cascading Style Sheet

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

Web-Engineering: CSS - Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Web-Engineering

CSS – Cascading Style Sheet

 CSS is used to control the style and layout of multiple

 When a browser reads a style sheet, it formats the

 <h1> This is header 1 </h1>

 <h3> This is header 3</h3>

Note: Multiple external style sheets can be referenced inside a

 Create and external CSS File, using any text

Save the code with name “mystyle.css”

 So, an inline style (inside an HTML element) has the highest

You might also like