Internet/Web Page Development I

Size: px

Start display at page:

Download "Internet/Web Page Development I"

Wesley Reynolds
7 years ago
Views:

1 Internet/Web Page Development I HTML/CSS Tutorial Four Internal Cascading Style Sheets Introduction Estimated time for completion: 2 hours Tutorial Topics Cascading Style Sheets You have been using inline styles, which seem to be incredibly cumbersome. The thought of having to do all that typing or copying and pasting throughout every document of a Web site is daunting. The use of internal CSS will make the task much easier. This exercise will cover the following concepts: Cascading Style Sheets Using inline CSS Using document CSS (also called embedded ) Combining inline and document CSS Class styles By using style sheets in HTML documents on the Web, authors can influence the presentation of documents without sacrificing device-independence or adding new HTML tags. CSS has various levels and profiles. Roughly speaking, desktop browsers implement level 1, 2, or 3. Other programs implement the appropriate profile for their platform cell phones, PDAs, televisions, printers, speech synthesizers. CSS Level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. CSS Level 2 revision 1 ( CSS 2.1 ) contains all of CSS Level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. As of June 2005, CSS 2.1 remains a Candidate W3C Recommendation. CSS Level 3 is under development as of June It includes all of Level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more. CSS Mobile Profile 1.0 is for devices such as mobile phones and PDAs. CSS Print Profile is still a draft. It is aimed at low-cost printers. CSS TV Profile 1.0 is for browsers that run on television sets. For the purposes of this course, we will focus on CSS Levels 1 and 2, which apply to Web browsers. Prepared by Paul Roberts (BLH edit) Copyright 2008 by Digital Communication Department. All Rights Reserved

2 Using inline CSS Up to this point you have been using inline CSS. Writing style code repeatedly for each paragraph <p> element as well as all other elements can be time consuming and tedious. However, the method is extremely powerful in terms of giving the designer control over how the Web site will look. As a reminder of inline styles, let's change the color of the <h2> element to dark green on both pages that we already have written. Open the index.html file and place your cursor in the <h2> tag. Make the following change: <h1> Bridges of the American West</h1> <hr /> <h2 style="color: darkgreen;">welcome to Bridges of the American West</h2> <p style="margin-left: 24px; margin-right: 24px;"> Now open the site_map.html file and make the same change. Load the index.html file into the browser and ensure that the secondary headline is green on both pages. This is an example of inline styles. Throughout this course, you will see the use of three ways of applying CSS to a Web site. The more specific the usage, the higher its priority in the pecking order. Here are the first two usage levels. We will cover the third one in a later tutorial. Inline This is placed as a property in specific tags, as you have already done. You can use the style property, the class property or the id property. This level has highest priority in cases where styles are defined from other levels. Document (or Embedded) This is nested within the <head> element by using the <style> element. Style definitions of various elements apply automatically throughout the document. Inline style definitions override those set in the document level. If you need to change an element style for certain instances of an element, you can either redefine it in a style property or apply a class style that you define in the style sheet. Using document (embedded) CSS Rather than placing the same style definition repeatedly in each instance of an element, let's put the definitions in the <head> element. Open the index.html file and remove all style definitions as follows: <html> <head> <title>bridges of the American West</title> </head> HTML/CSS Tutorial Four Internal Cascading Style Sheets (BLH edit) Page 2

3 <body style="background-image: url(images/beige011.jpg); margin: 36px;"> <body style="background-image: url(images/beige011.jpg); margin: 36px;"> <h1> Bridges of the American West</h1> <hr /> <h2 style="color: darkgreen;">welcome to Bridges of the American West</h2> <p style="margin-left: 24px; margin-right: 24px;">The American West is a rugged region covered with mountains, canyons, rivers, ravines. Perhaps more than other regions of the American landscape, the West posed problems for settlers as they attempted to traverse its varied terrain.</p> <p style="margin-left: 24px; margin-right: 24px;">Applying the best in human imagination and scientific knowledge, engineers have developed a vast network of highways and bridges to enable the easy movement of goods and travelers from coast to coast. This Web project tells about a few bridges of the western United States and the contributions they have made in the taming of the Wild West.</p> <p style="margin-left: 24px; margin-right: 24px;"><a href="html/site_map.html">site Map</a></p> </body> </html> Combining inline and document CSS Reload the file in your browser to ensure that no styles apply. Do the same thing with the site_map.html file. Use the browser to make sure no styles apply. Go to the index.html file and add a <style> element to the head. Declare the element, following it with a curly brace ({). Then list the properties and values in the same way you did inline. End each element with a curly brace (}). Here is how to do it: <html> <head> <title>bridges of the American West</title> <style type="text/css"> body { background-image: url(images/beige011.jpg); margin: 36px;} HTML/CSS Tutorial Four Internal Cascading Style Sheets (BLH edit) Page 3

4 h2 { color: darkgreen;} p { margin-left: 24px; margin-right: 24px;} ul { list-style-type: square;} </style> </head> Reload the page in the browser to see that the styles apply once again. Repeat the same procedure for the site_map.html file. You can accomplish it by copying the entire <style> element from the index.html file and pasting into the <head> element of the site_map.html file. Since the site_map.html file is in a different location than the index.html file (relative to the images folder), you will need to change the address to the background image so the browser knows where to find it. Check that file in the browser to see that the style reapplies. If it doesn't work, return to the code and debug it. You will notice the bullets in all the lists are squares. You want the nested lists to display circle bullets. You can override the document style by placing a style property in the <ul> tag of each nested list, like this: <ul style="list-style-type: circle;"> Class styles Try it in the first nested list under "Nature s Bridges" to see what happens. As you see, the inline style overrides the document style because the more local the style, the higher the priority. You could do the same thing in each of the nested lists, but that could become time consuming, especially if you decided to change the style of the bullet. Let's add a class style in the document style element, then call the class in the <ul> tags of each nested list. You begin a class style with a dot or period (.) character. Give it any name you want. It is advisable that you give it a name that will make sense. In this case, we will call it nested. The code looks like this: HTML/CSS Tutorial Four Internal Cascading Style Sheets (BLH edit) Page 4

5 <style type="text/css"> body { background-image: url(images/beige011.jpg); background-color: beige; font-family: arial, sans-serif; margin: 36px; } h2 {color: darkgreen;} p {margin-left: 24px; margin-right: 24px;} ul {list-style-type: square;}.nested {list-style-type: circle;} </style> Now move to the second nested list under Ancient/Medieval Bridges and call the class, using the class property in the <ul> tag. Here's the example: <ul class="nested"> Check the file in the browser. The first two nested listed should display circle bullets, if you did it correctly. If not, find the errors and make the corrections. Just for kicks, return to the class style definition in the head <style> element. Change the list-style-type from circle to disc. Save the file and reload it. Examine the browser result in the first two nested lists. Note that the first nested list remained a circle while the second one changed to a solid disc. This illustrates the convenience of using class styles inline rather than defining a style with the style property. Go back to the first nested list and change the <ul> code to match that of the second nested list. Also change the list-style-type value back to circle in the definition of the nested class style. Both of the first two nested lists should display circles. Call the nested class into each of the nested <ul> elements on the site_map.html page. Check your results against the following example. They should look the same. Assignment Complete the tutorial exercise on your local computer. Upload the files in their appropriate folders to your FTP site then the URL to the exercise's home page (index.html) to your instructor with the message that you have completed the work. HTML/CSS Tutorial Four Internal Cascading Style Sheets (BLH edit) Page 5

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style