Cascading Style Sheets

By: Jerome Locson www.jeromelocson.com ADZU SCITECH MONTH | SIMO ‘08 Advance Computer Laboratory, ADZU September 26, 2008

Recap: HTML Basics
In-depth CSS Lecture & Hands-on
Tweaking Friendster Layout Demonstration
Customizing Multiply Layout Demonstration
Create you own BlogSpot & Plurk Theme

HTML stands for H yper T ext M arkup L anguage
Created by Tim Berners-Lee, founder of World Wide Web Consortium (W3C)
A structured set of tags used to create webpage, displayed in a web browser
Natively, with .html or .htm filename extension
Internet Media Type: text/html

With the basic structure:
<html> <head>
<title></title>
… .
</head>
<body>….</body>
</html>

Opening Tags
<html>,<body>,<title>,<h1>,<p>, etc…
Closing Tags
</html>,</body>,</title>,</h1>,</p>, etc…
All tags must be closed , usually in the format of opening tag -> content -> closing tag
The line break tag does not require a closing tag but can be closed by <br />; <br> is acceptable
HTML tags are not case sensitive; <HEAD> is the same as <head>

Tag Attributes
Format: <tag attribute="value">content</tag>
(can have many attribute declaration)
Elements
Tags will be of no meaning without contents
Syntactically HTML elements are constructed with:
a start tag marking the beginning of an element
any number of attributes (and their associated values)
some amount of content (characters and other elements)
an end tag

Fig 1. HTML element representation of the paragraph (<p>) tag
[Image source: http://en.wikipedia.org/wiki/HTML_element ]

Common HTML Tags
Tags Description Example <a> </a> Anchor and/or Link <a href=“index.htm”>Home </a> <b> </b> Content is shown as bold type <b>Name</b> <blockquote> </blockquote> Content is shown as an indented block; should be used only for long quotations <blockquote> <p>This is a demo. </p> </blockquote> <body> </body> The body part of the HTML document. <body> <h1>Heading</h1> <p>This is a demo.</p> </body>

Common HTML Tags (cont.)
Tags Description Example <br> or <br/> Line break <p>Some content<br>here.</p> <center> </center> Content is centered <center>Some Text Here</center> <div> </div> Container element <div> <p>A Paragraph</p> <img src=“logo.jpg”> </div> <font> </font> Define characteristics of font, according to attributes e.g. SIZE, COLOR, FACE <font face=‘Arial’>Text</font>

Tags Description Example <head> </head> Head part of the HTML document. <head><title>My Webpage</title></head> <h1> </h1> <h2> </h2> ... <h6> </h6> Headings (1-6) <h1>Some text here</h1> <h2>Some text here</h2> … <h6>Some text here</h6> <hr> Horizontal line across the page <hr> <i> </i> Italics <i>Important!</i>

Tags Description Example <img> Displays image. Attributes: src and alt <img src=“logo.jpg” alt=“Company Logo”> <li> </li> List item. Used within an ordered (<ol>) or unordered (<ul>) list <li>Item 1</li> <li>Item 2</li> <ol> </ol> Ordered list <ol> <li>Item 1</li> <li>Item 2</li> </ol> <ul> </ul> Unordered List <ul> <li>Item 1</li> <li>Item 2</li> </ul>

Tags Description Example <span> </span> A container element <span><p>A Paragraph</p> </span> <strong> </strong> Text emphasis, appears bold <strong>Name:</strong> <sub> </sub> Subscript <sub>2</sub> <sup> </sup> Superscript <sup>3</sup>

Tags Description Example <table> </table> Table <table><tr> <td>Sample Data</td> </tr></table> <tr> </tr> Table row <tr> <td>Sample Data</td> </tr> <th> </th> Table Header Cell <tr> <th>Heading</th> <td>Sample Data</td> </tr> <td> </td> Table Data Cell <td>Sample Data 1</td> <td>Sample Data 1</td>

Tags Description Example <title> </title> Page Title <title>My First Webpage</title> <u> </u> Underline Text <u>Important</u> <p></p> Paragraph <p>A quick brown fox.</p> <form> </form> Creates Form <form action=“display.php” method=“get”> … . </form>

Tags Description Example <select > </select> Selection List <select name="sex”> <option value="male">Male</option> <option value="female">Female</option> </select> <option> Items in Selection List <option value="male">Male</option> <option value="female">Female</option> <input> Types: Checkbox, Radio, Button, Submit, Image, Reset, Text, Password, File, hidden <input type="text" name="name" value="Your name" /> <label> </label> Label for a form input <label>Address</label> <textarea> </textarea> Multiple-line text area <textarea rows="10" cols="20" name="comments">Your comments</textarea>

CSS stands for Cascading Style Sheets
Also developed by W3C
With a .css file extension
Internet Media Type: text/css
Mainly used to describe the presentation of HTML (markup languages)
Also, helps in separating the design from content of a webpage
Format: property: value

Variations:
CSS 1
font, color, text attributes, alignment, border, padding, positioning
CSS 2
Superset of CSS 1, also support relative, absolute and fixed positioning of elements
CSS 3
Currently under development

3 Ways to apply:
In-line
Declared inside the HTML tag style attribute
Tag specific declaration
Ex.
<p style="color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc;" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nunc nisl, mollis pharetra, rhoncus ut, pulvinar ut, elit. Phasellus ut nunc a nunc lacinia congue. Pellentesque elit pede, congue quis, viverra vel, sagittis ut, nisi. Donec fringilla euismod nibh. In hendrerit consequat dui.
</p>

3 Ways to apply (cont):
Internal
Usually embedded inside the <head> tag using the <style> tag, but can also be declared inside the <body> tag
Applies only to the current page
Ex.
<head> <title>My First Homepage</title>
<style type="text/css">
p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; }
</style>
</head>

3 Ways to apply (cont):
External
Separating HTML from CSS files
Uses <link /> tag
Ex. (style.css)
TO EMBED:
<head> <title>My First Homepage</title>
<link rel="stylesheet" type="text/css" href=“style.css" />
</head>

Output:

Given name to styles in Internal or External style sheets.
3 Selectors
HTML Selectors
body, p, h1, font, etc.
Class Selectors
.layer1 , .textTitle
ID Selectors
#layer1 , #textTitle

Enclosed in a pair of curly brackets, { }
Has properties
propertyName: values
Ex.
body {
font-size: 12px; color: #000000;
}

Lengths and Percentage Units
em (calculated size of a font)
px (pixels)
pt (points)
% (percentage)
pc (picas)
cm (centimeters)
mm (millimiters)
inches (in)

Colors
With 16,777,216 colors
Could be the name, RGB, Hexadecimal value
Ex. red, rgb(255,0,0), #ff0000
transparent is a valid color value
Text
font-family
font-size
font-weight
font-decoration
font-style
text-transform

Margin and Padding
margin is the space outside of the element
padding is the space inside the element.
margin-top, margin-right,
margin-bottom, margin-left,
padding-top, padding-right,
padding-bottom,padding-left,
margin, padding

Border
border-style (solid, dotted, dashed, double, groove, ridge, inset and outset.)
border-width
border-color

Background Images
background-color
background-image
background-repeat
repeat, repeat-y, repeat-x, no-repeat
background-position
top, center, bottom, left, right or any sensible combination, such as above.

Grouping
Ex. h2 { color: red; }
.thisOtherClass { color: red; }
.yetAnotherClass { color: red; }
… becomes…
h2, .thisOtherClass, .yetAnotherClass { color: red; }

Nesting
Ex. #top { background-color: #ccc; padding: 1em }
#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold; }

Pseudo Classes
selector:pseudo class { property: value; }
link is for an unvisited link.
visited is for a link to a page that has already been visited.
active is for a link when it is gains focus (for example, when it is clicked on).
hover is for a link when the cursor is held over it.

Pseudo Classes
Ex.
a.headerMenu: link {
color: blue;
}
a. headerMenu: visited {
color: purple;
}
a. headerMenu: active {
color: red;
}
a. headerMenu: hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

Shorthand Properties
Ex.
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
… becomes…
p { border-width: 1px 5px 10px 20px; }

Shorthand Properties
Ex.
p {
font: 1em Arial;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

http://en.wikipedia.org/wiki/HTML_element
http://htmldog.com/guides/htmlbeginner/
http://htmldog.com/guides/cssbeginner/
http://ubh.tripod.com/web/html/tags1.htm
http://www.w3schools.com/html/html_primary.asp

Cascading Style Sheets

by Jerome Locson

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 47

Statistics

Cascading Style Sheets Presentation Transcript