Css

KNS TECHNOLOGIES
CSS Tools and Tips

CSS
Cascading Style Sheets
Charles Severance
www.dr-chuck.com
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

1995
2007
HTML has evolved a *lot* over the
years - as computers and networks
have gotten faster.
Source: www.yahoo.com

Tranforming the look and feel of a page using a CSS style sheet.
body {
font-family: arial, san-serif;
}
a, a:link
{
color: #0000cc;
}
...
+

The Browser has “default styling” for all tags.
<h1><a href="index.htm">
AppEngineLearn</a></h1>
<ul>
<li><a href="sites.htm">Sites</a></li>
<li><a href="topics.htm" >Topics</a></li>
</ul>
<h2>Google App Engine: About</h2>
<p>
Welcome to the site dedicated to
learning the Google Application Engine.
We hope you find
www.appenginelearn.com useful.
</p>

We will apply CSS to the tags in the document.
With no changes to the HTML.

Lots of CSS properties to play with
We can set these properties on any HTML tag in a document.
background-color, border-width, border-color, margin-top,
padding, font-family, top, left, right, float, font-size,
background-image, text-align, text-decoration, font-style, font-
weight, vertical-align, visibility, overflow, ....

Source: http://www.lesliefranke.com/files/reference/csscheatsheet.html

Anatomy of a CSS Rule
body
font-family: arial, sans-serif;
font-size: 100%; }
property - which
aspect of CSS are
we changing
selector - which part of the
document does this rule apply
to
value - What are we
setting the property to.

Multiple tags with same styling
h1, h2, h3 {
color: yellow;
background-color: black;
}
Making a noticeable background color is a fun way to debug / identify blocks.

Three ways to add style rules
• Inline Style - Add style information to a tag
• Embedded Style - Add style information to the document at the
beginning
• External Style Sheet - Put all of your style in an external file
• Preferred - because two people can work independently

csev$ ls –l
total 32
-rw-r--r-- 1 csev staff 44 Jan 28 13:14 glike.css-
rw-r--r-- 1 csev staff 680 Feb 17 08:25 index.htm-rw-
r--r-- 1 csev staff 886 Feb 17 08:00 sites.htm-rw-r--
r-- 1 csev staff 681 Feb 17 08:01 topics.htm
csev$
We put the CSS file in the same directory so the link works.
<head>
<title>Learning the Google App Engine</title>
<link type="text/css" rel="stylesheet" href="glike.css">
</head>

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 font in my document
• And I want to do this everywhere.

Fonts
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
Most Favourite Least Favourite
Fallback fonts: serif, sans-serif, monospace, cursive and fantasy.

Font Factors
font-size:
xx-small
x-small
small
medium
large
x-large
xx-large
font-weight: bold or normal
font-style: normal or italic
text-decoration: none, underline, overline, or
line-through

Color Names
• W3C has listed 16 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.
Source: http://www.w3schools.com/html/html_colors.asp

Colors by the number...
#e2edffThree Numbers,
Red, Green , and
Blue - each from 00 -
FF (Hexidecimal)
#ffffff = white
#000000 = black
#ff0000 = red
#00ff00 = green
#0000ff = blue
Source: http://www.w3schools.com/css/css_colornames.asp
Web-safe
colors
#edf = #eeddff

Default Styling for Links
Downright Ugly!
Post-Click:
Source: www.yahoo.com

Styling Links
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
link - before a visit
visited - after it has been visited
hover - when your mouse is over it
but you have not clicked
active - you have clicked it and you
have not yet seen the new page
Browser default styling for links is
downright ugly!

CSS Tags and Attributes
• As CSS was introduced they introduced two new tags that are pretty
much there to serve as handles for styling
• <div> - A block tag (breaks justification)
• <span> - An inline tag that does not break justification
• There are two attributes with special meaning to CSS
• id= - Marks a unique block within the document for styling (use only
once)
• class= - Marks a non-unique tag within the document for styling
(multi-use)

div as Container
<div>
<p>This is a paragraph inside a div.</p>
<p>So is this.</p>
</div>
<div id="header">
<ul>
<li><a href="sites.htm">Sites</a></li> <li><a
href="topics.htm" >Topics</a></li>
</ul>
</div>
“div” stands for “division” as it allows us to divide our page into parts or sections
and then do something different with each “section”.
The id attribute on the tag allows us to
uniquely mark a div in a document. The
id tag is also useful for screen readers.

Nested divs
<div id="outer">
<div id="nested1">
<p>A paragraph inside the first nested div.</p>
</div>
<div id="nested2">
<p>A paragraph inside the second nested div.</p>
</div>
</div> 
Adding divs give us a “handle” to apply styling (CSS) to a block of text.

Styling with class=
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
<p class="fun">A man walks into a bar; you
would've thought he'd see it coming!</p>
<p>Have a nice day.<p>
<p class=”fun”>More fun stuff</p>
class can be used many
times in a document.

Span (Invisible tag)
<p><span class="fun">Bubble Under</span> is a group of diving
enthusiasts based in the south-west UK who meet up for diving
trips in the summer months when the weather is good and the
bacon rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and to
ensure that everyone gets a trustworthy dive buddy.</p>
Sometimes you want to style something smaller than a whole block - then use span. Do not use span if you are
applying something to a whole block - just put your styling on the enclosing block tag.

Transform from ugly to fancy with CSS

body {
font-family: arial, sans-serif;
}
a {
color: blue;
}
h1 a {
color: black;
}
<head>
<title>Learning the Google App Engine</title>
<link type="text/css" rel="stylesheet" href="glike.css">
</head>

Quick Advertisement - Firefox
• You pretty much need to use Firefox for serious website development
• Important plugins:
• Web Developer - Chris Pedrick
• FireBug - Joe Hewitt
http://addons.mozilla.org/

CSS Box Model
• height and width properties size the block element
• margin properties define the space around the block element
• border properties define the borders around a a block element
• padding properties define the space between the element border and the
element content
• background properties allow you to control the background color of an
element, set an image as the background, repeat a background image
vertically or horizontally, and position an image on a page
http://reference.sitepoint.com/css/boxmodel

The Box Model
.trapped {
height: 100px;
width: 200px;
margin: 20px;
border: 5px solid yellow;
background:red;
padding: 20px;
font-family:Arial;
color:orange;
font-size:20px;
}
<p class=”trapped”>
I am trapped in a glass case of emotion
which is 100px high and 200px wide.
</p>
11
55
00
11
99
00
11
44
00
11
00
00
5
20
20

Border, padding, and margin are additive.
.trapped {
height: 50px;
width: 50px;
}
.trapped2 {
height: 50px;
width: 50px;
border: 5px solid yellow;
padding: 10px;
}
<p class="trapped">
One</p>
<p class="trapped2">
Two</p>

#header {
background-color: #dde;
border-top: 3px solid #36c;
height: 100%;
overflow:hidden;
padding: 7px;
margin-top: 5px;
}
#header h1 {
font-size: 20px;
float: left;
vertical-align: middle;
margin: 0;
padding: 0 0 0 .3em;
}
#header li {
font-size: 14px;
display: inline;
padding: .5em;
}
#header ul {
list-style: none;
text-align: right;
float:right;
vertical-align: middle;
margin: 0;
padding: 0;
}
top, right, bottom, left

#header li a.selected {
color: black;
}
<div id="header">
<h1><a href="index.htm">AppEngineLearn</a></h1>
<ul>
<li><a href="sites.htm" class="selected">Sites</a></li>
<li><a href="topics.htm" >Topics</a></li>
</ul>
</div>
<div id="header">
<h1><a href="index.htm">AppEngineLearn</a></h1>
<ul>
<li><a href="sites.htm">Sites</a></li>
<li><a href="topics.htm" class="selected">Topics</a></li>
</ul>
</div>

CSSValidation
• You can validate your CSS to make sure it has no syntax errors
• Browsers will generally quietly ignore bad CSS syntax
• http://jigsaw.w3.org/css-validator
• The validator can save you time
and sanity
Source: W3C http://validator.w3.org/check

Css

More Related Content

Css