1 / 31

Using CSS to Control Appearance

Using CSS to Control Appearance. 1. Objectives. You will be able to Use CSS (Cascading Style Sheets) to control the appearance of your web page. 2. Using CSS. Modern websites use CSS to specify layout and appearance of HTML pages Rather than HTML markup. There are three ways to add CSS

rhonda-leach
Download Presentation

Using CSS to Control Appearance

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. Using CSS to Control Appearance 1

  2. Objectives You will be able to • Use CSS (Cascading Style Sheets) to control the appearance of your web page. 2

  3. Using CSS • Modern websites use CSS to specify layout and appearance of HTML pages • Rather than HTML markup. • There are three ways to add CSS • Directly inside an HTML start tag • Embedded in the <head> section • In a separate file • Sharable by many HTML files

  4. In-Line Style Attribute

  5. Page in Chrome

  6. Style Rules in <body> Tag • Apply to everything inside the body. • Additional rules can be added in enclosed HTML tags. • Higher level rules can be overridden with additional CSS rules in enclosed elements. • When there are differences the applicable rule is the one closest to the element. • This is the meaning of cascading.

  7. Style for the <div>

  8. Page in Chrome

  9. Embedded Style Rules • CSS rules inside the HTML tags tend to clutter the page. • Obscure the structure. • Generally better to embed the style rules in the page head.

  10. Embedded Style Rules

  11. Embedded Style Rules Selector Declarations Property Value

  12. Remove Inline Style Attributes

  13. Page with Embedded CSS Effect is the same.

  14. Style Sheet File • We can clean up the HTML file even more by moving the CSS out to a separate file. • CSS file can be used by many pages.

  15. A CSS File

  16. Link the CSS File

  17. Page in Chrome Effect is the same.

  18. More Content <div> Hello, World! </div> <div> Call me Ishmael. Some years ago--never mind how long precisely-- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me. </div>

  19. Page in Chrome

  20. CSS Classes • Allow us to divide elements of a given kind into groups and specify different styling for each group.

  21. CSS Classes

  22. CSS Classes

  23. Page in Chrome

  24. Page in IE8

  25. Dividing Text into Columns • Easy in HTML5. • column-count:3 • Currently requires vendor prefix for most browsers • -webkit- Chrome and Safari • -moz- Firefox • -ms- Internet Explorer • -o- Opera

  26. Specifying Columns .Content { color:Black; text-align:justify; font-size:small; -webkit-column-count:3; -moz-column-count:3; -ms-column-count:3; column-count:3 }

  27. Page in Chrome

  28. Page in Firefox 4.0

  29. Page in Safari 5.1

  30. Page in IE8 Looks the same in IE9

  31. Learn More about CSS

More Related