CSS

Basic
Ken Ratri

1 2019
Objectives
 Box Model
 Outline
 Table
 List

2 2019
Box Model

 All HTML elements can be considered as boxes. In CSS,

the term "box model" is used when talking about design
and layout.
 The CSS box model is essentially a box that wraps
around HTML elements, and it consists of: margins,
borders, padding, and the actual content.
 The box model allows us to place a border around
elements and space elements in relation to other
elements.

3 2019
Box Model

4 2019
Box Model

 Explanation of the different parts:

 Margin - Clears an area around the border. The margin does
not have a background color, it is completely transparent
 Border - A border that goes around the padding and content.
The border is affected by the background color of the box
 Padding - Clears an area around the content. The padding is
affected by the background color of the box
 Content - The content of the box, where text and images
appear

5 2019
Example

6 2019
Outlines

 An outline is a line that is drawn around elements (outside the

borders) to make the element "stand out".
 However, the outline property is different from the border property.
 The outline is not a part of an element's dimensions; the element's
total width and height is not affected by the width of the outline.

7 2019
Value Description
outline-color Specifies the color of the outline
outline-style Specifies the style of the outline
outline-width Specifies the width of outline
Specifies that the value of the outline property
inherit
should be inherited from the parent element

8 2019
 Outline Style
o The outline-style property specifies the style of the outline.
o The outline-style property can have one of the following values:
• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline. The effect depends on the
outline-color value
• ridge - Defines a 3D ridged outline. The effect depends on the
outline-color value
• inset - Defines a 3D inset outline. The effect depends on the outline-
color value
• outset - Defines a 3D outset outline. The effect depends on the
outline-color value
• none - Defines no outline
• hidden - Defines a hidden outline

9 2019
Outline Color
 The outline-color property is used to set the color of the
outline.
 The color can be set by:
o name - specify a color name, like "red"
o RGB - specify a RGB value, like "rgb(255,0,0)"
o Hex - specify a hex value, like "#ff0000"

10 2019
Outline Width

 The outline-width property specifies the width of the outline.

 The width can be set as a specific size (in px, pt, cm, em, etc)
or by using one of the three pre-defined values: thin, medium,
or thick.

11 2019
Outline - Shorthand property
 To shorten the code, it is also possible to specify all the
individual outline properties in one property.
 The outline property is a shorthand property for the following
individual outline properties:

12 2019
Table
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td
elements:

Notice that the table in the example above has double borders. This is
because both the table and the th/td elements have separate borders.

13 2019
Table

The border-collapse property sets whether the table

borders are collapsed into a single border or separated:

14 2019
Table Width and Height

15 2019
Table aligment

td
{
text-align:right;
height:50px;
vertical-align:bottom;
padding:15px;
}

16 2019
Table Color
table, td, th
{
border:1px solid green;
}

th
{
background-color:green;
color:white;
}

17 2019
Add the border-bottom property to <th> and <td> for horizontal
dividers:

Use the :hover selector on <tr> to highlight table rows on mouse

over:

18 2019
List
 The CSS list properties allow you to:
1. Set different list item markers for ordered lists
2. Set different list item markers for unordered lists
3. Set an image as the list item marker

 In HTML, there are two types of lists:

 unordered lists - the list items are marked with bullets
 ordered lists - the list items are marked with numbers or
letters

19 2019
When using the shorthand property, the order of the
values are:

Value Description
list-style-type Specifies the type of list-item marker.
list-style-position Specifies where to place the list-item marker.
list-style-image Specifies the type of list-item marker.

20 2019
list-style-type Property

 The list-style-type specifies the type of list-item marker in a list.

21 2019
list-style Property

 The list-style shorthand property sets all the list properties in

one declaration.
 The properties that can be set, are (in order): list-style-type,
list-style-position, list-style-image.
 If one of the values above are missing, e.g. "list-style:circle
inside;", the default value for the missing property will be
inserted, if any.

ul#myList
{
list-style-image:url('sqpurple.gif');
}

22 2019
list-style-image Property

 The list-style-image property replaces the list-item

marker with an image.

ul
{
list-style-image:url('sqpurple.gif');
}

23 2019
list-style-image Property

Value Description

url The path to the image to be used as a list-item marker

No image will be displayed. Instead, the list-style-type
none property will define what type of list marker will be
rendered. This is default

Specifies that the value of the list-style-image property

inherit
should be inherited from the parent element

24 2019
 list-style-position Property

Value Description

Indents the marker and the text. The bullets appear inside the
inside
content flow

Keeps the marker to the left of the text. The bullets appears
outside
outside the content flow. This is default

Specifies that the value of the list-style-position property should

inherit
be inherited from the parent elemen

25 2019
 ul#myList
{
list-style-position:outside;
}

ul#myList
{
list-style-position:inside;
}

26 2019