• HTML Structure [Source Code]
• CSS Structure [Cascading Styles]
• DIV or ID Tags and Classes
• The BOX MODEL
• INLINE Elements and FLOATS
HTML | CSS Basic Structure
• HTML Structure [Source Code]
HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a “head” and a “body”. The “head” of the document contains the page title, meta tags, links to CSS, Javascript and other items referenced within the page. The “body” may be seen as the extents of the browser window itself and contains all of the elements that make up the contents of the page.
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Box Model</title>
<meta name=”keywords” content=”Barbara Ambach, HTML Tutorials, CSS Tutorials, Digital Port folio Design, Web Design, Graphic Design, Architecture, College of Architecture and
Planning, University of Colorado Denver” />
<meta name=”description” content=”Introductions to HTML, CSS, Dreamweaver, FTP and Flash Integration for students preparing Web-Based Portfolios in Architecture
and Graphic Design” />
<link href=”main.css” rel=”stylesheet” type=”text/css” />
<link rel=”icon” href=”http://www.barbaraambach.com/favicon.ico”>
</head>
<body>
<div id=”wrapper”> <div id=”header”>
<p>The header may contain text and images at the top of the page.</p>
</div>
<div id=”mainNav”>
<p>The mainNav includes primary links to other primary pages.</p> </div>
<div id=”leftSidebar”>
<p>The leftSidebar may contain secondary navigation, images and text.</p>
</div>
<div id=”mainContent”>
<p>The mainContent may contain images, text and navigation.</p>
</div>
<div id=”breakBar”>
<p>The breakBar may be used to separate a series of floats from other inline content.</p> </div>
<div id=”footer”>
<p>The footer may contain other navigation and copyright information.</p>
</div> </div> </body> head title keywords description css favicon content html body wrapper break bar left Sidebar main Nav header footer main Content The HTML Structure is a series of nested elements similar to a “Box of Chocolates”.
The box is the “wrapper” for all of the chocolates. Each chocolate has an individual container or “div”. Each “div” contains a series of elements and/ or “classes”, such as; milk or dark chocolate, filling, nuts and fruit.
• DIV or ID Tags and Classes • The BOX MODEL
• CSS Structure [Cascading Style Sheet]
CSS [Cascading Style Sheet] defines the look of the content within the HTML DIV Tags and Classes. The CSS is “linked” to the HTML file [Format - Attach Style Sheet - browse for .css file]
@charset “UTF-8”; /* CSS Document */ /* Color values: #fff - white #333 - dark grey #666 - medium grey #999 - light grey #9CF - light blue #F06 - pink */ body { margin: 0px; padding: 0px; text-align: center; background-color: #FFF; margin-top: 30px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, img {
margin: 0px; padding: 0px; } #wrapper { margin: 0 auto; padding: 0px; background-color: #fff; width: 960px; box-shadow: 3px 3px 3px #666; } .copyright {
font-family: ‘Coda’, sans-serif;
font-size: 10px; color: #CCC; text-align: center; } HTML Default Tag HTML Default Tag Resets Commented Code Styles Styles DIV Tag begins with # Styles Class begins with . (period) Styles
Commented code is grey and begins with a /* and ends with a */
A generic “comment” may be added or a rule may be temporarily “commented-out” so that it is not read or rendered by the browser.
CSS Resets remove the HTML browser defaults for margins, padding and many other attributes that you may wish to have more control over by overwriting them with your own CSS Rules. These Resets avoid conflicts between the
browser’s default values and the CSS Rules you write.
• HTML Structure [Source Code] • DIV or ID Tags and Classes • The BOX MODEL
• DIV or ID Tags and Classes
Styles for DIV Tags and Classes are written in the CSS [Cascading Style Sheet].
DIV or ID Tags:
A DIV or ID Tag will have a CSS Rule beginning with a # ... i.e.: #wrapper, #header, #sideBar, #mainContent, #footer.
Each DIV or ID may be used only once in the document and is used for primary structural elements [or DIVISIONS within the page].
Each DIV must be added to the page structure by INSERTING a DIV Tag in the appropriage place in the Source Code:
At Insertion Point = wherever the cursor is placed within the source code ...
Wrap Around Selection = wraps the div around previously selected content in the source code ... After Start of Tag = after the start tag of a previously placed div ... <div>
✓
... </divAfter Tag = after the closing tag of a previously placed div ... <div> ... </div>
✓
Classes:A Class will have a CSS Rule beginning with a . (period) ... i.e.: .title, .img, .block, thumb, etc. etc.
Each Class may be applied to multiple elements in the document to add more specific style attributes. They may be used to define the specific “look” of various types of text, colors, images, etc. within a div.
• CSS Structure [Cascading Styles] • The BOX MODEL
MARGIN - pushes the exterior edges of the box away from other elements.
BORDER - creates a line around edges of the box. PADDING - pushes elements
within a box away from its interior edges. 300px 40 px 2 px 20 px 424px
• The BOX MODEL
An element [div or class] may be given margins, padding and borders determining the amount of area it takes up on the page. All of these add to the overall pixel dimensions that the element will occupy.
ELEMENT CONTENTS
padding border margin margin border padding
40
px 2px 20px contents
• HTML Structure [Source Code] • CSS Structure [Cascading Styles] • DIV or ID Tags and Classes • INLINE Elements and FLOATS
• INLINE Elements and FLOATS
Elements may be added to the page with INLINE structure or with FLOATS.
INLINE Elements are placed within “normal” document flow.
This page structure maintains the vertical organization of elements as they are added to the page one after the other.
FLOATED Elements are removed from “normal” document flow.
This page structure allows elements to “float” above the page and, as a result, other elements move up to take the place of where they used to be. Floated elements may be placed next to one another horizontally. Elements may be “floated” left or right.
Elements Floated “left” align to the furthest left position possible. Elements Floated “right” align to the furthest right position possible.
Clearing Floats:
A CSS Rule of clear: left; or clear: right; keeps the next element from floating on that side of a
previously floated element.
A CSS Rule of clear: both; returns the element back to “normal” document flow and pushes the next
Element below the previously “floated” Elements.
A Class of .clear with a CSS Rule of clear: both; may be added to an element to force no other elements to
float next to it or below it.
• CSS Structure [Cascading Styles] • DIV or ID Tags and Classes • The BOX MODEL
