Here’s the lesson I’ve been waiting for. I need to get this down so that I can “recreate” my miserable Web site. For now we’ll begin Tutorial 7. In this tutorial we’ll design a Web site that will be easy to apply, change, and aesthetically interesting. It will provide a consistent look and feel across the Web site.
Begin by changing Astrotxt.htm to Astro.htm This is in the data files downloaded from our text’s Web site:
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology
A style is a rule that defines the appearance of an element in the document. A style sheet is the collection of styles. CSS (cascading style sheets) is the common language and rules that are followed; it augments html, but doesn’t replace it. There are three style types:
- Inline styles add styles to each individual tag within the html file. Good if you need to format just a single section in your Web page. <tag style=”style declarations”> Tag is the name of the tag, such as: <h1, p, etc.). Style declarations are the styles you’ll define for that tag, such as: font size, color, and type followed by a colon and the attribute’s value: attribute1:value1; attribute2:value2; etc.
- Embedded or global styles are applied to the entire html file, allowing the Web author to modify the appearance of any tag in the document. Good if you need to modify all instances of particular element in a Web page. <style type=”style sheet language”>style declarations</style> Style sheet language is the language of the css; the fault is text/css. The style declaration uses selector {attribute1:value1; attribute2:value2; etc} Selector identifies an element in the document, such as a header or paragraph. Attribute 1 is the first style attribute and value 1 is the value assigned to the first attribute, etc. The type property is not included because text/css is the default style language.
- Linked or external style sheets are a text file containing the style declaration. Styles for any tag in the html file is linked to the style sheet . Good if you need to control the style for an entire Web site.
We’ll practice with the linked style sheet. But first we’ll use an inline style for the initial <h1> tag. Insert the following in your Astro.htm:
<HR> <H1 style=”color:gold; font-family:sans-serif”>Astronomy</H1>
<P>Maxwell Scientific provides a wide range of astronomical products —
perfect for classroom demonstrations and projects. Choose from the finest equipment from Newton,<SUP>™</SUP> DC Optics,<SUP>™</SUP>
and StarVision.<SUP>™</SUP></P>
Now we’ll add an embedded style so that the style we just used for the <h1> header is applied to other <h1> headers. So we’ll need to insert a <style> tag within the head section of our html file. Here’s the syntax:
<style type=”style sheet language”>style declarations</style>
Style sheet language identifies the type of style language used in the document. There are several types of style languages, the most common, and default, is text/css.
Now delete the inline style we just created and enter the following above the </head> tag:
<HTML>
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<style>
h1 {color:gold; font-family:sans-serif}
</style>
</HEAD>
<BODY>
<CENTER><IMG SRC=”MWSLogo.gif”><BR>
<A HREF=”Astro.htm”>Astronomy</A>
<A HREF=”Chem.htm”>Chemistry</A>
<A HREF=”Elect.htm”>Electronics</A>
<A HREF=”Eng.htm”>Engineering</A>
<A HREF=”Physics.htm”>Physics</A></CENTER>
<HR>
<H1>Astronomy</H1>
Now apply the same declaration to a group of selectors, separated by commas. Enter the following to format all our headers the same:
<style>
h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif}
</style>
Now we will create an external style sheet. We’ll need to create a text file containing our style declarations, and then we need to create a link to that file from each page of the Web site. So now open a new blank document and enter the following, and then save it as mws.css Note that you don’t need <style> tags, just the declarations:
/* CSS Document */
h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif}
Note: Dreamweaver entered the /*CSS Document*/ into my file.
Now we have to link our Web pages to the style sheet. We’ll need to add a <link> tag to the head section of our html file. Here’s the syntax:
<link href=url rel=”relation_type” type=”link_type”>
Url is the url of the linked document. Relation_type establishes the relationship between the linked document and the Web page. Link_type indicates the language used in the linked document. In order to link to a style sheet, the value of the REL property should be “stylesheet” and the value of the TYPE property should be “text/css”.
Now delete the embedded style we entered earlier because we don’t need it, and enter the following before the </head> tag in Astro.htm:
<HTML>
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”>
</HEAD>
<BODY>
Now we’ll add the style sheet to the Chemistry page. Save Chemtxt.htm and save as Chem.htm and then add the same link to it as you did with Astro.htm:
It’s possible to link to other style sheets using @import. This would be added within the embedded <style> tags:
<style>@import url (stylesheet.css); style declarations</style>
stylesheet.css is the url of the style sheet file.
If you want to access a style sheet from within another style sheet, you add the command to your style sheet file:
@import url (stylesheet.css); styles
This allows you to easily combine different style sheets.
Note: If you’re using more than one style of CSS, inline style has precedence over embedded and external style sheets. Embedded has precedence over an external style sheet.
As a change is made to a style at one level, the changes are cascaded through to the other levels, this is cascading style sheets.
Now our text has us edit more code. In mws.css edit the style definition line:
/* CSS Document */
h1, h2, h3, h4, h5, h6 {font-family:sans-serif}
Now our text has us add <style> in astro.htm:
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”
<style>
h1, h2, h3, h4, h5, h6 {color:gold}
</style>
</head>
Now our text has us enter the following after the <link> tag of chem.htm:
<HTML>
<HEAD>
<TITLE>Chemistry products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”>
<style>
h1, h2, h3, h4, h5, h6 {color:red}
</style>
</HEAD>
<BODY>
Now we will change the default font color for our pages to green but leave the current header text color gold. Enter the following in mws.css:
/* CSS Document */
body {color:green}
h1, h2, h3, h4, h5, h6 {font-family:sans-serif}
***************
Save and check your work: Astro.htm
Trouble? Post a comment or email me and I’ll get back to you as soon as I can.
References
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology
So the only posts you’re likely to see here is my progress and what I’m doing. I just finished Intro to Linux and will soon begin Web Scripting and Intro to Database Management. I’m currently taking Algebra. Programming is something that I’ll need to practice frequently or I’ll forget commands and syntax, so I’ll keep working on Linux. I’ll post as I have time.
