Internet Computing

CSS (Part 2)
 Content
2

 CSS Tables
 CSS Border
 The CSS Box Model
 CSS Floats
 3

CSS Tables
 Table Borders
4

 To specify table borders in CSS, use the border

property.
 The example below specifies a black border for table,
th, and td elements:

<style type="text/css">
table,th,td
{
border:1px solid black;
}
</style>
 Collapse Borders
5

 The table in the example of previous slide has double borders.

This is because both the table, th, and td elements have separate
borders.
 To display a single border for the table, use the border-collapse
property.
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
 Sample:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-
collapse
 Table Width and Height
6

 Sets width and height of table , td, th

 Example
table
{
width:100%;
}
th
{
height:50px;
}
 Table Text Alignment
7

 The text in a table is aligned with the text-align and

vertical-align properties.
 The text-align property sets the horizontal alignment, like
left, right, or center:
td
{
text-align:right;
}
 The vertical-align property sets the vertical alignment, like
top, bottom, or middle:
td
{
height:50px;
vertical-align:bottom;
}
 Table Padding
8

 To control the space between the border and content in

a table, use the padding property on td and th
elements:
td
{
padding:15px;
}
 Table Color
9

 The example below specifies the color of the borders,

and the text and background color of th elements:
th
{
background-color:green;
color:white;
}
 10

CSS Border
 CSS Border
11

 CSS Border allows you to completely customize the

borders that appear around HTML elements.
 With HTML, it used to be impossible to place a border
around an element, except for the table.
 CSS Borders let you create crisp, customized border
styles with very little work, compared to the antiquated
methods of HTML.
 Border Style
12

 There are numerous types of border styles.

 Example
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }

 Sample:
http://www.w3schools.com/css/tryit.asp?filename=trycss_bor
der-style
 Border Width
13

 To alter the thickness of your border use the

border-width attribute.
 You may use key terms or exact values to
define the border width.
 Note: You must define a border-style for the
border to show up. Available terms: thin,
medium, thick.
table { border-width: 7px;}
td { border-width: medium;}
p { border-width: thick; }
 Border Color
14

 Border colors can be any color defined by

RGB, hexadecimal, or key terms.
 Below is an example of each of these types

table { border-color: rgb( 100, 100, 255);

border-style: dashed; }
td { border-color: #FFBD32;
border-style: ridge; }
p { border-color: blue;
border-style: solid; }
 Border - Individual sides
15

 In CSS it is possible to specify different

borders for different sides:
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

 Shorthand
 border-style:dotted solid double dashed;
 border-style:dotted solid double;
 border-style:dotted solid;
 border-style:dotted;
 Border - Shorthand
16

 To shorten the code, it is also possible to

specify all the border properties in one
property. This is called a shorthand property.
 The shorthand property for the border
properties is "border":
border:5px solid red;
 order of the values are:
 border-width

 border-style

 border-color
 17

The CSS Box Model

 The CSS Box Model
18

 Every block element in CSS is effectively inside a box, and can

have margins, padding and borders applied to it.
 Box widths can be specified in absolute values (e.g. px) or in
relative values, usually:
 em - width values relative to the size of the font in ems
 percentage - width values relative the containing box’s content
region
 The root (or top-most) element’s containing box is effectively
the browser window.
 The CSS Box Model
19

 Every CSS box is divided into regions, consisting of:

1. Margin - Clears an area around the border. The margin
does not have a background color, and it is completely
transparent
2. Border - A border that lies around the padding and
content. The border is affected by the background color of
the box
3. Padding - Clears an area around the content. The
padding is affected by the background color of the box
4. Content - The content of the box, where text and images
appear
The CSS Box Model
20

Margin
Border
Padding

Content
The CSS Box Model
21

Margin
Border

Padding

Content With margin, border and

padding properties, each of
the 4 sides can be specified
independently
 Margins & Padding
22

 Margins and Padding may seem similar at first

glance. But each has its own effect on content,
particularly on any backgrounds assigned to block
and div elements.
Margin

Padding

Content
 Margins & Padding
23

 Margins
 Margins define the space around elements outside the
border
 Margin properties can have negative values in order to
deliberately overlap content
 Margin properties will affect the position of background
elements (graphics and/or colours) in relation to the edges
of the containing block element
 Margin properties can be defined independently on top,
right, bottom and left, or all-at-once using CSS shorthand
 Margins & Padding
24

 Padding
 Padding defines the space around elements inside the
border; i.e between the border and the content itself
 Padding properties cannot have negative values

 Padding properties do not affect the position of

background elements (graphics and/or colors) in the
containing block element; only the position of content.
 Padding properties can be defined independently on
top, right, bottom and left, or all-at-once using CSS
shorthand
 CSS Shorthand: Margin & Padding
25

 For margin and padding (and others), CSS provides a

number of shorthand properties that can save on writing
lines and lines of code. Instead of writing this:
0
 #container {
12
margin-top: 0;
margin-right: 5px;
margin-bottom: 6px; Content Area
margin-left: 5px; 5 5
12 10
padding-top: 20px;
padding-right: 10px; 30
padding-bottom: 30px;
6
padding-left: 12px;
}
 CSS Shorthand: Margin & Padding
26

 …Its much easier to write this:

 #container {
padding: 20px 10px 30px 12px;
0
margin: 0px 5px 6px 5px; 20
}
 The sequence order is always
clockwise, starting from the top Content Area
5 5
12 10

30

6
 CSS Shorthand: Margin and Padding
27

 You can also apply just one value, example:

 #container {
padding: 20px;
margin: 5px;
5
} 20
 Which will apply the value
specified equally on all 4 sides 5 5

Content Area
20 20

20
5
 CSS Shorthand: Margin and Padding
28

 And you can apply two values, example:

 #container {
padding: 10px 20px;
margin: 0px 5px;
} 0
10
 The first value is applied to
the top and bottom
 The second value is applied to 5 5
Content Area
the left and right 20 20

10
0
 CSS Shorthand: Margin and Padding: auto
29

 A useful value to remember is ‘auto’:

 #container {
0
padding: 10px 20px; 10
margin: 0px auto;
}
 Usually applied to the left & Content Area
auto auto
right areas of the margin 20 20

property, auto is useful for

centering a block container
10
element in the browser window 0
 CSS Floats: “Normal Flow”
30

 CSS boxes for block

elements are stacked, one
above the other, so that
they’re read from top to
bottom.
 In CSS, this is said to be the
“normal flow”.
 (Note that CSS boxes for inline
elements are placed next to each
other, within boxes for block
elements, and will normally wrap
according to the width of the
containing block.)
But…
 31

CSS Floats
 Floats: Positioning CSS Boxes
32

 …we can position block

tex t text text text text text text text text text
inline
element boxes side-by- tex t text text text text text text text text text
tex t text text text text text text text text text
side in CSS using floats. tex t textinline
text text text text text text text text
tex t text text text text text text text text text

 Setting the float property tex t text text text text text text text text text
tex t text text text text text text text text text

to left or right causes a tex t text text text text text text text text text
tex t text text text text text text text text text
block
box to be taken out of tex t text text text text text text text text text
inline
tex t text text text text text text text text text

its position in the tex t text text text text text text text text text
tex t text text text text text text text text text

normal flow and moved tex t text text text text text text text text text
tex t text text text text text text text text text

as far left or right as tex t text text text text text text text text text
tex t text text text text text text text text text

possible.
 Float Values
33

 The Float property has

three value options: tex t text text text text text text text text text
inline
tex t text text text text text text text text text
tex t text text text text text text text text text
 float: left; tex t textinline
text text text text text text text text
tex t text text text text text text text text text
 float: right; tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
 float: none; tex t text text text text text text text text text
block tex t text text text text text text text text text
inline
tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
 Restoring the Normal Flow: “Clear”
34

 To restore the “normal tex t text text text text text text text text text
inline
tex t text text text text text text text text text
flow”, we can use the clear tex t text text text text text text text text text

property. tex t textinline

text text text text text text text text
tex t text text text text text text text text text
tex t text text text text text text text text text
 The clear property has tex t text text text text text text text text text
three value options: tex t text text text text text text text text text
tex t text text text text text text text text text
 clear: left; block tex t text text text text text text text text text
inline
tex t text text text text text text text text text
 clear: right; tex t text text text text text text text text text
tex t text text text text text text text text text
 clear: both; tex t text text text text text text text text text
tex t text text text text text text text text text
 These specify which side of tex t text text text text text text text text text
tex t text text text text text text text text text
the element’s box may not
have a float next to it.

block
 CSS Positioning
35

 The last core concept to understand in CSS layout (after the

‘box model’ and ‘floats’), is positioning.
 There are four types of positioning that can be applied to CSS
boxes:
 Static Positioning

 Fixed Positioning

 Relative Positioning

 Absolute Positioning

 Understanding the differences between the two is difficult at

first, but important!
 CSS Positioning: Static Positioning
36

 HTML elements are positioned static by default. A static

positioned element is always positioned
 according to the normal flow of the page.
 Static positioned elements are not affected by the top, bottom, left,
and right properties.

Box 1 Box 2 Box 3

Containing box
 CSS Positioning: Fixed Positioning
37

 An element with fixed position is positioned relative to the

browser window.
 It will not move even if the window is scrolled.

Box 4

Box 1 Box 2 Box 3

Containing box
 CSS Positioning: Relative Positioning
38

 A relatively positioned element will stay exactly where it is,

in relation to the normal flow.
 You can then offset its position “relative” to its starting point
in the normal flow:

Box 1 Box 2 Box 3

Containing box
 CSS Positioning: Relative Positioning
39

 In this example, box 2 is offset 20px, top and left. The result
is the box is offset 20px from its original position in the
normal flow. Box 2 may overlap other boxes in the flow, but
other boxes still recognize its original position in the flow.

#myBox { top: 20px

position: relative;
left: 20px; Left: 20px

top: 20px; Box 1 Position: relative Box 3

}
Box 2

Containing box
 CSS Positioning: Absolute Positioning
40

 An absolutely positioned box is taken out of the normal flow,

and positioned in relation to its nearest positioned ancestor
(i.e. its containing box).
 If there is no ancestor box, it will be positioned in relation to
the initial containing block, usually the browser window.
top: 20px

Left: 20px

Box 1 Box 3
Position: absolute

Box 2

Containing box (relatively positioned ancestor)

 CSS Positioning: Absolute Positioning
41

 An absolutely positioned box can be offset from its initial

position inside the containing block, but other boxes within
the block (and still within the normal flow) act as if the box
wasn’t there.

top: 20px
#myBox {
position: absolute;
Left: 20px
left: 20px;
Box 1 Box 3
top: 20px; Position: absolute
}
Box 2

Containing box (relatively positioned ancestor)

 Overlapping Elements
42

 When elements are positioned outside the

normal flow, they can overlap other
elements.
 The z-index property specifies the stack
order of an element (which element should
be placed in front of, or behind, the others).
 An element can have a positive or negative
stack order.
 Example:
http://www.w3schools.com/css/tryit.asp?filename=trycss
_zindex
 The display Property
43

 The display property specifies if/how an element is

displayed.
 Every HTML element has a default display value
depending on what type of element it is. The default
display value for most elements is block or inline.
 display: none; is commonly used with JavaScript to
hide and show elements without deleting and
recreating them.
 Every element has a default display value. However,
you can override this using display property.
 Example:
http://www.w3schools.com/css/css_display_visibility.asp
 44

End of CSS
End
45