Post on 02-Jul-2015
Guilherme Cavalcanti@guiocavalcanti
CSS: First steps
CSS first steps:
Agenda
ContextSyntaxProperty: margin, padding, borderProperty: backgroundBlock-level elementsLine-level elementsProperty: floatProperty: clearProperty: position
Guilherme Cavalcanti
CSS first steps:
The layers of client-side development
Guilherme Cavalcanti
CSS first steps:
CSS Syntax
Guilherme Cavalcanti
#selector { property: value;}CSS Rule
CSS first steps:
Margin
Guilherme Cavalcanti
margin: 10px;
margin-top: 5px;margin-right: 5px;margin-bottom: 5px;margin-left: 5px;
CSS first steps:
Padding
Guilherme Cavalcanti
padding: 10px;
padding-top: 5px;padding-right: 5px;padding-bottom: 5px;padding-left: 5px;
CSS first steps:
Border
Guilherme Cavalcanti
border: [border-width | border-style | border-color ];
border-width: 1px;border-color: red;border-style: [dotted|dashed...];
CSS first steps:
Block-level elements
Guilherme Cavalcanti
Line wide elementsCan contain text, data, inline elements, or other block-level elementsBegin new line of text
<div>, <p>, <ul>, <li>, <h#>, <form>, <fieldset>, etc
CSS first steps:
Line-level elements
Guilherme Cavalcanti
Only contain text, data or other inline elements. They are usually "smaller" than block-level elements.Does not begin new line
<span>, <em>, <strong>, etc
CSS first steps:
Float
Guilherme Cavalcanti
float: left | right | none;
Floated elements remain a part of the flow of the web page.
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.
Guilherme Cavalcanti
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.
Guilherme Cavalcanti
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.
Guilherme Cavalcanti
CSS first steps:
How will they float?
Floated elements will sit next to each other if there is room in the container.
Guilherme Cavalcanti
CSS first steps:
References
Understanding FloatsUnderstanding CSS FloatAll About FloatsMDC
Guilherme Cavalcanti