200 likes | 214 Views
Cascading Style Sheets (CSS). What is CSS?. CSS stands for C ascading S tyle S heets. 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. What is CSS?.
E N D
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.
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…
Sample CSS http://www.w3schools.com/css/demo_default.htm
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>
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>
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!
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.
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. • EXTERNALCSS (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.
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.
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 < >.
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.
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
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
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.
Class vs ID A Class are not 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.
Adding an ID to CSS Adding an ID to your stylesheet: #specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }
Adding a Class to CSS Adding a Class to your stylesheet: .specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }
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