CSS
Cascading Style Sheets
Contents{
1.
What is CSS?
1.
2.
2.
3.
4.
5.
6.
A Brief History of CSS
Why to use Styles?
Syntax
Cascading Order
Examples of Properties
Limitations
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
Webpage
Structure
Styleformatting
(X)HTML
CSS
Syntax
CSS
{ 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 rightaligned. </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
Inserting of style sheet
CSS
{Cascading order
1.
2.
Browser default
External style sheet

3.
Internal style sheet

4.
inside external *.css file
inside the <head> tag
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>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
{ Multiple Style Sheets



What will be the format of
<h3> tag?
h3 { text-align: right;
font-size: 20pt }
o
External style sheet has
these:
o
color: red;
text-align: right;
font-size: 20pt
An internal style sheet has
following properties for the
h3 selector:
h3 { color: red;
text-align: left;
font-size: 8pt }

Your Web Browser has
default formatting:
h3 { color: black;
font size: 10pt }
o
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


background-image


color-rgb
color-hex
color-name
url(URL)
none
background-repeat

repeat
repeat-x
repeat-y
no-repeat
{Text:


color
direction



text-decoration

ltr
rtl
word spacing

normal
length

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
{Dimension
{List:
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
CSS
Variations, Limitations
{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/


http://validator.w3.org/


Learn CSS
Check Your CSS syntax
http://www.csszengarden.com/



The beauty of CSS Design
One HTML file
210 CSS
http://www.csszengarden.com/
http://www.csszengarden.com/?cssfile=/209/209.css
http://www.csszengarden.com/?cssfile=/207/207.css
http://www.csszengarden.com/?cssfile=192/192.css
Zen Garden without formatting
Thank You for Your Attention
CSS
Descargar

CSS - Wikispaces