Scribd
Upload
212 views

CSS2

CSS (Cascading Style Sheets) allows separation of document content from page layout and formatting. It defines how elements should be rendered on screen, paper, or other media. CSS saves development time and makes it easier to change a site's look and feel. It provides control over text properties, font types and sizes, colors, spacing, positioning of blocks and elements, backgrounds, borders and much more. CSS works by applying styles to HTML elements using selectors and declarations. Styles can be defined within HTML, externally, or internally. External stylesheets are best for maintenance and reuse.

Uploaded by

Danita Ureta Balasta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
212 views

CSS2

CSS (Cascading Style Sheets) allows separation of document content from page layout and formatting. It defines how elements should be rendered on screen, paper, or other media. CSS saves development time and makes it easier to change a site's look and feel. It provides control over text properties, font types and sizes, colors, spacing, positioning of blocks and elements, backgrounds, borders and much more. CSS works by applying styles to HTML elements using selectors and declarations. Styles can be defined within HTML, externally, or internally. External stylesheets are best for maintenance and reuse.

Uploaded by

Danita Ureta Balasta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

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

WHAT ARE CASCADING STYLE SHEETS?


Created by Hakon Wium Lie of MIT in 1994
Has become the W3C standard for controlling visual
presentation of web pages
Separates design elements from structural logic
You get control and maintain the integrity of your
data

{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

LETS SEE SOME CODE


Sample Style sheet
Rule Structure

{ 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. 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>

APPLYING CSS TO HTML


Style rules can be applied in 3 ways:
Inline
Styles:
Embedded
style
sheets:
External
style
sheets:
<H1
STYLE=color: blue; font-size: 20pt;>A large purple
<HTML><HEAD><TITLE>Stylin!</TITLE>
<HEAD>
Heading</H1>
<STYLE
TYPE=text/css>
<LINK REL=stylesheet
TYPE=text/css
H1 {color: purple;}
HREF=styles/mystyles.css>
For individual
elements
usinggray;}
the STYLE attribute
P {font-size:
10pt; color:
</HEAD>
</STYLE>
</HEAD>
This
is true separation of style and content.

Keeping
all your styles in an external document is
</HTML>
simpler

{ 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


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

{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

WHY CSS?
Advantages to Workflow
Cost Savings
You WILL Be Cooler

ADVANTAGES OF CSS
Workflow

Faster downloads
Streamlined site maintenance
Global control of design attributes
Precise control (Advanced)
Positioning
Fluid layouts

ADVANTAGES OF CSS - COST SAVINGS


Cost Savings

Reduced Bandwidth Costs


One style sheet called and cached

Higher Search Engine Rankings


Cleaner code is easier for search engines to index
Greater density of indexable content

ADVANTAGES OF CSS - COST SAVINGS


Faster download = better usability
Web usability redesign can increase the
sales/conversion rate by 100% (source: Jakob
Nielson)
CSS requires less code
Tables require spacer images
Entire table has to render before content
CSS can control the order that elements
download (content before images)

ADVANTAGES OF CSS - COST SAVINGS


Increased Reach
CSS website is compatible w/ many different devices
In 2008 an est. 58 Million PDAs will be sold (Source:
eTForecast.com)
1/3 of the worlds population will own a wireless device by
2010

IMPLEMENTATIONS
Apply to HTML pages
Apply to dynamic data
Format or style XML

Use for layout (this is cool)


See http://www.csszengarden.com

CSS ISNT PERFECT (YET)


CSS support in browsers is still uneven
Make sure your CSS properties are supported

{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

You might also like