cst336, spring 2015 cascading style sheet & html tables
TRANSCRIPT
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?