0
CSS Selectors CSS Box Model
CSS Selectors Tag, Class, ID, Compound Use CSS Selectors to define properties for the structure and presentation of your s...
CSS Selectors Tag :  properties defined for an HTML tag. Class :  properties defined for an HTML tag using a class or a <s...
CSS Selectors body {margin: 10px 0;} Selector Property Value Declaration
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...
CSS Selectors #wrapper {margin :0 auto;} ID :  properties defined for an element or div using an id.
CSS Selectors #wrapper {margin :0 auto;} <div id= ” wrapper ” ></div>  ID
CSS Selectors #content p {margin :0;} Compound :  properties defined using multiple  selector types.
CSS Selectors #content p {margin :0;} <div id= ” content ” > <p>This is a paragraph of text in the content div.</p> </div>...
CSS Box Model How do you position content? You position content in your page by using a combination of margins, padding an...
CSS Box Model content
CSS Box Model 40 px 10 px 100 px 450 px content
CSS Box Model 10 px 1 px 50 px ??? px 500 px content
CSS Box Model total box width =   content area width +   left padding + right padding +  left border + right border +   le...
CSS Box Model #content {width: 200px;border: 1px solid #900;padding: 10px;margin: 0;background: #fee;} What is the total b...
CSS Box Model #content {width: ???px;border: 1px solid #000;padding: 20px;margin: 10;} If the total box width is 400px, wh...
Upcoming SlideShare
Loading in...5
×

CSS, CSS Selectors, CSS Box Model

6,741

Published on

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,741
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
199
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "CSS, CSS Selectors, CSS Box Model"

  1. 1. CSS Selectors CSS Box Model
  2. 2. 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.
  3. 3. 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 .
  4. 4. CSS Selectors body {margin: 10px 0;} Selector Property Value Declaration
  5. 5. CSS Selectors body {margin: 10px 0;} Tag* : properties defined for an HTML tag. (*Also referred to as Type, Element)
  6. 6. CSS Selectors body {margin: 10px 0;} <body> Everything within the body will start out with this property. </body> Tag
  7. 7. CSS Selectors .red {margin: 15px; color: red;} Class : properties defined for an HTML tag using a class or a <span> tag.
  8. 8. 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
  9. 9. CSS Selectors #wrapper {margin :0 auto;} ID : properties defined for an element or div using an id.
  10. 10. CSS Selectors #wrapper {margin :0 auto;} <div id= ” wrapper ” ></div> ID
  11. 11. CSS Selectors #content p {margin :0;} Compound : properties defined using multiple selector types.
  12. 12. CSS Selectors #content p {margin :0;} <div id= ” content ” > <p>This is a paragraph of text in the content div.</p> </div> Compound
  13. 13. 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.
  14. 14. CSS Box Model content
  15. 15. CSS Box Model 40 px 10 px 100 px 450 px content
  16. 16. CSS Box Model 10 px 1 px 50 px ??? px 500 px content
  17. 17. CSS Box Model total box width = content area width + left padding + right padding + left border + right border + left margin + right margin
  18. 18. CSS Box Model #content {width: 200px;border: 1px solid #900;padding: 10px;margin: 0;background: #fee;} What is the total box width?
  19. 19. CSS Box Model #content {width: ???px;border: 1px solid #000;padding: 20px;margin: 10;} If the total box width is 400px, what is the width of the content area?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×