1 / 20

Cascading Style Sheets (CSS)

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

millinerm
Download Presentation

Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 http://www.w3schools.com/css/demo_default.htm

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

  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: • 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. Adding an ID to CSS Adding an ID to your stylesheet: #specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }

  18. 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 ???

More Related