Scribd
Upload
20 views

Unit 1.2.2 CSS

Uploaded by

CLAsH with Dx
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
20 views

Unit 1.2.2 CSS

Uploaded by

CLAsH with Dx
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 54

CSS

Cascading Style Sheets


http://en.wikipedia.org/wiki/Cascading_Style_Sheets
The big picture... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>University of Michigan</title>
....

@import "/CSS/graphical.css"/**/;
p.text strong, .verbose, .verbose p, .verbose h2{text-indent:-
876em;position:absolute}
p.text strong a{text-decoration:none}
p.text em{font-weight:bold;font-style:normal}
div.alert{background:#eee;border:1px solid
red;padding:.5em;margin:0 25%}
In the modern era of web design a img{border:none}
we represent content and meaning .hot br, .quick br, dl.feature2 img{display:none}
div#main label, legend{font-weight:bold}
in HTML and formatting and
layout in CSS.

Source: http://www.umich.edu
HTML has evolved a *lot* over the
years - as computers and networks
have gotten faster.

1995
2007
Source: www.yahoo.com
CSS Allows Separation of effort / specialization
Developer Designer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 @import "/CSS/graphical.css"/**/;
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- p.text strong, .verbose, .verbose p, .verbose h2{text-indent:-
strict.dtd"> 876em;position:absolute}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> p.text strong a{text-decoration:none}
<head> p.text em{font-weight:bold;font-style:normal}
<title>University of Michigan</title> div.alert{background:#eee;border:1px solid
....
...

Everyone needs to know some HTML and some CSS and some programming - but to be truly
skilled at a professional level requires deep understanding and specialization.
Tranforming the look and feel of a page using a CSS style sheet.

body {
font-family: arial, san-serif;
}
a, a:link
{
color: #0000cc;
}

...
Applying Basic Styles
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

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

We can set these properties on any HTML tag in a document.


Source: https://paintedbrain.org/css-cheat-sheet/
Anatomy of a CSS Rule
selector - which part of the
document does this rule apply
to
body {
font-family: arial, sans-serif;
font-size: 100%; }

property - which value - What are we


aspect of CSS are setting the property to.
we changing
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


<h1>
<img src="appengine.jpg" width="142" height="109“
alt="Google App Engine Logo“ Inline
style="float:right"/>
Google App Engine: About</h1>
<p>
Styles
Welcome to the site dedicated to
learning the Google Application Engine.
We hope you find
www.appenginelearn.com useful.
</p>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Learning the Google App Engine</title> <style
type="text/css"> Embedded
body {
font-family: arial, sans-serif; Style
}
img {
float:right
}

</style>
</head>
<body>
<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>
<html xmlns="http://www.w3.org/1999/xhtml"> External Style
<head>
<title>Learning the Google App Engine</title>
Sheets
<link type="text/css" rel="stylesheet" href="glike.css">
</head>
<body>
<h1><a href="index.htm">
AppEngineLearn</a></h1>
<ul> glike.css:
<li><a href="sites.htm">Sites</a></li>
body {
<li><a href="topics.htm" >Topics</a></li> font-family: arial, sans-serif;
</ul> }
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
Most Favourite Least Favourite
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:
font-weight: bold or normal
xx-small
x-small
small
font-style: normal or italic
medium
large text-decoration: none, underline, overline, or
x-large line-through
xx-large
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...
Three Numbers, Red, #e2edff
Green , and Blue -
each from 00 - FF #edf = #eeddff
(Hexidecimal)

#ffffff = white
#000000 = black
#ff0000 = red
#00ff00 = green
#0000ff = blue
Web-safe
colors
Source: http://www.w3schools.com/css/css_colornames.asp
Default Styling for Links
Post-Click:

Downright Ugly!

Source: www.yahoo.com
a{
font-weight: bold;
}
a:link {
Styling Links
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 { but you have not clicked
text-decoration: none;
color: white;
active - you have clicked it and you
background-color: navy; have not yet seen the new page
}
a:active {
color: aqua;
Browser default styling for links is
background-color: navy; 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> The id attribute on the tag allows us to
<p>This is a paragraph inside a div.</p> uniquely mark a div in a document. The id
<p>So is this.</p> tag is also useful for screen readers.
</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”.
Styling a block with “id”
Everything within block Paragraphs within block

#footer { #footer p {
font-style: italic; font-style: italic;
font-family: Times, serif;
or font-family: Times, serif;
} }

<div id="footer">
<p>Please send any comments to csev@umich.edu</p>
</div>
id= identifies a *particular* block - only one in a document
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> <!-- End of the outer 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


class can be used many would've thought he'd see it coming!</p>
times in a document. <p>Have a nice day.<p>
<p class=”fun”>More fun stuff</p>
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.
<body>
<div id="header">
<h1><a href="index.htm“class="selected">SI502</a></h1>
<ul class="toolbar">
<li><a href="books.htm">Books</a></li> When building HTML, we
<li><a href="topics.htm" >Topics</a></li>
</ul>
use id and class to add little
“handles” in the HTML to
</div> make it so we can “style”
<div id="bodycontent"> areas of the document.
<h1>Networked Computing: About</h1>
<p>
This course is a survey course covering a broad
range of technology topics at a high level.
The course is aimed at students with no prior
Pick div id’s to
technical skills other than the general use of indicate meaning.
a computer. Really!
</p>
</div>
</body>
A Running Example...
Transform from ugly to fancy with CSS
First: Just work with the tags and fix fonts / colors
<head>
<title>Learning the Google App Engine</title>
<link type="text/css" rel="stylesheet" href="glike.css">
</head>

body {
font-family: arial, sans-serif;
}
a{
color: blue;
}
h1 a {
text-decoration: none;
color: black;
}
Block Layout
Source: www.dr-chuck.com
Two kinds of elements
• Inline - affects how text looks
• strong, span #navigation li {
• Block - Containers that can be laid out display: inline;
}
• Paragraphs, etc
• CSS can change a tag from inline to
block
Inline Elements
• Flowed with other text
• span, em, strong, cite, a
• Inline tags can be nested as long as they match
• <span class=”important”><cite>Stuff</cite></span>
• Block can contain inline - but inline cannot contain block
Block Level Elements
• Starts on its own line - ends
<div id=”content”>
justification and starts a new block
<p>One </p>
• Can be a container for other <p>Two</p>
</div>
elements

• h1 - h6, p, div, blockquote, ul, ol,


form

• Blocks can contain other blocks


Source: www.dr-chuck.com
Now we will move things around, add background and borders, etc.
<body>
<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" >Topics</a></li>
</ul>
</div> Mark our major
<div id="content"> blocks with divs and
<h2>Google App Engine: About</h2> id atributes.
<p>
Welcome to the site dedicated to
learning the Google Application Engine.
We hope you find www.appenginelearn.com useful.
</p>
</div>
</body>
body {
font-family: arial, sans-serif;
}
#header {
background-color: #dde;
border-top: 3px solid #36c;
}
a{
color: blue;
}
#header h1 a {
text-decoration: none;
color: black;
}
<body>
<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" >Topics</a></li>
</ul>
</div>
<div id="content">
<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>
</div>
</body> Next we will move these blocks around.
#header {
background-color: #dde;
border-top: 3px solid #36c;
height: 100%;
overflow:hidden;
}
#header h1 {
font-size: 20px;
float: left;
vertical-align: middle;
}
#header li {
font-size: 14px;
display: inline;
}
#header ul {
list-style: none;
float:right;
vertical-align: middle;
}
Now lets do some “tweaking”
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
.trapped { 20
height: 100px; 20
width: 200px;
margin: 20px;
border: 5px solid yellow; 1 1 1 1
background:red; 9 5 4 0
0 0 0 0
padding: 20px;
font-family:Arial;
color:orange;
font-size:20px;
} 5

<p class=”trapped”>
I am trapped in a glass case of emotion
which is 100px high and 200px wide. The Box Model
</p>
.trapped {
height: 50px;
width: 50px;
}
.trapped2 {
height: 50px;
width: 50px;
border: 5px solid yellow;
padding: 10px;
}

<p class="trapped">
One</p>
<p class="trapped2"> Border, padding, and margin are additive.
Two</p>
#header { #header li {
background-color: #dde;
font-size: 14px;
border-top: 3px solid #36c;
display: inline;
height: 100%;
padding: .5em;
overflow:hidden;
padding: 7px; }
margin-top: 5px; #header ul {
} list-style: none;
#header h1 { text-align: right;
font-size: 20px; float:right;
float: left; vertical-align: middle;
vertical-align: middle; margin: 0;
margin: 0; padding: 0;
padding: 0 0 0 .3em; }
}
top, right, bottom, left
<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>

#header li a.selected {
color: black;
text-decoration: none;
}

<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>
Tranforming the look and feel of a page using a CSS style sheet.

body {
font-family: arial, san-serif;
}
a, a:link
{
color: #0000cc;
}

...
CSS Validation
• 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


Summary
• CSS Layout is its own art and science

• CSS Basics are well established and well supported in all modern browsers

• The box model is pretty straightforward - and allows nice design within the
standards with reasonable effort levels.

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


possible to support desktop like experiences on the web.

• These innovations will naturally cause incompatibilities - which make things


interesting and frustrating at times.

You might also like