HTML Styles - CSS
HTML Styles - CSS
What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
• Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
• With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes,
Using CSS
• CSS can be added to HTML documents in 3 ways:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many HTML pages
• . Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• The external style sheet can be written in any text editor. The file must
not contain any HTML code, and must be saved with a .css extension.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Colors, Fonts and Sizes
• The CSS color property defines the text color to be used.
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
• The CSS border property defines a border around an HTML element.
• Example
• Use of CSS border property:
• p{
• border: 2px solid powderblue;
•}
CSS Padding
• The CSS padding property defines a padding (space) between the text and
the border.
• Example
• Use of CSS border and padding properties:
• p{
• border: 2px solid powderblue;
• padding: 30px;
• }
CSS Margin
• The CSS margin property defines a margin (space) outside the border.
• Example
• Use of CSS border and margin properties:
• p{
• border: 2px solid powderblue;
• margin: 50px;
•}
Link to External CSS
• External style sheets can be referenced with a full URL or with a path
relative to the current web page.
• Example
• This example uses a full URL to link to a style sheet:
• Everything between <td> and </td> are the content of the table cell.
• <table>
• <tr>
• <td>Emil</td>
• <td>Tobias</td>
• <td>Linus</td>
• </tr>
• </table>
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
• Each table row starts with a <tr> and ends with a </tr> tag.
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML Table Row Height
• To set the height of a specific row, add the style attribute on a table row element:
Example
Set the height of the second row to 200 pixels:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML Table Padding & Spacing
• HTML tables can adjust the padding inside the cells, and also the
space between the cells.
HTML Table - Cell Padding
• Cell padding is the space between the cell edges and the cell content.
Example
th, td {
padding: 15px;
}
• To add padding only above the content, use the padding-top property.
• And the others sides with the padding-bottom, padding-left, and padding-right
properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML Table Colspan & Rowspan
• HTML tables can have cells that span over multiple rows and/or
columns.
HTML Table - Colspan
• To make a cell span over multiple columns, use the colspan attribute:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
HTML Table - Rowspan
• To make a cell span over multiple rows, use the rowspan attribute:
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Table Colgroup
• The <colgroup> element is used to style specific columns of a table.
• If you want to style the two first columns of a table, use the <colgroup> and <col> elements.
• The <colgroup> element should be used as a container for the column specifications.
• The span attribute specifies how many columns that get the style.
• Note: There is a very limited selection of legal CSS properties for colgroups.
• Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
• There is only a very limited selection of CSS properties that are
allowed to be used in the colgroup:
• width property
• visibility property
• background properties
• border properties
Example
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...