CST336, Spring 2015

Cascading Style Sheet & HTML Tables

2

CSS Introduction

Cascading Style Sheets (CSS) is a language that defines the layout and formatting of a web page.

Layout: Positioning, alignment, margin, padding, etc.

Formatting: Color, size, font family, background, etc.

3

CSS Introduction

<style>

h1 { color: #0000FF; text-align: center; }

</style>

CSS Terminology

Selector (HTML element)

CSS Rule: A rule consists of a selector and its declaration

Declaration

Each declaration consists of two parts (separated by a colon): A property and a value.

4

Span tag

The “<span></span>” tag is used to format any sequence of characters, without adding new lines.

For instance:

This is <span style=“color: red”> part </span> of a sentence

Would be displayed as:

This is part of a sentence

CSS Introduction

5

CSS Introduction

Div tags.

The “<div>” tag is used to define a “division”, that is, a region or area within a web page.

This tag is mainly used to provide the layout of a web page, replacing the use of HTML tables for this purpose.

Usually this tag has an “id” associated with it:

<div id=“header”></div><div id=“content”></div><div id=“footer”></div>

Note: The <div> tag is a “block” element which means that, by default, it adds a new line after its closing tag.

6

CSS Introduction

CSS Float

The “float” attribute helps to provide the layout to the web page.

As its name indicates, it “floats” the HTML elements next to each other.

Elements can be floated either to the left or to the right:

#navigation_div { float: left; }

#mainContent_div { float: right; }

7

CSS IntroductionHTML Tables

HTML tables are used to display data within rows and columns.The syntax is:

<table> <tr> <th> Header </th> </tr> <tr> <td> Cell </td> </tr></table>

<tr> - Defines each row in a table<th> - Defines a column header<td> - Defines each cell

8

CSS IntroductionHTML Tables: Rowspan and Colspan

The Rowspan and Colspan attributes are used for cells to span multiple rows or columns, respectively.

<table> <tr> <th colspan="2">Header</th> </tr> <tr> <td >Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr></table>

<table> <tr> <th rowspan="2">Header</th> <td >Row 1 Cell 1</td> </tr> <tr> <td>Row 2 Cell 2</td> </tr></table>

9

CSS Introduction

HTML Tables: Styles

The most common properties and values to style a table are:

border-collapse:collapse;

vertical-align:top|middle|bottom;

border: 1px solid black;

10

CSS Resources

colorpicker.com – Generates hexadecimal code for all colors

http://www.w3schools.com/cssref/default.asp - List of CSS properties

http://www.w3schools.com/css/css_float.asp - Float property

http://www.htmlcodetutorial.com/tables/index_famsupp_30.html- HTML Tables

Assignment 1

(1) Create your CST336 home page for class projects.

(2) Complete the lab exercise on your own.

(3) Up to five students will be randomly selected to share their work in the forum.

(4). Update your weekly journal.

Questions?