CSS HTML.pdf

Cascading Style Sheets
◼ CSSs
Definition/motivation
Browser modes
Style structure & types
Style precedence
<div> and <span> tags
Contextual styles
Using multiple style sheets

CSS Definition/Motivation
◼ Cascading style sheet
 External file that is linked to a Web page and defines appearance
properties (styles) of one or more Web pages
◼ Motivations:
 Allows you to apply the same styles to a series of pages in a site
 Enables you to separate content from appearance

◼ Quirks Mode
 Supports errors in CSS implementations in early CSS capable
browsers
◼ IE4&5, Netscape4, etc.
◼ Browsers in this mode ignore current CSS standards to avoid
breaking pages using practices common through the '90s
◼ Transitional - almost same as Standards mode
 difference: layout of images inside table cells is handled as
Quirks. Allows sliced images in tables layouts to work in
browsers.
◼ Standards (also called) Strict Mode
 Adheres to W3C CSS specifications
 HTML 5 Mode (same as standards/strict mode)
Three modern browser modes

◼ <!DOCTYPE> tag determines this
 <!DOCTYPE> is a DTD – Document Type Definition
◼ Never intended to be used as a switch between CSS modes…
 Older pages don't use DOCTYPE – so Quirks mode is used
 Newer pages using <!DOCTYPE> determine mode by what is in
the <!DOCTYPE>
◼ Any new or unknown <!DOCTYPE> triggers strict (standards) mode
 Issue: Some older pages written in Quirks mode do have
<!DOCTYPE> tags
◼ So new browsers have lists of DOCTYPEs that do or don't
trigger Quirks mode
Setting Mode

Triggering Transitional Mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

◼ None of this is set in "stone" since different
versions of browsers might treat this differently.
But in general:
 Or any unrecognized DOCTYPE tag
 Or any document sent with an XML MIME type
Triggering Strict Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

◼ Simplified greatly over the previous doctype declarations
◼ What’s nice about this new DOCTYPE is that all current browsers
(IE, FF, Opera, Safari, Chrome) will look at it and switch the content
into strict mode – even if using an older version that doesn't
recognize HTML5 (because they don't recognize the DOCTYPE).
HTML 5
<!DOCTYPE html>
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Additional Step to Standardize Appearance
(Solves a number of CSS problems)
◼ Add this to the CSS file:
Each browser is able to define how they want certain elements to be displayed by default. For example, one
browser might put more padding on 'h1' than another browser. So this puts all elements back to 0. It's also nice
to just be able to specify everything on your own so that you have complete control of the page. The code above
is good enough for many purposes, but there are other things that can be done to completely reset everything if
you want to look into it. This is reset code that a lot of people seem to like, although I'm not sure what affect
most of it has:
http://meyerweb.com/eric/tools/css/reset/
* {
padding: 0px;
margin: 0px;
}

CSS Syntax Validation
◼ W3C's CSS validator
 http://jigsaw.w3.org/css-validator/
 Awkward to use compared to FireFox and Opera
◼ Use FireFox (or Chrome or Opera) – can save "lots" of
time!
 FireFox Web Console shows CSS errors

Styles without a separate .css file:
◼ Inline: applies only to contents of the specified tag
 Doesn't separate content and appearance
◼ Embedded
 Enclosed within <style> tags in the page heading section
 Applies only to the elements in that page
 Slight improvement in separating content and appearance
◼ But still isn't really separating content and appearance
◼ Dreamweaver adds these when editing in their design view
◼ We won't use either of these!
<p style="font-size: 10pt; color: green">
Example of an Inline Style
</p>

What can you specify using styles?
◼ Colors (background, text, line)
◼ Font properties
◼ Text properties (margins, alignments, wrapping)
◼ …

Approach:
<link href="demo.css" rel="stylesheet" >
<table id="sample">
<tr>
<th> </th>
<th>John</th>
<th>Jane</th>
<th>Total</th>
</tr>
<tr><td class="leftcol">January</td>
<td class="data">123</td>
</tr>
</table>
table#sample {
background-color:#66CCFF;
border:solid #000 3px;
width:200px;
}
table#sample th {
text-align:left;
background-color:#00CCCC;
}
table#sample td {
padding:5px;
border:solid #000 1px;
text-align:right;
};
.leftcol {
background-color:#00CCCC;
font-weight:bold;
}
HTML markup (contains only data) demo.css (contains specifications
about appearance)

Think critically:
◼ What are the advantages of separating content
from appearance?
◼ What are the problems with separating content
from appearance?

Topics
◼ CSSs
Browser modes
Style precedence

CSS Style Structure & Types
◼ General format of a style definition in a
CSS:
◼ Selectors can be:
Tags
Class names
Element IDs
Selector {
property:value;
}

CSS Tag Styles
◼ Formats all elements associated with a certain type of tag
 Example: Formats all page text in <p> tags
 Separate each style with a semi-colon ;
 Enclose style specification in {...}
p {
font-family:cursive;
font-size:12px;
font-weight:bold;
background-color:#00FF00;
}

CSS Class Styles
◼ Not tag-specific
◼ Allows you to:
 Apply the same style to different tags
 Override tag styles
◼ A class style has precedence over a tag style

CSS Class Styles (continued)
◼ Approach:
 Define a class style in the style sheet by prefacing the class
name with . (dot)
 Apply the class style to specific tags using the class attribute:
<div class="LargeText">Hello World</div>
<p class="LargeText">Now is the time</p>
<p>For all good men </p>
.LargeText {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
}

CSS ID Styles
◼ Allow you to specify properties for a specific page element
◼ Use the id attribute to identify the element
 ID's should be unique – not used twice in the same page
 Don't include a second table in the page with the same id
<table id="AllLettersTable">
<tr><td>The quick brown fox</td></tr>
<tr><td>jumped over the lazy dog</td></tr>
</table>

CSS ID Styles (continued)
◼ Assign names to ID styles by describing the type of
object you want to format, not the style description
 Good choices:
◼ Banner
◼ ContentArea
◼ Navigation
 Poor choices (for id styles – okay for class styles)
◼ RedBorder
◼ ComicText

ID Styles (continued)
◼ Defining an ID style:
Preface the style with #
#AllLettersTable {
font-family:Arial, Helvetica, sans-serif;
background-color:#996633;
width:50%;
}

You could use a single tag style to specify:
a. The background color of all tables in a Web site
b. The background color of a specific table on a Web page
c. A border style for images and tables (without affecting any other
elements) in a Web site
d. All of the above
e. None of the above

What type of style would you use to specify the background
color of some (but not all) paragraphs on a Web page?
a. Tag
b. Class
c. ID
d. All of the above would work equally well
e. Either b or c

Today's Topics
◼ CSSs
Browser modes
Style precedence

Style Precedence
◼ Sometimes an item has multiple applicable styles
 Example: all page elements are in the Web page
<body></body> element and could have this applied to them
◼ Therefore Web pages follow a style precedence:
More
specific
Less
specific
Tag styles
Class styles
ID styles
Higher
precedence
Lower
precedence

Style Inheritance
◼ Child elements inherit
styles from parent
elements unless the child
element has a specific
style assigned to it that
overrides the parent style

Style Precedence
◼ Styles that are more specific take precedence
over styles that are less specific
body {background-color: #00FF00}
h1 {background-color:#CC00FF}
<body> less
specific
<h1> more
specific

Style Order
◼ If style rules conflict, the style that appears last (later) in
the style sheet is applied
 But this isn't something that should be done in a style sheet
body {background-color:#00FF00}
body {background-color:#CC00FF} This one
is used

Given the following markup and CSS, how
will the text "Now is the time" appear?
a. 12px Arial regular font
b. 14px Arial bold font
c. 14px Times Roman bold font
d. 12px Arial italic font
<body>
<p>Now is the time</p>
</body>
#PageText{
font-family:courier;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
font-weight: bold;
}
.MainText {
font-size:12px;
font-style: italic
}

a. 12px Arial regular font
b. 14px Arial bold font
c. 14px Times Roman bold font
d. 12px Arial bold italic font
#PageText{
}
body {
}
p {
font-size:14px;
font-weight: bold;
}
.MainText {
font-size:12px;
font-style: italic;
}
<body>
<p class="MainText">
Now is the time</p>
</body

a. 12px courier regular italic font
b. 12px courier bold font
c. 14px courier bold italic font
d. 12px courier bold italic font
<body>
<p class="MainText" id="PageText">
Now is the time</p>
</body>
#PageText{
}
body {
}
p {
font-size:14px;
font-weight:bold;
}
.MainText {
font-size:12px;
font-style:italic
}

http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax
Contextual Selectors

will match
<h3>hello <em>there</em></h3>
and
<h3>hello <b><em>there</em></b></h3>
will match
but not
Not matched

h3.classname { color:#FF0000; }
will match
<h3 class="classname">hello <em>there</em></h3>
but not
h3#idname { color:#0000FF; }
will match
<h3 id="idname">hello <em>there</em></h3>
but not

Using Multiple Styles Sheets
◼ Options:
 Specify different style sheets for different media (screen, print,
handheld)
 Create different style sheets and let the user choose
 Use linked style sheets

Specifying Different Style Sheets for Different Media
◼ Use the media attribute:
<link href="general.css" rel="stylesheet" media="screen">
<link href="blue.css" rel="stylesheet" media="handheld, print">
In html5 the media attribute might be supported by these tags:
<source>
<link>
<a>
<area>
<style>
<track>
I haven't confirmed this – got this from a quick search
http://www.w3schools.com/tags/att_link_media.asp

Topics
◼ Block and inline elements
◼ Div style properties
◼ Div sizing
◼ Div positioning
◼ Creating page layouts using <div> tags

Block Elements
◼ Block element: specifies a block of content on a Web page
 Appears on a new line below the previous content
 Can be surrounded with a border
 Can have a different background color/image than surrounding blocks

Block vs. Inline Elements
◼ Inline element:
 Specifies appearance of content within a block element
 Content is within a line
◼ Also does not have space above or below

Specifying Block and Inline Element
Properties Using CSS Styles
◼ Use <div> and <span> elements
 <div>…</div> specifies a block element
◼ Can span multiple lines
◼ Inserts a leading and trailing line break
 <span>…</span> specifies an inline element
◼ Divides out text within a single line
◼ You can then apply a class or ID style to the div or span
element

<div> example:
Now is the time
<div class="BlueText">For all good men<br >
To come to the aid </div>
Of their country.
.BlueText {
color:#3333FF
}
HTML file:
CSS file:

<span> example:
Now is the time<br >
For all <span class="BlueText">good men</span><br >
To come to the aid <br >
Of their country.
.BlueText {
color:#3333FF
}

Important Div Style Properties
◼ height, width: block size
◼ border: properties of the line around the block
◼ margin: distance between the block and its parent block
◼ padding: distance between the block border and its content
◼ background-color, background-image: block background

Div Styles Illustrated
height
width
margin
padding

Example <div> Styles:
<body>
<div id="sample">Lorem ipsum …
</div>
</body>
#sample {
height:200px;
width:200px;
border:double;
margin:10px;
padding:15px;
background-color:#99CC66;
}
HTML file:
CSS file:

Div Sizing Approaches
◼ Absolute sizing: specify height and width values
using a fixed unit
 Pixels, inches, etc.
◼ Relative sizing: specify size using % or don't
specify the height & width

Absolute Sizing Implications
◼ Div size stays constant regardless of user's
screen resolution
◼ Div size stays constant regardless of content

Absolute Sizing Example:
height=200px; width=200px;
1024 x 768 1440 x 900

What if the content overflows the div size?
◼ Specify the overflow style
 visible: content appears but goes beyond the div borders
 hidden: content is truncated
 scroll: browser always adds scrollbars to the div
 auto: browser adds scrollbars to the div only when content
overflows

Overflow Examples
overflow:visible;
This is the default
overflow:hidden; overflow:scrollbars;
or
overflow:auto;

Relative Sizing
◼ Specify size using % or don't specify the height & width
 Div width will stay as the specified % of browser window
 Div height based on its content (will ignore specified height %)
 Div expands or contracts based on screen resolution

Relative Sizing Example 1:
Height & width specified as a % of the Web page size
1024 x 768
height=25%; width=25%;
1440 x 990
height=25%; width=25%;

Relative Sizing Example 2:
height and width not specified
1024 x 768 1440 x 990

Div Positioning
◼ By default, blocks "flow" on the Web page
 Top-to-bottom
 Appear stacked on other blocks
◼ To specify a fixed (absolute) position, you specify a
value for the position style
 Absolute or relative
 Relative is the default value

Absolute Position Styles
◼ top, left, bottom, right
 Specify the absolute position of the <div> on the Web
page or within its parent block
#sample1 {
position:absolute;
top:0px;
left:0px;
}

Absolute Positioning Example
#sample1 {
position:absolute;
top:0px;
left:0px;
height:200px;
width:200px;
border:double;
margin:10px;
padding:15px;
overflow: auto;
}
#sample2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 282px;
top: 0px;
border:double;
margin:10px;
padding:15px;
background-color:#FF66FF;
overflow:auto;
}

Absolute Positioning Implications
◼ If two absolutely-positioned items attempt to occupy the
same space, they will overlap each other
 Use the z-index style to specify which is on top
◼ Higher value is on top

Overlapping <div>s
#sample1 {
position:absolute;
top:0px;
left:0px;
height:200px;
width:200px;
border:double;
margin:10px;
padding:15px;
overflow: auto;
z-index:1;
}
#sample2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 100px;
top: 0px;
border:double;
margin:10px;
padding:15px;
background-color:#FF66FF;
overflow:auto;
}
Larger number is in front

The browser will render the following divs as:
a. Two side-by-side columns
b. Two overlapping columns
c. Two stacked columns
d. None of the above
<body>
<div id="column1">Lorem ipsum…</div>
<div id="column2">Lorem ipsum…</div>
</body>
#column1{
position:absolute;
top:0px;
left:0px;
width:200px;
background-color:#CC6666;
}
#column2{
position:absolute;
top:0px;
left:100px;
background-color:#CC66CC;
}

The browser will render the following divs as:
a. Two side-by-side columns
b. Two overlapping columns
c. Two stacked columns
d. None of the above
<body>
<div id="column1">
Lorem ipsum…
</div>
<div id="column2">
Lorem ipsum…
</div>
</body>
#column1{
width:200px;
background-color:#CC6666;
}
#column2 {
background-color:#CC66CC;
}

Topics
◼ Block and inline elements
◼ Div style properties
◼ Div sizing
◼ Div positioning
◼ Creating page layouts using <div> tags
and CSS styles

Creating Layouts Using <div> Tags
◼ Specify layout areas as <div> "boxes"
◼ Best practices:
 Pick a target resolution and size everything for those dimensions
◼ Do not require horizontal or vertical scrolling unless user works at
800x600 (maybe 1024 x 768 now?)
◼ However... what about mobile devices (what a headache  )
 Center the content in the browser window
 Create individual content areas using <div>s and ID styles

Example Template
◼ 2 column fixed
Page
Body (width
of browser
window,
regardless of
screen
resolution)
Banner (fixed size/position)
Links
(fixed)
NavBar (fixed size/position)
Content
(fixed size, changing content)

Template CSS Contents
◼ Step 1: create the <body> tag style
body {
width:955px;
text-align:center;
background-color:#FFFFCC;
}
Specifies target screen resolution
Centers all text (not absolute
positioned divs) in the browser
window
Background color that appears
behind your Web pages

◼ Step 2: create main div container
 Allows centering the main div in the browser window
◼ This was called bodycenter in Lab0
 main div contains all other divs on the page
#maindiv {
width :955px;
height :auto;
position :relative;
margin-left :auto;
margin-right:auto;
text-align :left;
}
sets the size of the container
Allows it to position itself in the body
according to the body elements style
rule (text-align:center)
Let the left and right margins
position themselves relative to the
body element
Set the default alignment in the main div
back to left (unless you want to keep the
body element's center alignment)

◼ Step 3: Specify fixed items at the top of all pages
#banner {
position:absolute;
width:955px;
height:128px;
z-index:1;
left: 0px;
top: 0px;
background-
image:url(Images/Banner.jpg);
}
#navbar {
position:absolute;
width:955px;
height:28px;
z-index:1;
left: 0px;
top: 128px;
background-color:#003300;
}
Uses absolute sizing
and positioning
Specify background
images here rather
than in your HTML
page

#links {
position:absolute;
width:200px;
height:472px;
z-index:3;
left: 0px;
top: 156px;
background-
color:#996699;
font-family:Arial,
Helvetica, sans-serif;
font-size:14px;
}
#content {
position:absolute;
width:755px;
height:472px;
z-index:4;
left: 200px;
top: 156px;
background-color:#FFFFFF;
font-family:Arial,
Helvetica, sans-serif;
font-size:12px;
}

Template HTML Markup
<body>
<div id="maindiv">
<div id="banner"></div>
<div id="navbar"></div>
<div id="links"></div>
<div id="content"></div>
</div>
</body>

Layout using relatively
positioned divs
Is this an improvement
over absolute positioning?

Responsive Web Design
◼ Pages designed to be easy to read across a wide range
of devices (from desktop to mobile phones)
 Including devices that don't support JavaScript
 Relies heavily on CSS styles
◼ Frameworks supporting this
 HTML5 Boilerplate
 Twitter Bootstrap
 Skeleton

HTML5 Boilerplate
◼ Starts with a zipped file:
http://tinkerer.me
Example:

Twitter Bootstrap
◼ Starts with zipped file:
◼ I've been told Boilerplate
is most commonly used
but that bootstrap is easier to learn and
get started with
Example: http://twitter.github.com/bootstrap/examples/hero.html

Next slideshow gets into the details
◼ Won't use a template
◼ Will do everything from scratch
Needed to understand what templates do

CSS HTML.pdf

Recommended

Recommended

More Related Content

Similar to CSS HTML.pdf

Similar to CSS HTML.pdf (20)

More from JP Chicano

More from JP Chicano (15)

Recently uploaded

Recently uploaded (20)

CSS HTML.pdf