Css

Contents{
1. What is CSS?
1. A Brief History of CSS
2. Why to use Styles?
2. Syntax
3. Cascading Order
4. Examples of Properties
5. Limitations
6. CSS variations

{What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display (X)HTML elements
 Styles are normally stored in Style Sheets
 Multiple style definitions will cascade into one

{A Brief History of CSS
 Style sheets have existed since the beginnings of SGML in
the 1970s
 As HTML grew, it came to encompass a wider variety of
stylistic capabilities
 Nine different style sheet languages were proposed to
the W3C
 Two were chosen as the foundation for CSS: CHSS and
Stream-based Style Sheet Proposal
 CSS level 1 – 1996; CSS level 2 – 1997
 Difficulties with adoption

{Why to use Styles?
 Documents written with CSS are
 more flexible
 short
 clear
 Basic formating tool
 Easy multiple document managment
 Save time by using selector classes
 New opportunities in formating

{ Basic Syntax
 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
 Every property has the value

{ Syntax
 If the value is multiple words, put quotes around the
value
p {font-family: "sans serif"}
 To make the style definitions more readable, you
can describe one property on each line
p
{
text-align: center;
color: black;
font-family: arial
}

{ Grouping
h1,h2,h3,h4,h5,h6
{
color: green
}
 All header elements will be displayed in green text color
This is header h1
This is header h2
This is header h3
This is header h4

{ 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}
 Using the class argument in (X)HTML:
<p class="right"> This paragraph will be right-
aligned. </p>
<p class="center"> This paragraph will be
center-aligned. </p>

{ Text color
<html><head>
<style type="text/css">
h1 {color: green}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a
paragraph</p>
</body>
</html>
This is header 1
This is header 2
This is a paragraph

{Cascading order
1. Browser default
2. External style sheet
 inside external *.css file
3. Internal style sheet
 inside the <head> tag
4. Inline style
 inside an HTML element

{External Style Sheet
 Each webpage must link
to the style sheet using
the <link> tag
 Browser reads styles
definitions from
mystyle.css file
<head>
<link
rel="stylesheet"
type="text/css"
href="mystyle.css" /
>
</head>

{ Internal Style Sheet
 Should be used when a
single document has a
unique style
 Defined in the head
section by using the
<style> tag
<head>
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>

{ Multiple Style Sheets
 An internal style sheet has
following properties for the
h3 selector:
h3 { text-align: right;
font-size: 20pt }
 External style sheet has
these:
h3 { color: red;
text-align: left;
font-size: 8pt }
 Your Web Browser has
default formatting:
h3 { color: black;
font size: 10pt }
 What will be the format of
<h3> tag?
o color: red;
o text-align: right;
o font-size: 20pt

Examples
CSS Properties & values

{ Background:
 Control over the
background color of an
element
 set an image as the
background,
 repeat a background
image
 background-color
 color-rgb
color-hex
color-name
 background-image
 url(URL)
none
 background-repeat
 repeat
repeat-x
repeat-y
no-repeat

{Text:
 color
 direction
 ltr
rtl
 word spacing
 normal
length
 text-decoration
 none
underline
overline
line-through
blink
 text-align
 left
right
center
justify

{Font:
 font-family
• family-name
generic-family
 font-size
 xx-small
x-small
small
 /etc./
 font-weigh
 normal
bold
bolder
lighter
100

{List:
<head>
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

{CSS Limitations
 Some noted disadvantages of using "pure" CSS include
 Inconsistent browser support
 Absence of expressions
 Lack of Variables
 Lack of multiple backgrounds per element
 Control of Element Shapes

CSS level 1
 The first CSS specification to become an official W3C
Recommendation is CSS level 1, published in December
1996. Among its capabilities are support for:
 Font properties such as typeface and emphasis
 Color of text, backgrounds, and other elements
 Text attributes such as spacing between words, letters, and
lines of text
 Alignment of text, images, tables and other elements
 Margin, border, padding, and positioning for most elements
 Unique identification and generic classification of groups of
attributes
 The W3C maintains the CSS1 Recommendation.

CSS level 2
 published as a Recommendation in May 1998.
 includes a number of new capabilities
 absolute, relative, and fixed positioning of elements
 the concept of media types
 bidirectional text
 new font properties such as shadows
 The W3C maintains the CSS2 Recommendation.
 CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2
 returned to Candidate Recommendation status on 19 July
2007

Useful links
 http://www.w3schools.com/css/
 Learn CSS
 http://validator.w3.org/
 Check Your CSS syntax
 http://www.csszengarden.com/
 The beauty of CSS Design
 One HTML file
 210 CSS

http://www.csszengarden.com/?cssfile=/209/209.css

http://www.csszengarden.com/?cssfile=/207/207.css

http://www.csszengarden.com/?cssfile=192/192.css

Thank You for Your Attention
CSS

Css

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Css

Similaire à Css (20)

Plus de Jafar Nesargi

Plus de Jafar Nesargi (15)

Dernier

Dernier (20)

Css