By completing this practical, the students will learn how to accomplish the following tasks: Learn different ways by which styles that enable you to customize HTML elements and precisely control the formatting of a web page. Specify commonly used style properties such as precise font, size, color and other properties of displayed text and their associated values. Use external style sheets to standardize the style for all pages in a website. 1 Introduction In this practical, you experiment with a few styles, and get a glimpse of just some of the many style options Cascading Style Sheets or CSS affords you. A style is simply a set of formatting instructions that can be applied to a piece of text. There are three mechanisms by which styles can be applied to documents: Inline Style Sheets - The style can be defined within the basic HTML tags. Embedded Style Sheets - Styles can be defined in the <head> section and applied to the whole document. External Style Sheets - Styles can be defined in external files called style sheets which can then be used in any document by including the style sheet via a URL.. 1
1.1 Exercises 1.1.1 Embedding a Style Sheet within HTML document When you embed a style sheet, the browser will apply the style sheet s rules to the tags only on the page in which the style sheet declaration is inserted. You can apply CSS styles to any tag in a document. 1. The following is an example on how to set the colour of the heading text using CSS in an HTML document. 2. Line 3-5: You embed a style sheet, you need to insert the style sheet s rules between the start and end style tags (<style> </style>) within the header section. The type attribute in the <style> tag tells the browser the type of style sheet to expect. Line 4 contains rules that set heading level 1 (<h1>) to red colour. 3. Based on above style declaration, redefine the style attributes of the <body> tag. To do this, enter the above html tags into new file called Embed.html. Using any text editor such as notepad, declare the CSS styles for <body> tag that support following property values: o Font-family: Arial, Helvetica, Courier o Font-size:12pt o Font color: white o Background-color: #800000 2
To set multiple properties in a single rule, use the following form of style rule: Selector {prop1:val1; prop2:val2; propn:valn;} 4. Test your document in the browser. The following screen capture shows the effect of the embedded style on the Embed.html. 1.1.2 Attaching an External Style Sheet to HTML document 1. The CSS styles you ve created so far have only applied to one document. Internal style sheets apply only to the document in which they were created. Now, you ll learn how to create an external style sheet which contains the styles you defined in the document you created in before. 2. Rewrite the all the style sheet information in Exercise 4.1.1 in an external style sheet. Save your external file mystyle.css. Remember you no need to copy the start and end <style> tags. 3. Validate your external style sheet with the W3C CSS Validation Services at http://jigsaw.w3.org/css-validator/. 4. Create a new html file called external.html and use the <link> tag to insert external style sheet on to your document. The link tag must be written in the following way <link rel = stylesheet href= mystyle.css type= text/css > 5. Open your document external.html in the browser. The browser should display the effect of the embedded style same as the Embed.html in Exercise 4.1.1. 3
1.1.3 Defining Style Inline within HTML tags 1. With inline styles, you define a tag s style within the tag itself. Inline style is very useful for overriding inherited styles in external or embedded style sheets. The following HTML document included an inline style sheet that contains rule that displays all links without underlining them. <html> <head> <title>inline Style</title> </head> <body> <h1>book Selling</h1> <p> <a style = text-decoration:none href = http://www.abebooks.com >Abebooks.com </a> - This site offers new, used, rare books from a wide variety of independent booksellers</p> </body> </html> 2. Enter the above html and save the file as Inline.html. Modify and apply the rule to display the hyperlink text in red. Save your file again and open it in the browser. 1.1.4 Redefining HTML Tag Using Dreamweaver 1. In Dreamweaver, type the following text and save the file as MyCSS.html.This document includes several HTML elements paragraph, form and break rule. <html> <head> <title>guestbook Form</title> </style> </head> 4
<body> <form name="form" method="post"> Name: <input type="text" name="name" maxlength="20"> <br> Comments: <input type="text" name="comments" maxlength="50"> <input name="submit" type="submit" class="formbutton" value="submit"> </form> </body> </html> 2. Now, you will use the CSS Styles panel in Dreamweaver to redefine the style attributes of the <body> tag, which will apply a global change to the document. To open the CSS Styles panel, use Window > CSS Styles. 3. The CSS Styles panel has two views or modes. Select the Apply Styles radio button to apply custom or class CSS styles, and you may use the Edit Styles to make changes to styles you have applied to your document. In the CSS Styles panel, click the New CSS Style button (+) at the bottom of the panel to add new CSS style. 4. In the New CSS Style dialog box, for Type, select Redefine HTML Tag. In the Tag pop-up menu, select body. In Define In, select This Document Only. 5
5. Click OK. The CSS Style definition dialog box appears. 6. Set the following Type settings: o In the Font menu, select Arial, Helvetica, sans-serif o In the Size menu, select 14 pixels o In the Weight menu, select bold o In Color, click the colour picker, then use the eyedropper to select #FFFFCC 7. Save your file, and open it in the browser. The following is screen capture of expected output. 6
1.1.5 Creating Custom Style Using Dreamweaver 1. Custom (class) CSS styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. Classes add more flexibility to style rules in that a style rule can have multiple style declarations. 2. In this exercise, you will add a new custom class style to MyCSS.html file that you in the Exercise 4.1.4 before. 3. In the CSS Styles panel, click the New CSS Style button. The New CSS Style dialog box appears. 4. In the New CSS Style dialog box, for Type, select Make Custom Style (class). In the Name menu, type formbuttom. In Define In, select This Document Only. 8. Click OK. The CSS Style definition dialog box appears. Set the following properties. Save your file, and open it in the browser. o Font Color: White o Border-Left-Color: #ffffff o Border-Bottom-Color: #fbedbb o Border-Top-Color: #ffffff o Border-Right-Color: #fbedbb o Background-Color: #ff9900 7
9. In the document, select the Submit button to which you want to apply a CSS style. In the CSS Styles panel, select Apply Styles, then in the CSS Styles list, click the name of the style formbutton. 10. Save you file and then open it in the browser. The colour of the Submit button is changed as below: 8
1.2 Self-Review Questions 1. State whether the following are true or false. (a) Using the style element allows authors to use external style sheets in their pages. (b) The font-style property allows the developer to set text to none, italic or oblique. (c) In a style rule, a selector is either a single tag name or a list of tag names separated by commas. 2. Fill in the blanks for each of the following. a) The attribute specifies the background colour of the element. b) The inline style allows a developer to declare a style for an individual element by using the attribute in that element s opening HTML tag. c) While is a generic inline element that applies no inherent formatting, is a generic block-level element that applies no inherent formatting. 3. Although stylesheets have been a W3C recommendation for a while now, many browsers do not yet support then fully. How should a browser behave if it encounters formatting that it cannot handle? 4. Which of the following selections is the proper way to apply this CSS rule?.red {color: red} A. <P COLOR = red > B. <P CLASS = red > C. <P COLOR =.red> D. <P CLASS =.red> 9
5. Choose the CORRECT statements on Cascading Style Sheet (CSS). I. Each CSS property is followed by a comma and the value of the attribute. II. The inline style allows a developer to declare a style for an individual element by using style attribute in that element s opening XHTML tag. III. The class attribute allows more than one class to be assigned to an XHTML element. IV. The font-family attribute names specific font that should be displayed. A. I and II B. III and IV C. II, III and IV D. All of the above 6. External style sheets are saved with the extension. A. *.html B. *.txt C. *.css D. *.cs 7. Text style sheets use which of the following MIME types? A. image/gif B. text/javascript C. text/css D. text/html 8. What is the correct HTML for referring to an external style sheet? A. <style src= mystyle.css > B. <link rel= stylesheet type= text/css href= mystyle.css > C. <stylesheet>mystyle.css</stylesheet> D. <style class = mycss > 10