Download
1 / 50
500 likes | 587 Vues
Cascading Style Sheets (CSS). Cascading Style Sheets. With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached the creative limits of HTML.
E N D
Cascading Style Sheets • With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached the creative limits of HTML. • More control over appearance of web documents was expected by frustrated graphic artists, who were used to the wider range of control that they had with traditional media. • Since style sheets were a familiar tool to printers and print designers, they were a natural way to add more control and functionality to HTML.
Cascading Style Sheets (continued) • A style sheet is a way of specifying details about the appearance of a document. • We can specify such things as font colour, size, and face, like we can with the <font> tag. • Style sheets are one of the technologies that make up the concept known as DHTML.
Cascading Style Sheets (continued) • With CSS we can control a large number of different kinds of properties, including font properties, text properties, colour properties, and margin and border properties. • Important to DHTML, we can use also style sheets to control the positioning of elements. • Many of the details of style sheets are for the use of graphic designers. The features of style sheets that we will focus on as web programmers involve setting common tag properties, and positioning.
Cascading Style Sheets (continued) • Style sheets allow us to associate a style (collection of properties and their values) with most of the HTML tags. • This means that we can specify the h1 tag, and define a style that makes all h1 tags a certain colour, and size, etc. • Then we just have to use the tag normally, and it automatically has the defined properties.
Cascading Style Sheets (continued) • Style sheets give us a range of capabilities. • We can choose the level of effect, from a separate file that can be applied to all the pages of a site, down to a style that only applies to a particular word in a particular paragraph.
What kind of properties can we control? Some common properties that we can control with style sheets are: • Font (size, weight, family) • Text (decoration, capitalization) • Background colour and text colour • Borders and Margins (size, style) • Positioning (relative and absolute)
CSS Rules • CSS is a collection of rules. • These rules can be found in one of three places: • Inline, inside a particular HTML tag. • Embedded, in the head of a page. • External, in a separate file.
CSS Rules (continued) • Embedded and external rules have a specific, easy-to-learn syntax: selector { property : value; } • The selector is the tag or name that the rule applies to. • The property is the name of the property we want to set. • The value is one of the possible settings allowed for that property.
CSS Rules (continued) • In the following example, h3 is the selector, color is the property, and #FF0000 is the value. h3 { color : #FF0000; } • Note: h3 refers to the <h3> tag, but the brackets are never used when specifying styles. • Note: quotes are never used when specifying embedded or external styles. • Note: properties are case-sensitive, and all use lower case.
Embedded CSS: example 1 • <!-- css1.html --> • <html> • <head> • <title>CSS test</title> • <style type=“text/css”> h3 { color : #FF0000; } • </style> • </head> • <body> • <h3>This heading is red.</h3> • <h2>But this one is normal.</h2> • </body> • </html>
Embedded CSS: example 1 • An embedded CSS goes in the head of the document, and uses the <style> tag. • The type attribute is always set to text/css. • Any styles (rules) defined here apply to the whole HTML page. • The preceding code will cause all <h3> tags on the page to use red type.
Embedded CSS: example 2 • <!-- css2.html --> • <html> • <head> • <title>css example 2</title> • <style type="text/css"> • h3 { color : #FF0000; background-color : #FFFF00; } • </style> • </head> • <body> • <h3>This title is red, with a yellow background.</h3> • <h2>But this title is normal.</h2> • </body> • </html>
Embedded CSS: example 2 • You can define as many properties as you want for the same tag, separating them with semi-colons. • The preceding code causes all <h3> tags on the page to use red type, on a yellow background.
Embedded CSS: example 3 • <!-- css3.html --> • <html> • <head> • <title>css example 3</title> • <style type="text/css"> • h2, h3 { color : #FF0000; background-color : #FFFF00; } • </style> • </head> • <body> • <h3>This title is red, with a yellow background.</h3> • <h2>Now this title is red, with a yellow background too.</h2> • </body> • </html>
Embedded CSS: example 3 • You can define the same properties for as many tags (selectors) as you want. • The preceding code causes all <h2> and <h3> tags on the page to use red type, on a yellow background.
Embedded CSS: example 4 • <!-- css4.html --> • <html> • <head> • <title>css example 4</title> • <style type="text/css"> • h3 i { color : #00FF00; background-color : #0000FF; } • </style> • </head> • <body> • This text is <i>normal</i>. • <h3>This text is <i>different</i>.</h3> • <h2>This text is <i>normal</i> too.</h2> • </body> • </html>
Embedded CSS: example 4 • You can define a context for a style. This means that a style is only applied under given circumstances. • The preceding code causes all <i> tags to use green type on a blue background, but only when inside an <h3> tag. Otherwise they work normally.
Defining a class • In addition to using tags as selectors, we can create a style (collection of properties and their values) and give it an arbitrary name that we choose. • We can then use this name, called a class, anywhere we want on the page, including inside most tags. • The following code creates a class called fancy, which can then be used to modify all tags it is used in. • We use the class attribute of the tag to reference the desired style. • We must precede the class name with a period when we define it, but not when we use it.
Defining a class • <!-- css5.html --> • <html> • <head> • <title>css example 5</title> • <style type="text/css"> • .fancy { color : #FF0000; background-color : #FFFF00; text-transform : capitalize; font-weight : bold; font-family : arial, courier; } • </style> • </head> • <body> • <p>test with normal settings</p> • <p class="fancy">test with fancy settings</p> • </body> • </html>
Defining a class • In the following example, note that we can use the defined class in most tags, and we can use it as many different times as we want.
Defining a class • <!-- css6.html --> • <html> • <head> • <title>css example 6</title> • <style type="text/css"> • .fancy { color : #FF0000; background-color : #FFFF00; text-transform : capitalize; font-weight : bold; • font-family : arial, courier; } • </style> • </head> • <body> • <p>test with normal settings</p> • <p class="fancy">test with fancy settings</p> • <h2 class="fancy">test with fancy settings</h2> • <h2>test with normal settings</h2> • <ul class="fancy"> • <li>test with fancy settings</li> • </ul> • </body> • </html>
Defining a class • We can also use a class that we have defined in any particular place we want, using the <span> and <div> tags. • The <span> tag has no properties of its own. • The <div> tag leaves a line break above and below it, like the <p> tag does.
Defining a class • <!-- css8.html --> • <html> • <head> • <title>css example 8</title> • <style type="text/css"> • .style1 { color : #FF0000; font-weight : bold; font-family : arial, courier; } • .style2 { color : #00FF00; font-style : italic; font-family : courier, arial; } • </style> • </head> • <body> • This text is normal, but <span class="style1">this text changes</span> • and now it's <span class="style2">different</span>.<br> • This text is normal, but <div class="style1">this text changes differently</div> and now it's normal. • </body> • </html>
Defining an inline style • We can also specify a style for just one particular use, in one particular tag. • This is called an inline style, and uses the style attribute of the tag. • The syntax is slightly different. • We use the style attribute, and add a quote-enclosed list of property:value pairs, separated by semi-colons.
Defining an inline style • <!-- css9.html --> • <html> • <head> • <title>css example 9</title> • </head> • <body> • <p>This paragraph is normal.</p> • <p style="font-weight : bold; font-size : 30px">This paragraph is different.</p> • </body> • </html>
Defining an external style • If we take the same style description that we would normally put in the head of a document, we can also create a separate file to contain our style description. • The advantage of this is that we can then refer to it on all of our page, and have a site-wide consistent style. • Any changes can be made once, and automatically apply to the whole site.
Defining an external style • We just have to create a plain text file in notepad. • The content should be just the same as you would put in an embedded style in the head of a document, without the <style> and </style> tags. • By convention, we should store the file with a .css extension, but this is not mandatory. • We use the <link> tag in the head of the document to tell the browser which style sheet to use.
Defining an external style • // css10.html • <html> • <head> • <title>css example 10</title> • <link rel="stylesheet" type="text/css" href="stylesheet.css"> • </head> • <body> • <h2>This heading is different.</h2> • <p class="style1">This paragraph is different.</p> • </body> • </html> • <!-- stylesheet.css --> • .style1 { color : #FF0000; font-weight : bold; font-family : arial, courier; } • h2 { text-transform : capitalize; }
Pitfalls • CSS implementation by the browsers varies quite dramatically, and cross-browser testing of all CSS features that you use is essential. For example; Further experimentation shows that Netscape 4.7 does not implement most of the CSS style properties within tables, whether the style specified is inline or embedded.
Pitfalls • <!-- css7.html --> • <html> • <head> • <title>css example 7</title> • <style type="text/css"> • .fancy { color : #FF0000; background-color : #FFFF00; text-transform : capitalize; font-weight : bold; • font-family : arial, courier; } • </style> • </head> • <body> • <table class="fancy" width="30%" border="1" cellpadding="0" cellspacing="0"> • <tr> • <td>cell 1</td> • <td>cell 2</td> • </tr> • … rest of code …
Priority rules • Cascading style sheets get their name because the order of priorities for the different styles “cascades” from one level to the next. • When more than one rule applies, the rule sets will be mixed. • If two rules govern the same property, a more specific rule will take precedence over a more general one, as the following example shows.
Priority rules • <!-- css12.html --> • <html> • <head> • <title>css example 12</title> • <link rel="stylesheet" type="text/css" href="stylesheet2.css"> • <style> • h3 { font-weight : bold; font-size : 14px; font-family : arial, courier; color : #FF0000; } • </style> • </head> • <body> • <h2>This is heading #1</h2> • <h3>This is heading #2</h3> • <h3 style="font-weight : lighter; font-size : 25px; font-family : courier, arial;">This is heading #3</h3> • <h3 style= "color : #FFFF00; font-size : 40px">This is heading #4</h3> • … rest of code…
Priority rules • // stylesheet2.css • h2, h3, h4 { font-weight : bold; font-size : 60px; }
Priority rules • A look at the results of the preceding example show that heading #1 receives all its properties from the external style sheet. • The rest of the headings are a mix of properties. If they are specified at a lower level, those are used. If not, higher level properties are used. • The order, from highest level to lowest priority is • Inline • Embedded • External
Priority rules • The order of priority can be overridden by using the !important modifier, which causes that property to be used, no matter what its level is. (currently only works on IE) • In this example, the font-weight specified in this external style sheet will always be used, even if font-weight is also specified in an embedded or inline style for any of the heading sizes listed; <!– stylesheet3.css --> h2, h3, h4 { font-weight : bold!important; font-size : 60px; }
The fun stuff • One of the additions to CSS is the ability to state exactly where on a page content is placed. • We also have the ability to change this placement while viewing a page, which is one of the aspects of Dynamic HTML.
Defining an ID • In addition to defining a custom style (class) using dot notation e.g. .highlight { background-color : #FFFF00; } we can also define a custom style called an ID, with the following notation; #warning { color : #FF0000; font-weight : bold; }
Defining an ID • The difference is that an ID (like a person’s ID) is unique. • When we define an ID, it is intended for one-time use on a page, whereas the class is intended to be used many times on a page or group of pages. • To use an ID, we use the id attribute of a tag, instead of the class attribute.
