CSS, CSS Selectors, CSS Box Model
-
Upload
jamiecavanaugh -
Category
Education
-
view
6.809 -
download
35
Transcript of CSS, CSS Selectors, CSS Box Model
CSS Selectors
Tag, Class, ID, Compound
Use CSS Selectors to define properties for the structure and presentation of your site.
This is the key to defining specific properties for specific parts of your design.
CSS Selectors
Tag: properties defined for an HTML tag.
Class: properties defined for an HTML tag using a class or a <span> tag.
ID: properties defined for an element or div using an id.
Compound: properties defined using multiple selector types.
CSS Selectors
body {margin: 10px 0;}
Tag*: properties defined for an HTML tag.
(*Also referred to as Type, Element)
CSS Selectors
body {margin: 10px 0;}
<body>Everything within the body will start out with this property. </body>
Tag
CSS Selectors
.red {margin: 15px; color: red;}
Class: properties defined for an HTML tag using a class or a <span> tag.
CSS Selectors
.red {margin: 15px; color: red;}
<p class=”red”>This is a paragraph of text in red.</p>
These are <span class=”red”>words in red.</span>
Class
CSS Selectors
#content p {margin :0;}
<div id=”content”><p>This is a paragraph of text in the content div.</p></div>
Compound
CSS Box Model
How do you position content?
You position content in your page by using a combination of margins, padding and floats.
But, in order to get your positioning and layout correct, you must know how the CSS Box Model works.
CSS Box Model
total box width =
content area width + left padding + right padding + left border + right border + left margin + right margin
CSS Box Model
#content {width: 200px;border: 1px solid #900;padding: 10px;margin: 0;background: #fee;}
What is the total box width?