Web 03 CSS

Cascading Style Sheets
Charles Severance
www.wa4e.com
https://www.wa4e.com/code/css.zip
Time Browser Web Server Database Server
D
Apache
O static MySql
Parse
M Request
files
Parse
Response
PHP php
code
JavaScrip
t
RRC/HTTP SQL
More than
Developer
Console
http://chrispederick.com/work/web-developer/
HTML has evolved a *lot* over
the years - as computers and
networks have gotten faster
1995
2007
Without CSS
With CSS
HTML
CSS
Separation of Concerns / Specialization
Developer Designer body {
font-family: arial, sans-serif;
}
<html> h1 {
<head> color: blue;
<title>Including CSS From a File</title> }
<link type="text/css" rel="stylesheet" href="rules.css"> p{
</head> border-style: solid;
<body> border-color: red;
<h1>A Header</h1> border-width: 5px;
<p> }
By putting the CSS rules into a separate file, a{
it can be included in many different web pages color: green;
with a single "link" tag, usually in the background-color: lightgray;
"head" of the document. text-decoration: none;
</p> }
CSS Syntax
• CSS Syntax is very different than HTML.
• CSS is a set of “rules” which in include a “selector” and one or

more “properties” and “values” as well as some punctuation...
body {
}
Anatomy of a CSS Rule
selector - which part of the
document this rule applies to
body {
font-size: 100%;
}
property - which aspect of value – what we are

CSS we are changing setting the property to
http://www.lesliefranke.com/files/reference/csscheatsheet.html
Partial List of CSS Properties
color text-decoration
background-color border-width
visibility (visible/hidden) border-style
font-family (arial, sans-serif) border-color
font-size margin
font-style (italic, normal) border
font-weight (bold, normal) padding
text-align float (left, right, none)
vertical-align left / top
text-transform (lowercase, etc) position (static, relative, absolute)
z-index
http://www.lesliefranke.com/files/reference/csscheatsheet.html
Using CSS in HTML
Applying CSS to our HTML
• Inline - right on an HTML tag, using the style= attribute
• An embedded style sheet in the <head> of the document
• As an external style sheet in a separate file
<html>
<head>
<title>Including CSS From a File</title>
<link type="text/css" rel="stylesheet" href="rules.css">
</head>
<body>
<h1>A Header</h1>
csev $ ls -l
total 32
-rw-r--r-- 1 csev staff 44 Dec 19 06:06 rules.css
-rw-r--r-- 1 csev staff 679 Dec 19 06:07 index.htm
-rw-r--r-- 1 csev staff 883 Dec 19 05:59 include.htm
-rw-r--r-- 1 csev staff 679 Dec 19 05:59 colors.htm
csev $
span and div Tags
<p style="border: 1px green solid;">
With CSS we wanted some tags that had no pre-existing style. So the <span style="color:
green;">span</span> tag was invented as the new "inline" tag with no styling.
</p>
<div style="border: 1px blue solid;">
And the <strong>div</strong> tag is a new unstyled block tag with no padding, margin, background-
color, or anything else. So you could mark blocks with the div tag and not inherit any default style.
<div style="border: 1px orange solid;">
And the <strong>div</strong> tags can be nested as well. Adding the 1-pixel borders does take up a pixel
of space.
</div>
You can add some text in the outer div.
</div>
<p style="border: 1px green solid;">
With CSS we wanted some tags that had no pre-existing
Style. So the <span style="color: green;">span</span>
tag was invented as the new "inline" tag with no styling.
</p>
<div style="border: 1px blue solid;">
And the <strong>div</strong> tag is a new unstyled
block tag with no padding, margin, background-color,
or anything else. So you could mark blocks with
the div tag and not inherit any default style.
<div style="border: 1px orange solid;">
And the <strong>div</strong> tags can be nested as well.
Adding the 1-pixel borders does take up a pixel of space.
</div>
You can add some text in the outer div.
</div>
Images, Colors, and Fonts
Color Names
• W3C has listed 16 official color
names that will validate with an
HTML validator.
• The color names are: aqua,

black, blue, fuchsia, gray, green,
lime, maroon, navy, olive,
purple, red, silver, teal, white,
and yellow.
http://www.w3schools.com/html/html_colors.asp
Advanced Colors...
Three numbers,
Red, Green, and
Blue - each from
#e2edff
00 - FF
(Hexidecimal)
#ffffff = white
#000000 = black
#ff0000 = red
#00ff00 = green
#0000ff = blue
Web-safe
colors
http://www.w3schools.com/css/css_colornames.asp
Fonts
• Default fonts are ugly and they have
serifs - which make them harder to
read on a screen
• So the first thing I usually want to do
is override the fonts in my document
• And I want to do this everywhere
Fonts
Most Favorite Least Favorite
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
Fallback fonts: serif, sans-serif, monospace, cursive, and fantasy

Font Factors
font-size:
xx-small font-weight: bold or normal
x-small
small font-style: normal or italic
medium
large text-decoration: none, underline, overline, or
x-large line-through
xx-large
14px
Styling for Links
Post-Click:
Browser default styling for

links is downright ugly!
a {
Styling Links
font-weight: bold;
}
a:link {
color: black;
}
a:visited { link - before a visit
color: gray; visited - after it has been visited
} hover - when your mouse is over it
a:hover {
text-decoration: none;
but you have not clicked
color: white; active - you have clicked it and you
background-color: navy; have not yet seen the new page
}
a:active {
color: aqua;
background-color: navy;
}
Many
More
Samples
wa4e.com
CSS Summary
• CSS layout is its own art and science.
• CSS basics are well established and well supported in all modern
browsers.
• Site layout and markup is further evolving - mostly to make it

increasingly possible to support desktop-like experiences on the
web and mobile.
• These innovations will naturally cause incompatibilities - which

make things interesting and frustrating at times.
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance (www.dr- Continue new Contributors and Translators here
chuck.com) as part of www.wa4e.com and made available under a
Creative Commons Attribution 4.0 License. Please maintain this
last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel
free to add your name and organization to the list of contributors on
this page as you republish the materials.
Initial Development: Charles Severance, University of Michigan

School of Information
Insert new Contributors and Translators here including names and

dates

Web 03 CSS

Uploaded by

Copyright:

Available Formats

Web 03 CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web 03 CSS

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

• CSS is a set of “rules” which in include a “selector” and one or

property - which aspect of value – what we are

• The color names are: aqua,

Fallback fonts: serif, sans-serif, monospace, cursive, and fantasy

Browser default styling for

• Site layout and markup is further evolving - mostly to make it

• These innovations will naturally cause incompatibilities - which

Initial Development: Charles Severance, University of Michigan

Insert new Contributors and Translators here including names and

You might also like