CST336, Spring 2015 Cascading Style Sheet & HTML Tables

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. 2

h1 { color: #0000FF; text-align: center; } 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. 3

Span tag The “ ” tag is used to format any sequence of characters, without adding new lines. For instance: This is part of a sentence Would be displayed as: This is part of a sentence 4

Div tags. The “ ” 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: Note: The tag is a “block” element which means that, by default, it adds a new line after its closing tag. 5

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; } 6

HTML Tables HTML tables are used to display data within rows and columns. The syntax is: Header Cell - Defines each row in a table - Defines a column header - Defines each cell 7

HTML Tables: Rowspan and Colspan The Rowspan and Colspan attributes are used for cells to span multiple rows or columns, respectively. 8 Header Row 2 Cell 1 Row 2 Cell 2 Header Row 1 Cell 1 Row 2 Cell 2

HTML Tables: Styles The most common properties and values to style a table are: 9 border-collapse:collapse; vertical-align:top|middle|bottom; border: 1px solid black;

colorpicker.com colorpicker.com – Generates hexadecimal code for all colors - List of CSS properties - Float property - HTML Tables 10

Lab 1: Let’s Save the Earth! Our future on earth is uncertain and our planet is in jeopardy. We face complex problems such as climate change, vast exploitation of natural resources, population growth, scarcity of food and water, rising sea levels, among many others. We must apply Sustainable Development in order to sustain our planet for future generations. Sustainable Development It refers to the development which meets the needs of the present without compromising the ability of future generations to meet their own needs (United Nations report, 1987). You can help! We all can contribute to have a better world if we follow the 3R’s of sustainable development: Reuse – Find new ways to use items instead of throwing them away! Recycle – Separate the items you are disposing of (plastic, paper, glass, organic) Reduce – The best way to prevent pollution is not using materials that cause pollution: bring your own bags to the grocery store, ride a bike, turn off the lights! Click here for more information Main Page Statistics Get Involved! Contact Us Let's Save the Earth!

Lab 1 (cont): Let’s Save the Earth! Global Warming Statistics Rise in the global average surface temperature since the late 19th century0.6 °C Percent of climate scientists who believe global warming is being caused by humans90 % Total rise in sea level over the past 100 years17.5 cm Public Opinion Percent of Americans who believe global warming is very real70 % Percent of Americans who believe global warming is not happening12 % Percent of Americans who believe global warming is caused mostly by human activity54 % Percent of Americans who say they are “somewhat” or “very worried” about global warming 58 % Percent of Americans who say they trust climate scientists as a source of information about global warming 76 % Source: IPCC Synthesis Report, Yale/George Mason, National Geographic. 10/20/2012 Main Page Statistics Get Involved! Contact Us 12

(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?