Vous êtes sur la page 1sur 14

www.tutorialandexample.

com

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

www.tutorialandexample.com
CSS(Cascading Style Sheet) was developed by Hakon
Wium Lie in 1996.

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 documents layout.

www.tutorialandexample.com
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.

www.tutorialandexample.com
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.

www.tutorialandexample.com
There are three types of cascading style sheets:

1. External style sheet


2. Internal style sheet
3. Inline style

www.tutorialandexample.com
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); }

www.tutorialandexample.com
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>
www.tutorialandexample.com
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>

www.tutorialandexample.com
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)

www.tutorialandexample.com
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

www.tutorialandexample.com
In this presentation weve learned
that how to create style sheets to
control the style and layout of
multiple web sites at once.

www.tutorialandexample.com
www.Tutorialandexample.com

Vous aimerez peut-être aussi