CSS Basics
Tomasz Białecki
Cascading Style Sheets Syntax
<selector1>, <selector2> {
<property1> : <value1>;
<property2> : <value2>;
<property3> : <value3>
}
<selector1> {
<property4> : <value4>
}
/* Css comment */Cascading Style Sheets Syntax
p, div {
background: red;
font-weight: bold;
color: blue
}
p {
font-style: italic
}
/* Css comment */Selectors
| Selector | Selected element(s) |
|---|---|
| p | Paragraphs |
| .class1 | Elements with class1 |
| #content | Element with identifier content |
| p.class1 | Paragaphs with class class1 |
| p .class1 | Elements with class class1 having paragraph parent |
| .class1 .class2 | Elements with class class2 having parent with class class1 |
| p.class1.class2 | Paragraphs with both class1 and class2 classes |
Selectors
| Selector | Selected element(s) |
|---|---|
| * | All elements |
| div > p | All <p> elements where the direct parent is a <div> element |
| div + p | All <p> elements that are placed immediately after <div> elements |
| p:first-child | Selects every <p> element that is the first child of its parent |
| p:nth-child(2) | Selects every <p> element that is the second child of its parent |
Exercise 1 - Selectors
Exercise 2 - Selectors
Default property value
<body>
<style>
body {
color: red;
font-size:20px;
border: 1px solid black;
}
</style>
<div>
<p>
<span>Sample text</span>
</p>
</div>
</body>Default property value
<body>
<style>
* {
border: inherit;
}
body {
color: red;
font-size:20px;
border: 1px solid black;
}
</style>
<div>
<p>
<span>Sample text</span>
</p>
</div>
</body>Selector's priority
(Source,Ids,Classes,Eelements)
| Source | 2 - Inline 1 - <style></style> tag 0 - External file |
| Ids | Number of identifiers in selector |
| Classes | Number of classes in selector |
| Elements | Number of elements in selector |
Selector's priority
<div id="content">
<p class="active">
Text
<!-- (2,0,0,0) = 2000 -->
<span style="color: red">!</span>
</p>
</div>/* (0,1,0,1) = 101 */
#content p {
color: blue
}
/* (0,0,1,2) = 12 */
div p.active {
color: yellow
}Box model
real-size = margin + border + padding + size
block vs inline
Block elements
- display: block
- displayed under each other
- size defined by width, height, margin, padding
- example: <div>, <section>, <p>
Inline elements
- display: inline
- displayed next to each other
- size defined only by content size and margin-left, margin-right, padding-left, padding-right
- example: <b>, <i>, <a>, <span>
Example
<div>
<span>1</span>
<span>2</span><span>3</span>
</div>
<div>
<span>4</span>
<span>5</span><span>6</span>
</div>
<div>
<span>7</span>
<span>8</span><span>9</span>
</div>Horizontal alignment
How to align inline elements horizontally
.container {
text-align: center;
}
.child {
display: inline-block;
}Horizontal alignment
How to align block elements horizontally
.container {
}
.child {
margin: 0 auto;
}Vertical alignment
How to align vertically with fixed container height
.container {
height: 100px;
line-height: 100px;
}
.child {
display: inline-block;
vertical-align: middle;
}Exercise 3 - Box model
Float
- element can be pushed to the left or right,
allowing other elements to wrap around it - elements are floated horizontally
- elements after the floating element will flow around it
- if an image is floated to the right, a following text flows around it, to the left
Float in text
vertical-align:
float:
Float of blocks
float:
Clear
float:
clear:
append clearing element:
Exercise 4 - Float
Positioning
position: static
- default value
- positioned according to the normal flow
position: relative
- element is positioned relative to its normal position
- position can be adjusted with top, bottom, left, right properties
- even if moved consumes space in container
Positioning
position: absolute
- element is positioned relative to its first positioned (not static) ancestor element
- position can be adjusted with top, bottom, left, right properties
- offten used together with relative positioning
position: fixed
- element is positioned relative to the browser window
- position can be adjusted with top, bottom, left, right properties
Positioning example
body {
position: relative
}
.container {
top: 50px; left: 50px; background: green
}
.child {
top: 50px; right: 50px; background: red
}position:
position:
Vertical alignment
How to align vertically independently on container height
.container {
height: 200px;
position: relative;
background: green;
}
.child-container {
position: absolute;
height: 0;
overflow: visible;
top: 50%
}
.child {
height: 50px;
top: -25px;
position: relative;
background: yellow;
}Vertical alignment
How to align vertically using table features
.container {
height: 200px;
display: table;
width: 100%
}
.child-container {
display: table-cell;
vertical-align: middle
}
.child {
height: 50px;
width: 50px;
background: yellow
}