id and class
class:
- The class attribute can be used many times on a page.
- In the css, it is preceeded by a period.
- In html, it is listed as class=” “.
.box {
}
<div class=”box”> </div>
id:
- The id attribute gives an html element a unique id. This can be used when creating a long page with links. It is used only once on a page.
- In the css, it is preceeded by a period.
- In html, it is listed as id=” “.
#santee {
}
<div id=”santee”> </div>
Define your HTML5 structural elements with css
You can define your html structural elements. But you would generally not apply font characteristics here. Stick to p, h1, h2 etc to format your fonts.
footer {
background: #333;
padding: 21px 0 3px 21px;
border-radius: 21px;
opacity: .7;
margin: 0 150px 50px 50px;
}
html5
- In the css, it is preceeded by a nothing: no period or hashtag.
- In html, it wraps content with opening and closing brackets.
header {
}
<header> </header>
Display property
CSS Resets
- CSS resets remove a browsers default styling.
- Place near the top of your css stylesheet.
html, body, div, h1, h3, p, ul, li {
margin: 0;
padding:0;
}
CSS box model
- Content – The content of the box, where text and images appear
- Padding – Clears an area around the content. The padding is transparent
- Border – A border that goes around the padding and content
- Margin – Clears an area outside the border. The margin is transparent
for more information, go to w3schools box model.
measurement of padding and margin:
TRrouBLe: top, right, bottom, left
padding: 20px 30px 40px 50px;
gives 20px to the top, 30px right, 40px bottom, 50px left.
margin: 20px 40px ;
gives 20px top and bottom, 40px right and left.
margin: 0 auto;
This will give 0 top and bottom; auto will take what ever is left right and left and divide it equally, so that the content is centered.
padding: 40px;
gives 40px on all sides.
exercise :
Using your final, color design in InDesign file, create a home page in Dreamweaver. You may find it easier to sketch your plan out on paper. Include the following:
- all fonts and font settings that you use in your font study : p, h1, h2, h3, etc.
- html structural elements
- colors from color study
- grid
- Here is an example of code and design: design.html
Recommended Tutorials:
Lynda.com CSS Page Layouts:
Chapter 1:
CSS resets (8 min)
Fixed, fluid and responsive layouts (10 min)
Chapter 2: Design Considerations:
Determining page structure (7 min)
Adding meaning with classes and IDs (5 min)
Structuring content with HTML5 (7min)
Building internal structure (11 min)
Chapter 3:
Working with floats (1 h 36 min)