Cascading style sheets (CSS)

 Objective
 Introduction to CSS
 What is CSS?
 CSS Syntax
 Types of CSS
 External Style Sheet
 Internal Style Sheet
 Inline Style
 Cascade order
 Advantages of CSS
 Conclusion

 “What is CSS?”
 Structure of CSS
 How to use CSS in your web page

• CSS(Cascading Style Sheet) was developed by Hakon
Wium Lie in 1996.
• HTML was originally designed as a simple way of
presenting information intended for sharing scientific
documents and research papers online.
• To improve web presentation capabilities CSS was
introduced by W3C (World Wide Web Consortium). It
was intended to allow web designers to define the look and
feel of their web pages, and to separate content from
document’s layout.

• CSS stands for “Cascading Style Sheets.”
• Cascading: refers to the procedure that determine which style
will apply to a certain section, if you have more than one style
rule.
• Style: how you want a certain part of your page to look. You
can set things like color, margins, font etc for things like tables,
paragraphs and headings.
• Sheets: the “sheets” are like templates, or a set of rules, for
determine how the web page will look.
So, CSS(all together) is a styling language-is set of rules to
tell browsers how your web page should look.

• The selector points to the HTML element you want to style.
• The declaration block contain one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by colon.
•A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.

There are three types of cascading style sheets:
1. External style sheet
2. Internal style sheet
3. Inline style

• Ideal when applied to many pages.
• Syntax:
<head>
<link rel=“stylesheet” type=“text/css”
href=“mystyle.css”/>
</head>
•An external style sheet can be written in any text editor.
• Your style sheet should be saved with a .css extension.
• Eg.
hr{ color : blue; }
p{ margin-left : 20px; }
body{ background-image : url(“images/back40.gif”); }

• It should be used when a single document has a unique style.
• You can define internal styles in the head section of an HTML
page, by using the <style> tag, like this-
• E.g.
<head>
<style type=“text/css”>
hr{ color : blue; }
p{ margin-left : 20px; }
body{ background-image : url(“images/back40.gif”); }
</style>
</head>

•An Inline style loses many of the advantages of style
sheet.
• To use inline styles, add the style attribute to the relevant
tag.
• The style attribute can contain any css property.
• E.g.
<h1 style=“color : blue; margin-left:20px;”>This is a
heading</h1>

• What style will be used when there is more than one style
specified for an HTML element?
•All the style will “Cascade” into a new “virtual” style sheet
by the following rules, where number one has the highest
priority:
 Inline style(inside an HTML element)
 External and Internal style sheets(in the head
section)

•Allows separating content of an HTML document from the style
and layout of that document.
• Make documents much easier to maintain and give much better
control over the layout of your web pages.
• CSS saves lots of time
• Easy maintenance
• Pages load faster
• Superior styles to HTML
• Multiple device compatibility

In this presentation we’ve learned
that how to create style sheets to
control the style and layout of
multiple web sites at once.

Submitted to: Sir Vikas Somani

Cascading style sheets (CSS)

More Related Content

What's hot

Similar to Cascading style sheets (CSS)

Recently uploaded

In this document

Cascading style sheets (CSS)