Introduction to Cascading Style Sheets (CSS)
What are Cascading Style Sheets? Cascading Style Sheets allow for the separation of a web page’s structure and content. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document. CSS removes the visual instructions out of HTML and places them in a separate cacheable document.
What Are Cascading Style Sheets (Continued) Setting colours and backgrounds, fonts, and white space are among the most common tasks of CSS. CSS is a specification under W3C. (http://www.w3.org)
WWW - CSS History The world wide web (WWW) was created in 1990 by Tim Berners-Lee CSS was introduced in 1996 by Hakon Wium Lie & Bert Bos.
The Beauty in CSS Design Visit the following URL to see an example of CSS in action: http://www.csszengarden.com
Internal CSS You can include a CSS inside a web page document using the following syntax: <head> <style type = “text/css”> h1, h2, p, li {font-style: italic } </style> </head>
External CSS A CSS can also be referenced outside of the web document. <head> <link href="my_style_sheet.css" rel="stylesheet"> <title>Introduction to Cascading Style Sheets</title> </head>
Inline Style Example: Not quite recommended <p style="color: #ff0000;">Some red text</p> Not quite recommended
CSS syntax A CSS syntax consists of two parts: 1. Selector – (The part before the left curly brace). 2. Declaration – (The part within the curly braces).
CSS syntax (Continued) A declaration has two (2) parts separated by a colon. 1. Property: The part before the colon 2. Value: The part after the colon
Units em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. px (such as font-size: 12px) is the unit for pixels. pt (such as font-size: 12pt) is the unit for points. % (such as font-size: 80%) is the unit for percentages.
Colours color: red; color: rgb(255, 0, 0); color: rbg(100%, 0%, 0%); color: #FF0000; color: #F00;
Text font-family : “Times New Roman”; Arial ; font-size : 0.8em; 2em; font-weight : bold; normal; font-style : italic; normal; text-decoration : overline; line-through; underline; none; text-transform : capitalize; uppercase; lowercase; none;
Text Spacing letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5; text-align: left; right; center; justified;
The Box model margin border padding content
Margins and Padding h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; } h3 { margin: 0 1px 2px 3px ; } (margin-right, margin-left, margin-top, margin-bottom)
Margins : 4 Values h3 { margin: 0 1px 2px 3px ; } (margin-right, margin-left, margin-top, margin-bottom)
Borders h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }
Comma Separated List h1 {font-style: italic} h2 {font-style: italic} h3 {font-style: italic} Because all declarations are the same, the rules can be grouped into a comma – Separated list. h1, h2, h3 {font-style: italic }
Semicolon Separated List A selector may have more than one declaration: h1 {color: green } h1 {text-align: center } Declarations relating to the same selector can be grouped into a semicolon separated list: h1 { color: green; text-align: center; }
CSS URL Link Examples a: link { text-decoration: underline } a: visited { text-decoration: none } a: link, a: visited {text-decoration: none } a: hover {background: black }
CSS Division Divisions are a block level HTML element used to define sections of an HTML file. A division can contain all the parts that make up your website. <div id="container"> Site contents go here </div>
CSS Span Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared. <span class="italic">This text is italic</span> .italic{ font-style: italic; }
CSS Classes The class selector allows you to style items within the same HTML element differently. p.first { color: blue; } p.second { color: red; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> <p>This is a normal paragraph</p> <p class=“first”>This is the first paragraph</p> <p class=“second”>This is the second paragraph</p>
CSS ID IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same HTML file. <div id="container"> Everything within my document is inside this division. </div> #container{ width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; }
Hands-on
Create NEW HTML
Create a new CSS
Internal CSS 1) Type in any class name
External CSS 1) Type in any class name
Save CSS file
Edit a CSS Class
Attach an existing CSS file
Apply CSS Class to HTML 1. Highlight the text 2. Select the class
Preview the HTML Press F12 Save the HTML file.
Exercise
Your turn Open a browser and navigate to https://exhibitions.cul.columbia.edu/exhibits/show/plimpton A modified copy of the above web site has been uploaded to http://drqoo.net/docs/DL/CSS/CSS.htm By using Dreamweaver or whatever tool, edit the appropriate file(s) of (2) above, so that it looks like the same as the original one.
CSS Tutorial Sites Visit the following URL for a tutorial on using CSS: http://www.w3schools.com/css http://www.cssbasics.com/download-all-chapters/
Reference Cascading Style Sheets – Designing For The Web – Third Edition – Hakon Wium Lie & Bert Bos