HLML, XHTML and Css 4

Writing HTML and CSS From the
Ground Up
Writing the HTML and CSS code for your website

Basics
2
Old School vs. New School
Old school: build site entirely in HTML
Use tables to build “shelves” to put content (headers,
navigation, images, footers)
Fixed width tables don’t translate well to other platforms
(PDAs, cellphones, widescreen monitors)
Lots of code, often messy
New school: build site in HTML and CSS
HTML, which is just bare-bones content.
CSS, which provides format and layout.
Code is clean and lean
Use tables only for tabular data (row/column format:
names and phone numbers, date and frequency)
3
Why?
Separates content from presentation - change the look of entire
site by changing one CSS file.
More flexibility and control over sites that will be seen on a
variety of browsers and platforms, including PDA's, cellphones,
wide-screen monitors and text-to-speech monitors.
Faster download
Simple HTML content more “transparent” for text-to-speech
browsers, browsers with images turned off, old browsers
Navigation is in lists, paragraphs within paragraph tags, less code
and fewer images in the HTML
HTML uncluttered by code formatting layout and design
4
Xhtml
XHTML is the new HTML
XHTML is the same as HTML, but stricter and
cleaner
Fully backwards compatible, but can also
work with the coming generation of platforms.
Fewer tags used, fewer attributes used
Stricter rules
Use CSS to do the heavy lifting: format and
presentation
HTML is content only, so requires fewer tags
and attributes
5
HTML tags
 Tags are applied in pairs, an opening tag and a
closing tag. Everything between the opening and
closing tag is affected by the tag.
 <h2>Everything between the opening and closing tag is
affected by the tag.</h2>
 Some tags can have attributes added to them. The
<img> tag, for instance, inserts an image onto you
page. To define the image source, the size of the
image, the alt text of the image and so on, you
need to use add attributes to the tag:
 <img src="images/staff1.jpg" width="100px"
height="50px" border="1px" alt="Pueblo County
Extension staff">
6
XHTML
 In XHTML, the rules are stricter than in HTML:
 All tags must be closed, even tags that normally aren't
closed in HTML: <br> <img> <input>.
 WorkAround: <br /> instead of <br>; <img src="pic1" />
 Must be closed in reverse order they appear (nesting)
 <body><h2>My headline</h2></body>
 All letters must be lowercase
 Some old HTML tags are deprecated, meaning they won't
work in XHTML: <center> <font> <strong>
 Some attributes are deprecated as well: background,
bgcolor, hspace, vspace, align
 Validate code at W3C (World Wide Web Consortium). Once
validated, they let you have this cool icon for your site:
7
8 tags all webpages need
<html>
<head> Description, keywords, title, and
CSS – or link to external CSS – go here.
<title>The title goes here.
</title>
</head>
<body>All the content of your page goes
here.
</body>
</html>
8
2 more
DOCTYPE tag, to let the browser know what "rulebook"
your page will follow:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You also need to append the <html> tag so that it reads:

<html xmlns="http://www.w3.org/1999/xhtml">
Get these from Dreamweaver, or www.w3.org, or from
these lessons
Cut and paste them into every new page you start
XHTML is less forgiving than (but preferable to) HTML
“Transitional” is more forgiving than “strict”
 “Strict” gives you more control than “transitional”
9
CSS
Internal CSS start with this line:
<style rel="stylesheet" type="text/css"></style>
Note the comment code: 

External stylesheets use this line:
<link rel="stylesheet" type="text/css" href=“my_styles.css" />
10
All The Tags You Need
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style rel="stylesheet" type="text/css"><!—
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<meta name="description" content="this is my website" />
<meta name="keywords“ content="keyword one, keyword two“ />
<title>My website
</title>
</head>
<body>All content goes here.
</body>
</html>
11
Css syntax
element {
property-1: value;
property-2: value;
}
These properties will be applied

body { to everything within the “body”
background-color: #ded8cc; tags (which is all the content of
your page)
font-family: verdana, helvetica, arial, sans-serif;
}
#wrapper { These properties will be applied

width: 750px; to any tag (usually a div tag)
text-align: left; where id=“wrapper”
}
12
Previewing Your Page
Webpage should have .htm or .html extension
CSS should have .css extension
In browser, go to File> Open File (Firefox) or File>
Open>Browse (IE)
Need to preview in several browsers
IE 7 (22% of market*)
Firefox 1&2 (37%*)
IE 6 (31%*) (tough browser!)
IE 5 (2%*)
Others (under 4% each*): Safari, Opera, NN 4, IE 4
*Numbers from W3 Schools – February 2008
13
Multiple IE Browsers
IE likes to write over previous versions of
itself, and will often not let you install
earlier versions
http://tredosoft.com/Multiple_IE will install
IE 3, 4, 5, 5.5 and 6 (or any combination of
them) on your system
Install IE7 first, then run this
Doesn’t play well with Vista
14
Building A Page Layout
15
Starting Tags, Meta-content
We’re going to start with internal CSS, to
keep everything in one document
Easy to split off to external CSS, which we’ll
do later
Add some basic meta-content:
All within head tags
Description <meta name="description"
content="this is my website" />
Keyword <meta name="keywords“
content="one, two“ />
Title <title>Title goes here</title>
16
Add Some Basic Content
Between <body> tags, type this text:
My header
Home | Programs | Registration | About Us |
Contact Us
Staff
My headline
My content
CSU Home | Extension Home | Webmaster
17
Define the body
In CSS, between the style tags
Apply only those elements that will be default for all
content of all pages
Will affect everything within body tags (everything!)
Font style, background color, “zero out” margins and
padding
body {
background-color: #ded8cc;
font-family: verdana, arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}
18
Define a heading Tag
h1 {
text-align: center;
color: #006633;
font-size: 1.5em;
}
Put headline between <h1> and </h1> tags
A block-level tag, so line breaks are
automatically applied before and after
Adding CSS to tags is a blunt instrument
approach – affects every instance of that tag
19
Div tags
 You can apply CSS between <div> tags
 Create an ID in CSS with # followed by ID
#header {
position: relative;
width: 750px;
height: 121px;
margin: 10px;
background-color: #dcedd1;
}
 Then put div tags with IDs around that content you are
manipulating
 <div id=“header”>My header</div>
 Can only be used once per page
 Good strategy for one-use structural elements (header,
body, nav bar, footer)
20
Define Wrapper, Center
Wrapper
Common design strategy is to wrap your
content in one big box
Useful for centering, background color,
overall width
#wrapper {
position: relative;
width: 770px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ffffff;
}
Put <div id=“wrapper”> just after <body>

tag, close it just before closing body tag
21
Centering the Wrapper in IE5-
6
Setting margins to equal values will
center in most browsers, but NOT in IE 6
or before.
Add text-align: center; to body CSS for IE
workaround
Add text-align: left to wrapper CSS to reset it
to left
22
Define Header and Navbar
#header {
position: relative;
width: 750px;
height: 121px;
margin: 10px;
}
#top {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
}
Add div tags with appropriate IDs around

header and navbar content <div
id=“top”></div>
23
Reposition Text In Navbar
Add these 2 line to center horizontally and
vertically:
text-align: center;
line-height: 45px; (size of parent element)
#top {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
text-align: center;
line-height: 45px;
}
24
Define Left And Main columns,
Footer
#left {
position: relative;
width: 200px;
height: 400px;
margin: 10px;
}
#main {
position: absolute;
top: 186px;
left: 210px;
width: 540px;
height: 400px;
margin: 10px;
}
#footer {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
text-align: center;
line-height: 45px;
}
 Notice the #main ID is position: absolute,

followed by “top” and “left” values
Pulls it out of the flow of the HTML
 Footer CSS is identical to Top CSS
25
Result (Firefox, IE5, 5.5, 6, 7)
26
Adding Images
27
Two Ways To Add images
 HTML
 Use the image tag <img>
 Add attributes for source, width, height, and alt text
 <img src=“images/header.jpg” width=“750px”
height=“121px” alt=“Colorado State University
Extension” />
Note the self-closing tag
 CSS
 Use background-image
#header {
position: relative;
width: 750px;
height: 121px;
background-image: url(nav-1.jpg);
}
 Background-position (left, right, top, bottom, center)
 Background-repeat (repeat, repeat-x, repeat-y, no-repeat)
28
Adding The Header, Nav And
Footer Images
Put the header image tag in the HTML between
the header <div>s
 <img src=“images/header.jpg” width=“750px” height=“121px”
alt=“Colorado State University Extension” />
Put nav-1 in the #top CSS
background-repeat: repeat-x;
Put nav-2 in the #footer CSS
29
Adding an Image To the Main
Column
<img src="heron.jpg" width=“233px”
height=“252px” alt=“The Great Grey
Heron” align=“left” />
The attribute “align” is depricated
We’ll learn how to do it via the CSS “float”
property later in the workshop
Vspace and hspace (set margin areas in
html for images) are depicated too
We’ll add margins later in CSS
30
Result
31
Margins, Padding and Borders
32
The box model
 Margin is the area
outside the box
 Border is the line around
the box itself
 Padding is the area
between the box and the
content of the box
 In IE 5 and 6, width of
an element INCLUDES
border and padding (not
the margin)
 All other browsers ADD
margin, border and
padding to width of
element
33
Working Around the Width
Property Difference
 There is a “hack” for it:
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
 \width resets IE5, IE5.5, IE6 to new width (element
width + padding + border)
 w\idth sets IE 6 back to real width (element width
only)
 Won’t work for NN 4
 We’ll use this later
34
Margin Values
 margin: 10px; will put 10 pixel margin on
each side
Can specify different values for top, right,
bottom, left
Like a clock: start at top, work your way
around clockwise
 margin: 0 10px 0 10px; will put 10px margins on
sides, none on top and bottom

For a single margin value, you can use
margin-left, margin-right, margin-top, margin-
bottom
will estabish a 10 pixel
 margin-left: 10px;
margin only on the left side

35
Padding Values
will put 10 pixel of padding
 padding: 10px;
on each side
Can specify different values for top, right,
bottom, left
Like a clock: start at top, work your way
around clockwise
will put 10px margins on
 padding: 0 10px 0 10px;

For a single padding value, you can use
padding-left, padding-right, padding-top, padding-
bottom
will estabish 10 pixels of
 padding-left: 10px;
padding only on the left side

36
Two Value Shorthand
Can specify 2 values, 1st for top/bottom,
2nd for left/right
 margin: 0 10px; will put 10px margins on sides,
none on top and bottom
 padding: 0 10px; will put 10px of padding on
37
Border Values
Like margins, borders can be done with same
value for all 4 sides, or just for specific sides
Unlike margins, borders have more variables:
Size (e.g. – 2px)
Style (e.g. – solid, inset, outset, dashed)
Color (e.g. – blue, #cccccc)
border: 2px solid #cccccc; will put a 2 pixel solid
gray border around all sides
Border-left: 2px solid #cccccc; will put 2 pixel
solid gray border on left border only
38
Rework Padding and Margin
Remove lower
margin from #nav
Remove top, right
and bottom margin
form #left
Remove all but right
margin from #main
Remove top margin
from #footer
Add 10px padding to
#left and #main
Add 3px left border
to #main
39
Result
40
Lists, Links and Navbars
41
Lists and Links
Good ideas to make navigation bars or
columns HTML lists
They are easier to manipulate that way
More “transparent” HTML: since it is
literally a “list” of links, let the end user
know that by making it an HTML list
42
Html Lists
Begin list with <ol> or <ul>
<ol> - ordered list – numbered or lettered
(used less often)
<ul> - bullet pointed (they can be removed,
or replaced with an image)
End with </ol> or </ul>
Each list item is enclosed with <li> and
</li>
Within the list tags, you need anchor tags
for the link itself
43
Sample Html List Code
Opening unordered list tag
<ul>
<li><a href=“http://www.link1.com/”>link 1</a></li>
Closing unordered
list tag <li><a href=‘http://www.link3.com/”>link 3</a></li>
</ul>
Opening list item Opening anchor Link text Closing Closing list
tag tag and link anchor tag item tag
Notice the tags are nested together,

opening in this order: <ul>,<li>,<a>
Closing in reverse order: </a>, </li>,
</ul>
44
Creating the List
Cut the navbar text form the top horizontal bar,
and paste it between the “#left” div tags
Add a couple more links
Add anchor tags, list item tags, unordered list tags
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Programs </a></li>
<li><a href=“#”>Registration </a></li>
<li><a href=“#”>About Us </a></li>
<li><a href=“#”>Contact Us </a></li>
</ul>
45
Zeroing out Margins and
Padding
IE automatically gives list elements a
margin, Firefox automatically gives them
padding
Set both to 0 in the CSS for your <ul> sets
all browsers to the same value of 0 so you
can set those values on your own
46
List style types
Default is round bullet (disc)
Other values for list-style-type
 None, circle, disc, square
 List-style-image: url(your_image.gif); will allow you to
use your own image for bullet
For ordered lists there are many more options: upper-
roman, lower-roman, upper-alpha, lower-alpha, even
hebrew and armenian
will put the bullets inside
 List-style-position: inside;
the whatever container encloses it in the code
47
New Css Rule
If you specify a CSS div ID, followed by an HTML
element, it will only effect that HTML element
within that specific div
Why? Your manipulation of one list with CSS
won’t affect other lists
With all that in mind….
#left ul {
list-style-type: none;
Margin: 0;
Padding: 0;
}
48
Manipulating list Text, Spacing
and Borders
#left ul li {
font-size: .8em;
line-height: 1.5em;
border-bottom: 1px solid #ffffff;
width: 170px;
}
This affects only list items within the #left
div
Lowers font size to 80% of default
Raises height between lines by 150%
Gives each list item a bottom 1 pixel solid
white border
Sets the width of that border at 170 pixels
49
Adding Link Behaviors
Set the initial state: black, no underline
#left a:link, a:visited {

color: #000000;
text-decoration: none;
}
Set the rollover state: white, underline,
green background color
#left a:hover {
color: #ffffff;
text-decoration: underline;
background-color: #75a375;
}
50
Changing Display From In-Line to
Block
In-line elements (like <a>) only affect the text
between them
Block level elements are larger – typically insert
line breaks before and after (<p>, <h1>)
In this case, it will fill out the background of the
block the text is within, rather than just the
background of the text
Applied to all states of a: tag within #left
Sets width to correspond to length of white
border bottom
#left a {
display: block;
width: 130px;
}
51
Result
Initial state
Rollover state (a:hover)
52
Footer links
In CSS, the #footer, we’ll make them smaller,
closer to the bottom
line-height: 65px;
font-size: .7em;
Put them in an <ul> in HTML, within the

#footer div
<div id="footer">
<ul>
<li><a href="#">CSU Home </a></li> |
<li><a href="#">Extension Home </a></li> |
<li><a href="#">Webmaster</a></li>
</ul>
</div>
53
Footer Links
Set display from block to in-line
This turns the block level element list item’s line
breaks off, so you can see list elements on one line
(the opposite of what we did with the left nav bar)
 #footer ul li {
 display: inline;
}
 Notice that this in-line display is applied to a block

level element (<li>)
Previously we applied a block display to an in-line
element (<a>)
54
Footer Links
0 out the margin and padding, set list style to
none
#footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Set initial state to black, no underline
#footer a:link, a:visited {
color: #000000;
}
#footer a:hover {
color: #ffffff;
}
55
Result
56
Generic Links
 For links in the body of your page, you can simply
define the selectors within the context of the
#main div id
 Good idea for links in the body of the page to be
underlined
#main a:link {
color: #000000;
font-weight: 500;
}
#main a:visited {
color: #cccccc;
font-weight: 500;
}
#main a:hover {
color: #75a375;
font-weight: 500;
57
}
Cross Browser Design
58
Page in Firefox, IE7, Safari
59
Page in IE6
Notice the added space below the footer
60
Page in IE 5, IE5.5
Notice the space below the footer and the
right margin
61
Fix for the footer
Caused by the 45px line height in #footer
Solved with overflow: hidden in #footer
Doesn’t allow overflow content to show
62
Box model Hack review
 div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
\width resets IE5, IE5.5, IE6 to new width

(element width + padding + border)
w\idth sets IE 6 back to real width (element
width only)
63
Fix for the right margin
 Use the Box Model hack
 3 widths to work with:
#wrapper, #left, #main
#wrapper {
\width: 772px;
w\idth: 770px;
}
#left {
\width: 200px;
w\idth: 180px;
}
#main {
\width: 550px;
w\idth: 527px;
}
64
Floating Images, Boxes And
Columns
65
The Float Property
HTML-only aligning of images uses the
align=“left” or align=“right” attribute in the
image or table tag to:
Move the image either right or left, and
Allow text and/or other content to wrap
around it
The “align” attribute is depricated,
meaning it isn’t supported by strict XHTML
The CSS (and XHTML friendly) alternative is
the “float” property
66
The Float Property (con’t)
 float: left; moves an element to the left side of
the containing block, float: right; moves it to the
right
Can only float block-level elements (images,
paragraphs, lists, div tagged elements), not in-line
elements
Specify the width of the floated element (unless
it’s a image)
Floats won’t affect anything above them in the
HTML, but will wrap around anything below it
(until it is cleared)
Clear the float in the next non-floated element of
your layout
 clear: left, clear: right, or clear: both
67
Adding Float ID to Image in
HTML
You don’t have to surround a floated element
with div tags
You can put the CSS ID directly into the
element tag
<img src=“images/pic1” id=“lfloat”>
#lfloat {
float: left;
margin: 10px;
}
The id of “lfloat” in the image tag will float

the image left, text will wrap around the float
68
Reusing Image Formats
Set a class for left and right alignment of images
Use “.” instead of “#” in CSS, “class” instead of
“id” in HTML
Use class=“lfloat” or class=“rfloat” in the HTML
tag whenever you insert a picture
<img src=“images/pic1” class=“lfloat”>
.lfloat {
float: left;
margin: 10px;
}
69
Floating columns
Our current page has a hard-wired height of
400px
Won’t accommodate more content or end
users/browsers with larger default text size
Re-design page so that:
Main column is position: relative
Neither column has a height property
Both columns are floated left
Floats are cleared in the footer
70
Floating the left column
#left {
position: relative;
float: left;
width: 180px; Added code (height
margin: 0 0 0 10px; property was removed)
padding: 10px;
display: inline;
} The display: inline;
code is to defeat the “double
margin” bug in IE, where a
floated element doubles the
margin it is floated against
71
Floating the main column
#main {
position: relative;
float: left;
Added code (position
width: 327px;
property changed from absolute
margin: 0 10px 0 0;
to relative; height, top and
left properties were removed)
border-left: 3px solid #ffffff;
padding: 10px;
display: inline;
The display: inline;
code is to defeat the “double
}
margin” bug in IE, where a
floated element doubles the
margin it is floated against
72
Clearing the floats
#footer {
position: relative;
width: 750px;
margin: 0 10px 10px 10px;
height: 45px;
text-align: center;
line-height: 65px;
font-size: .7em;
overflow: hidden;
clear: both;
} Added code
73
2 IE Bugs Using Floats
The Double Margin Problem
Floating columns in IE6 and prior often
double the margin on the side it is being
floated against
display: inline; inside the floated
element solves the problem
The 3 Pixel Problem
IE6 and prior often put a 3 pixel margin on
the far side of the float (i.e. on the right side
of a left floated column)
Float both columns, not just one
74
Extending the Left Column
Down
 Easy way:
 Make the background color of the wrapper the same
color as the column (background-color: #dcedd1;)
 Works well, but colors the margins as well
 Not quite as easy way:
 Build a CSS box containing #left and #main
 Stretch a graphic down the box with 10px margins on
the side, middle 750px the column background color
#midbox {
width: 770px;
background-image: url(bg-margins.gif);
background-repeat: repeat-y;
overflow: auto;
}
 overflow: auto; allows the image to extend down in
Firefox
 Won’t work in IE5
75
Creating a Third Column
The “faux column” technique
Same technique as the margins, just swap
out the graphic to bg-2col.gif
#midbox {
width: 770px;
background-image: url(bg-2col.gif);
background-repeat: repeat-y;
overflow: auto;
}
Take background-color: #dcedd1; out of #left
Column is defined not by CSS, but by the
graphic (thus it is a “faux” cloumn
Won’t work in IE5
76
Using Css Classes
77
Html vs. Css
Html uses <b></b>, <i></i>,<em></em>
to change the appearance of specific bits of
text
CSS uses classes of properties so that the
same appearance (or set of properties) can
quickly and easily be used over and over
again
These are “in-line” changes in the text, as
opposed to “block”
Unlike div IDs, these can be used multiple
times in the same page
78
Class Selectors
Unlike div IDs, which can only be used
once, class slectors can be used over and
over again
Useful for manipulations you plan to use
frequently (different font for code, add
italics and bold for emphasis)
79
Class Syntax
.strong {
color: red;
font-weight: bold;
font-style: italic;
}
.code {
font-family: "courier new", courier, monospace;
font-size: 95%;
}
 Apply for the conference by <span class=“strong”>March

22nd</span> to receive the professional discount
 Use the <span class=“code”>position</span> property.
 Two word font styles need to be surrounded with quotes
80
Styles
You can create CSS “on the fly” in your HTML without
bothering with your CSS
 Put your CSS within the style attribute within a span
tag
This word is <span style="color:#0000FF;">blue</span>
Notice the syntax is the same as the syntax for CSS:
 property: value;
For purposes of the HTML, put it inside quotes
Multiple properties and values can be used, just
separate with semi-colons
 <span style="color:#0000FF; font-style: bold;"> bold blue
</span>
81
External CSS
82
Internal vs. external
Internal CSS (CSS inside your webpage) defeats one of
the main purposes of CSS, which is having the same
look and layout for all your pages
To pull your CSS out of your webpage and make it
external
Get rid of comment code 
Change “style” to “link”
Add an href attribute that points to your new stylesheet
Cut out all of your CSS (including the closing tag!) and
put it in a new document
 New doc must have .css extension
 Should be the name referred to in your href attribute
83
Internal CSS vs. External CSS
Internal CSS line
<style rel=“stylesheet” type=“text/css”>
External CSS line
<link rel=“stylesheet” type=“text/css”
href=“styles1.css”>
 styles1.css is the name of your css
document
Include the new <link… line of code in all
your webpages
84
Site Structure and Directory
Structure
85
Start With a Pencil and Paper
 Figure out a simple, logical and scalable arrangement of
files and folders
 Design with growth in mind
A web site is NOT a junk drawer
Think of folders as individual drawers where similar files go
 Each major page gets its own folder (About Us, Contact Us
may be exceptions)
 All images in one folder
 All documents in one folder (if there aren’t many)
All documents in each subject area in one folder (4h_docs)
All documents in each subject area broken down by year into
individual folders (4h_07_docs, 4h_08_docs)
86
Sample Site Structure
Home page (index.html)
About Us Contact Us
2nd level pages with little upkeep
4H page Agriculture page Family/consumer page Horticulture page

2nd level pages requiring own folders
Calendars, Calendars, Calendars, Calendars,

documents and documents and documents and documents and
links specific to links specific to links specific to links specific to
topic topic topic topic
87
Sample Directory Structure
Index.html
Abou.html
Cont.html
4H folder 4h_docs folder
4h.html
Agriculture folder agri_docs folder

agri.html
Family/consumer folder fami_docs folder

fami.html
Horticulture folder hort_docs folder

hort.html
Images folder (contains all images)
CSS folder (contains all stylesheets) 88

Sample Directory Structure
89
Other Resources
W3 (http://www.w3.org/)
A List Apart (http://www.alistapart.com/)
W3 Schools (http://www.w3schools.com/)
CSS Zen Garden (
http://www.csszengarden.com/)
Demo of new Extension website (
http://www.ext.colostate.edu/template08_test_s
)
90

HLML, XHTML and Css 4

Uploaded by

Document Information

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

HLML, XHTML and Css 4

Uploaded by

Copyright:

Available Formats

Writing HTML and CSS From the

Writing the HTML and CSS code for your website

You also need to append the <html> tag so that it reads:

and end with this line:

Note the comment code:

These properties will be applied

#wrapper { These properties will be applied

*Numbers from W3 Schools – February 2008

Put <div id=“wrapper”> just after <body>

Add div tags with appropriate IDs around

 Notice the #main ID is position: absolute,

sides, none on top and bottom

margin only on the left side

sides, none on top and bottom

padding only on the left side

sides, none on top and bottom

Notice the tags are nested together,

the whatever container encloses it in the code

#left a:link, a:visited {

Rollover state (a:hover)

Put them in an <ul> in HTML, within the

 Notice that this in-line display is applied to a block

\width resets IE5, IE5.5, IE6 to new width

The id of “lfloat” in the image tag will float

<img src=“images/pic1” class=“lfloat”>

 Apply for the conference by <span class=“strong”>March

4H page Agriculture page Family/consumer page Horticulture page

Calendars, Calendars, Calendars, Calendars,

Agriculture folder agri_docs folder

Family/consumer folder fami_docs folder

Horticulture folder hort_docs folder

Images folder (contains all images)

CSS folder (contains all stylesheets) 88

You might also like