Your SlideShare is downloading. ×
0
Guilherme Cavalcanti           @guiocavalcanti   CSS:First steps
CSS first steps:             Agenda                   Context                   Syntax                   Property: margin,...
CSS first steps:             The layers of client-side developmentGuilhermeCavalcanti
CSS first steps:             CSS Syntax              #selector {                property: value;              }           ...
CSS first steps:             Margin             margin: 10px;             margin-top: 5px;             margin-right: 5px; ...
CSS first steps:             Padding             padding: 10px;             padding-top: 5px;             padding-right: 5...
CSS first steps:             Border             border-width: 1px;             border-color: red;             border-style...
CSS first steps:             Block-level elements                      Line wide elements                      Can contain...
CSS first steps:             Line-level elements                     Only contain text, data or other inline elements. The...
CSS first steps:             Float                     Floated elements remain a part of the flow of the web              ...
CSS first steps:             How will they float?                   If the floated element does not have a pre-           ...
CSS first steps:             How will they float?                   If the container element is the HTML <body>,          ...
CSS first steps:             How will they float?                   If the container element is itself contained by       ...
CSS first steps:             How will they float?                   Floated elements will sit next to each other if       ...
CSS first steps:             References                   Understanding Floats                   Understanding CSS Float  ...
Upcoming SlideShare
Loading in...5
×

CSS first steps

756

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
756
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "CSS first steps"

  1. 1. Guilherme Cavalcanti @guiocavalcanti CSS:First steps
  2. 2. CSS first steps: Agenda Context Syntax Property: margin, padding, border Property: background Block-level elements Line-level elements Property: float Property: clear Property: positionGuilhermeCavalcanti
  3. 3. CSS first steps: The layers of client-side developmentGuilhermeCavalcanti
  4. 4. CSS first steps: CSS Syntax #selector { property: value; } CSS RuleGuilhermeCavalcanti
  5. 5. CSS first steps: Margin margin: 10px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;GuilhermeCavalcanti
  6. 6. CSS first steps: Padding padding: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;GuilhermeCavalcanti
  7. 7. CSS first steps: Border border-width: 1px; border-color: red; border-style: [dotted|dashed...]; border: [border-width | border-style | border-color ];GuilhermeCavalcanti
  8. 8. CSS first steps: Block-level elements Line wide elements Can contain text, data, inline elements, or other block- level elements Begin new line of text <div>, <p>, <ul>, <li>, <h#>, <form>, <fieldset>, etcGuilhermeCavalcanti
  9. 9. CSS first steps: Line-level elements Only contain text, data or other inline elements. They are usually "smaller" than block-level elements. Does not begin new line <span>, <em>, <strong>, etcGuilhermeCavalcanti
  10. 10. CSS first steps: Float Floated elements remain a part of the flow of the web page. float: left | right | none;GuilhermeCavalcanti
  11. 11. CSS first steps: How will they float? If the floated element does not have a pre- defined width, it will take up as much horizontal space as required and available, regardless of the float.GuilhermeCavalcanti
  12. 12. CSS first steps: How will they float? If the container element is the HTML <body>, the floated div will sit on the left margin of the page.GuilhermeCavalcanti
  13. 13. CSS first steps: How will they float? If the container element is itself contained by something else, the floated div will sit on the left margin of the container.GuilhermeCavalcanti
  14. 14. CSS first steps: How will they float? Floated elements will sit next to each other if there is room in the container.GuilhermeCavalcanti
  15. 15. CSS first steps: References Understanding Floats Understanding CSS Float All About Floats MDCGuilhermeCavalcanti
  1. A particular slide catching your eye?

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

×