Css
- 1. CSS • Cascading Style Sheets came about due to the realization that the HTML language really is geared towards structure rather than formatting. • Thus, with a style-sheet, you remove all of your formatting from your HTML page. • You leave HTML to do what it does best -- structure; that is, you use HTML to define what is a paragraph, table cell, heading, list, etc., but you don't put any instructions inside your HTML code as to how to display those tags • The how goes into a separate file, the stylesheet
- 2. CSS • The concept of a cascading style sheet (CSS) is actually quite simple. You create a separate file known as a stylesheet and place the formatting there and link each HTML file to it. Here is some sample logic you might find in a stylesheet: • I want all of my heading 1 tags to have a drop shadow • I want all of my pages to have a blue background • I want my default font to be Georgia and black • I want my heading 2 to be Verdana, red, twice as large as the default font, and centered on the page. •
- 3. Why are they called "Cascading"? • This refers to the notion of nesting. Let's say you have a thirty page web site and your stylesheet indicates that the background color on all pages is a dark blue. What if on your index page you want the background to be a lighter shade of blue? You can add an inline stylesheet to your document that overrides for this page only the stylesheet for your entire web site.
- 4. Linking to a StyleSheet • Associating a web page with a stylesheet is easy, as you add just one line of code inside your page's header: • <link rel="stylesheet" href="mystyle.css"> • This tells the web browser to get some information from another file and that it is a stylesheet (link rel="stylesheet"). The next part (href="mystyle.css") tells it the name of the stylesheet. You can name your stylesheet whatever you'd like, but by convention you always end it with a ".css".
- 5. EXAMPLE • Using the example above, a typical header would then look like: • <head> <title>This is my web page</title> <link rel="stylesheet" href="mystyle.css"> </head>
- 6. Stylesheets and Classes • Here, in a simplified form, is the format of a stylesheet: • /* My First StyleSheet */ • TAG1 { • property1 : value; • property2 : value; • property2 : value; • property2 : value; • } • The first difference is that stylesheet comments are enclosed in "/*" and "*/". You'll also notice that each tag has several properties associated with it. These could be such properties as the color of the text, the font of the text, or the size of the border around it. Value is what you'd expect, a value (e.g. red, Verdana, 2 pixels).
- 7. Thus, a real stylesheet might look like this: • /* My First StyleSheet */ • BODY { • background-color : blue; • font-family : Georgia, serif; color : white; } • H1 { • font-family : Verdana, sans-serif; font-size : 2em; }
- 8. CSS • As you can see, the format of a stylesheet simply attached certain styles to a particular HTML tag. From the above, you can see that all H1 tags will be in the font Verdana at twice the size (em) of the default font.
- 9. Rules and Stylesheets • A rule is a statement about one syllogistic aspect of one or more elements • A stylesheet is a set of one or more rules that apply to an HTML document. • EXAMPLE: – H1{color:green} – The rule above sets the color of all first-level headings (h1 – A style sheet is a set of one or more rules that apply to an HTML document.
- 10. Anatomy of a rule • A rule consists of two parts: – Selector - the part before the left curly brace – Declaration - the part within the curly braces
- 11. Anatomy of a rule • The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration • The declaration is that part of the rule that sets forth what the effect will be. In the example above, the selector is h1 and the declaration is "color: green."
- 12. Anatomy of a declaration • A declaration has two parts separated by a colon: • Property - that part before the colon • Value - that part after the colon
- 13. Anatomy of a declaration • The property is a quality or characteristic that something pos • The value is a precise specification of the property. In the example, it is "green," but it could just as easily be blue, red, yellow, or some other color.
- 14. Complete diagram of a Rule • Example”