Scribd
Upload
99 views

CSS: Power of Simplicity: Ven Francis Dano-Og

CSS (Cascading Style Sheets) is a stylesheet language that allows separation of document content from document presentation. CSS was created in 1994 and has become the W3C standard for controlling visual presentation of web pages. CSS provides advantages like faster downloads, easier site maintenance, global control of design attributes, and precise positioning and layout controls. Using CSS results in cost savings through reduced bandwidth costs, higher search engine rankings due to cleaner code, and increased compatibility across devices. CSS can be applied to HTML pages, dynamic data, and for layout purposes. While browser support for CSS is still uneven, its specifications are developed by the W3C.

Uploaded by

Ven Francis
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
99 views

CSS: Power of Simplicity: Ven Francis Dano-Og

CSS (Cascading Style Sheets) is a stylesheet language that allows separation of document content from document presentation. CSS was created in 1994 and has become the W3C standard for controlling visual presentation of web pages. CSS provides advantages like faster downloads, easier site maintenance, global control of design attributes, and precise positioning and layout controls. Using CSS results in cost savings through reduced bandwidth costs, higher search engine rankings due to cleaner code, and increased compatibility across devices. CSS can be applied to HTML pages, dynamic data, and for layout purposes. While browser support for CSS is still uneven, its specifications are developed by the W3C.

Uploaded by

Ven Francis
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

CSS: Power of Simplicity

Ven Francis Dano-og


Assumptions
 You know HTML
 You do not know CSS
 You care about aesthetics and
function
 That I could present this to you
with in 20 minutes.. nevermind ;P
What We’ll Do
 What is CSS?
 View some code and talk basics
 Why use CSS?
 Advantages to Workflow
 Cost Savings
 Implementations
 Resources
What are Cascading Style
Sheets?
 A stylesheet created by Hakon Wium Lie of MIT in
1994
 Has become the W3C standard for controlling visual
presentation of web pages
 designed primarily to enable the separation of
document content (written in HTML or a similar
markup language) from document presentation,
including elements such as the layout, colors, and
fonts.
Let’s See Some Code
 Sample Style sheet
 Rule Structure
Selectors
 Element Selectors – (refer to HTML
tags)
H1 {color: purple;}
H1, H2, P {color: purple;}
 Contextual – (refer to HTML, but in
context)
LI B {color: purple;}
Selectors
 Class Selectors
<H1 CLASS=“warning”>Danger!</H1>
<P CLASS=“warning”>Be careful…</P>
…….
In your HTML code -
H1.warning {color: red;}
OR to an entire class…
.warning {color:red;}
Selectors
 ID Selectors
<H1 ID=“headerID”>Danger!</H1>
<P ID=“pID”>Be careful…</P>
In your HTML code -
#headerID {color: red;}
#pID {color:red;}
Applying CSS to HTML
 Style rules can be applied in 3 ways:
Inline Styles:
Embedded
External style
style sheets:
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
</HEAD> elements
P {font-size: usinggray;}
10pt; color: the STYLE attribute
</STYLE>
</HEAD>
This is true “separation” of style and content.
…
Keeping all your styles in an external document is
</HTML>
simpler
Take a Glance: w/o CSS
A bunch of html codes without the control of CSS and positioned by TABLE
Take a Glance: with CSS
A bunch of html codes controlled by CSS.
Contents are inside DIV (divisions)
External CSS Codes
Why CSS?
 Advantages to Workflow
 Cost Savings
 You WILL Be Cooler ….xD
Advantages of CSS
 Workflow
 Faster downloads
 Smooth site maintenance
 Global control of design attributes
 Precise control (Advanced)
 Positioning (floating, z-indexing, etc)
 Fluid layouts (floating, percentage
measurement, advance image control, etc)
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 PDA’s will be sold
(Source: eTForecast.com)
 1/3 of the world’s 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 isn’t perfect (yet)
 CSS support in browsers is still uneven
 Make sure your CSS properties are
supported
Resources
 www.w3.org/Style/CSS
 Official CSS Web Site

 www.webdesignerwall.com (itshoo-uber-kewl!)
 Official CSS Web Site

 www.google.com
 Everybody’s best friend, the beacon to a right path :D

 www.venfrancis.co.cc
 My works, Web 2.0 Standards
Woooh Tapos!!! Hehehe =P

You might also like