Transcript Document
Cascading Style Sheets:
Got Branding?
What is CSS?
CSS = Cascading Style Sheets
Styles define how HTML (web)
elements are displayed.
One (or more) style sheets can be
applied to a site
One
change can affect the entire look
and feel of the site!
CSS: A Brief History
HTML was never intended to contain
tags for formatting. However, in
HTML 3.2, tags such as <font> and
<color> were introduced to aid in
formatting.
This caused major headaches for
large sites, as even simple changes
had to be applied across all pages: A
long and expensive process.
CSS: A Brief History (cont.)
CSS was introduced in HTML 4.0,
which allowed all formatting to be
stored in an external file that could
be used by the entire site.
Thus a single change to that file can
effect your entire site.
Changing fonts, colors and layouts
are now quick and easy
So, What Does CSS Do?
Controls look and feel of the site:
Colors
(fonts, backgrounds, links, etc)
Fonts (sizes, attributes, faces)
Images (borders, etc)
Positions (margins, alignments, etc)\
Much more, too expansive to list
In other words: pretty much everything
related to layout or look and feel
How About an Easy Example?
Warning: Code ahead!
<html>
<head>
<style type="text/css">
.para1
{
color:red;
}
</style>
</head>
<body>
<p class="para1">Hello World!</p>
</body>
</html>
=
Hello World!
A Short Example
http://www.w3schools.com/css/dem
o_default.htm
Click on each Style to view how
quickly you can change the look and
feel.
Using CSS
Three ways to use CSS:
External
style sheet
Internal style sheet
Inline style
Using CSS (cont.)
External Style Sheet
Link
to external document
One change will affect all pages “calling”
this style sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Using CSS (cont.)
Internal Style Sheet
Used
when one document or page needs
it’s own style. Changes will only affect
that page
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Using CSS (cont.)
Inline Style
Define
style on tag itself.
Best to avoid if possible, as you lose
advantages of CSS
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
What does ‘Cascading’ mean?
Multiple style sheets can be applied,
and the changes “cascade” into one
style sheet that is applied:
External Sheet:
Internal Sheet:
Result:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
h3
{
text-align:right;
font-size:20pt;
}
color:red;
text-align:right;
font-size:20pt;
Order Styles are Applied
Multiple styles (when defined) will be
applied in the following order:
Browser
default
External Style Sheet(s) in the order
they are defined
Internal Style Sheets
Inline Styles
This means inline styles will override
all else
A Much Longer Example
CSSZenGarden:
http://www.csszengarden.com/?cssfi
le=none
This
is a basic HTML page with no styles
assigned.
By applying a different CSS (under the
“Select a Design” section), you can
make the same content appear a
multitude of different ways.
CSS and Branding
CSS Allows you to:
Brand
your site according to today’s
guidelines
Easily and quickly keep your site
branded as conditions change without
the need to edit each page.
One simple change in one file can be
applied across your entire site
Why is it Important?
Provides consistency
Easy maintenance
Easier for “non-techies” to maintain
the site
Browser compatibility: Prevents use
of atypical styles that may not show
correctly in some browsers
Why is it Important? (cont.)
Viewing options: It is becoming
increasingly important to offer
websites on different media (such as
mobile browsers)
Bandwidth and speed reduction:
smaller file sizes, caching of CSS
Search Engines: Site becomes more
“content” and less “code”
Some Tools for Developers
Major browsers allow real-time
editing (but will not commit changes)
CSS and HTML:
Firebug
for Firefox (add-in)
Internet Explorer 8 Developer Tools
Chrome’s “Inspect Element” feature
More Resources
CSS free self-paced course at
W3Schools
http://www.w3schools.com/css/css_intr
o.asp
Firebug for Firefox:
www.getfirebug.com
CSS Validator:
http://jigsaw.w3.org/css-validator/
Questions?
Mark Proper
Technical Project Specialist
CCAP IT
[email protected]