Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets (CSS)
2
What is CSS? CSS stands for Cascading Style Sheets.
CSS provides a means for web authors to separate the content of web pages from the appearance of web pages of web pages. CSS describes how HTML elements should be displayed.
3
What is CSS? We'll be learning:
Why it's good to use CSS. Where to use CSS. How to use CSS. Styles were added to HTML 4.0 to solve a problem…
4
Sample CSS
5
Why Use CSS? HTML was never intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p>
6
Why Use CSS? The traditional HTML approach was to "hardcode" all of the appearance information about a page. This is know as INLINE styling. If you want headings in courier, at 12pt. then you would need to, for every heading, in every page, set the font type and size. <h1 style="font: Courier; font-size:12px; color:blue">This is a heading.</h1>
7
Why Use CSS? If you've a large website (ex. 10-100 pages):
There was a lot of editing. A lot of re-editing if you decided to modify the appearance of your pages later. With all of that editing there is plenty of possibility for introducing errors. This was a big and expensive Problem!
8
Styles Solved this Problem
To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting can be removed from the HTML document, and stored in a separate CSS file. Saves work and therefore less expensive.
9
How do style sheets work?
Style sheets are INTERNAL or EXTERNAL: INTERNAL CSS does the same thing but is in the <head></head> part of the HTML code. EXTERNAL CSS (just simple text files with a .css extension) the rules are in a separate file. Both ensure consistency in a website and make it very easy to make global changes and updates.
10
How do style sheets work?
The parts of a style sheet Every Cascading Style Sheet (CSS) is a series of instructions called statements. A statement does two things: Identifies the elements (see next slide) in an HTML document that it affects. Tells the browser how to draw these elements.
11
How do style sheets work?
Elements are: paragraphs, links, list items tables and so on. In technical HTML terms, an element is anything marked up inside HTML tags < >.
12
Example of a CSS style body { }
font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 1em; text-align: justify; } This is a single statement, that sets the font type, size and alignment.
13
Example of a css style body {
font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 1em; text-align: justify; } Selector Opening Curly brace Property name Value Closing Curly brace
14
External Style Sheet Why use an External Style Sheet
You can use one style sheet for all your pages of your website. Changing the style sheet will affect all the pages of the website. HTML is less crowded, easier to work with. Search engines don’t need to look at CSS
15
Tips Have a template style sheet saved.
Use the template CSS for all your web pages: Just tweak the CSS page to suit the new website.
16
Class vs ID A Class are not unique: An ID are unique:
You can use the same class on multiple elements. You can use multiple classes on the same element. An ID are unique: Each element can have only one ID. Each page can have only one element with that ID.
17
#specialfont { Adding an ID to CSS Adding an ID to your stylesheet:
font-family: font-family: "Times New Roman", Times, serif; color: green }
18
.specialfont { Adding a Class to CSS
Adding a Class to your stylesheet: .specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }
19
Using a new CSS Class Highlight the text you wish to have the new class settings. In the Properties select the new class….. or In the code add <p class="specialfont"> The text you want special </p> in your html code
20
CSS Questions ???
Similar presentations
