- TOPICS:
- Creating a Basic Webpage with CSS
- HOMEWORK: Do the questions below as this week's homework;
- QUESTIONS: Here are some questions to help guide you through this weeks' material—chapters 3, 5, and 7 in the text on CSS:
- How many fonts can you specify for the font-family CSS property?
- According to the book (chapter 5), what are the four most widely supported fonts on computers?
- Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
- What would the purpose of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
- What is the difference between an internal and an external style sheet with regard to where they are typed?
- What are two ways to link style sheets to a web page?
- What is a CSS rule?
- What are the two main parts of any CSS rule?
- What is a selector in CSS?
- Other than tag names, what are two other types of CSS selectors?
- What are two differences between IDs and Classes?
- What character must be typed before the name of an ID? Before the name of a class?
- How do you apply a class or an id so that the styles show up in a page?
- Name five (5) examples of CSS properties that we have used in class.
- Name three (3) examples of CSS selectors that we have used in class.
- What does the <div>≶/div> tag pair do?
- How many different types of borders can you create with CSS? What are they?
- What is padding?
- Name three (3) places in a web page that you can set a background color.
- Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.
- INTRODUCE —Creating a simple page layout using CSS: In this week's class, what I did was quickly lead you through steps to creating a very simple page using only CSS. It is very similar to something we did in class a couple weeks ago, so hopefully it wasn't completely unfamiliar to many of you. Some of the concepts we are covering are not easy to grasp at first, but once you start doing so, I believe they will become more and more obvious and, therefore, much easier.
- As we have learned up to now, we began with the basic elements of any webpage:
- the DOCTYPE:The DOCTYPE declaration defines the document type, which means what type of code you will be typing. For the purposes of this class, we will be typing XHTML strict, and the particular DOCTYPE declaration for this kind of document is:
- the Head section: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This section is where information about the document might appear: the subject (title), the date, who created it, and various other data about the document that follows. - the Body section:This section is where all the information of the document itself appears: all the text, the images, and any other multimedia content is referenced here between the body tags.
-
In the following step, I typed some basic text elements into the document: a heading, a couple of paragraphs, and a few links to other pages (I didn't demonstrate the other pages, but they would have been created similarly).
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body>
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
<h1>Example Heading Here>/h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>
<p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.</p>
</body>
</html> -
After this, I wanted to label each part of the body of the document that I had typed. This is done for two reasons: later on, after some time has passed, I might forget what I had intended, so typing myself some notes within the code is often very useful. Also, it helps me to organize the body into different sections in my own head so that later on I might be able to treat them differently. Usually, this is a very logical and straightforward process as follows:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body>
<!--
below here is
the menu/navigation
of the page
//-->
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
<!--
below here is
the main heading
of the page
//-->
<h1>Example Heading Here>/h1>
<!--
below here are
the paragraphs
of the page
//-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>
<p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>
</body>
</html>
-
Next, I create and formalize these sections that I have mapped out in my head by placing <div></div> tag pairs around each section. By doing so, I will be able to manipulate each section or division separately later on when working with CSS. Recall that these tags do very little on their own, so until we add the CSS, the appearance of the page will change very little:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body>
<!--
below here is
the menu/navigation
of the page
//-->
<div>
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
</div>
<!--
below here is
the main heading
of the page
//-->
<div>
<h1>Example Heading Here>/h1>
</div>
<!--
below here are
the paragraphs
of the page
//-->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>
<p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>
</div>
</body>
</html>
-
Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. Nonetheless, in this class, we continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
<style type="text/css">
body {background-color:#ffffaa;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
a:link {color:#000000;
text-decoration:none;}
a:visited {color:#660000;
text-decoration:none;}
a:hover {color:#000000;
text-decoration:underline;}
a:active {color:#ff0000;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
text-align:right;}
p {color:#666600;
font-family:Arial, Helvetica, sans-serif;
font-size:20pt;
line-height:9pt;}
text-align:justify;}
</style>
</head>
<body>
<!--
below here is
the menu/navigation
of the page
//-->
<div>
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
</div>
<!--
below here is
the main heading
of the page
//-->
<div>
<h1>Example Heading Here>/h1>
</div>
<!--
below here are
the paragraphs
of the page
//-->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>
<p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>
</div>
</body>
</html>
-
Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, the styles for the links, as well as the stlyes for the main heading and the paragraph.
All seems fairly ordinary; however, one thing you might have noticed that seemed peculiar: the fact that the heading is aligned to the right. There is a reason for that: in preparing this exercise for the class, I had an idea of how the page would end up looking. Since we are not yet done with the design, you do not yet have the whole picture of the site. Once complete, you will see that the best alignment for the heading is indeed to the right.
Next, we are going to design the menu bar at the top of the page. I have done this once before a few weeks ago in class. To do so, I created what is known as a CSS ID. An id is a selector that is NOT connected with any particular HTML tag. Therefore, when used, it does NOT style anything at first. It, along with CSS CLASSES have the unique ability to style ANY TAG YOU WANT. The difference between IDs and Classes is that IDs may only be applied once; whereas, classes may be applied as many times to as many different tags as you like. We will cover classes another week, so here we will stick our demonstration to IDs.
To make the explanation brief about why I chose one over the other, hwoever, I determined that since there would only be one menu bar, and since IDs may only be used once in a page, I thought my menu bar a perfect use for an ID. Let us first then type the styles that go with the ID selector:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
<style type="text/css">
body {background-color:#ffffaa;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
a:link {color:#000000;
text-decoration:none;}v a:visited {color:#660000;
text-decoration:none;}
a:hover {color:#000000;
text-decoration:underline;}
a:active {color:#ff0000;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
text-align:right;}
p {color:#666600;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
line-height:9pt;
text-align:justify;}
#menu {background-color:#ffcc00;
font-family:Courier, Courier New, monospace;
font-size:16pt;
font-weight:bold;
letter-spacing:5pt;
word-spacing:10pt;
padding-top:20px;
padding-bottom:20px;
padding-left:120px;
border-bottom-width:10px;
border-bottom-style:dashed;
border-bottom-color:#000000;}
</style>
</head>
<body>
<!--
below here is
the menu/navigation
of the page
//-->
<div>
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
</div>
<!--
below here is
the main heading
of the page
//-->
<div>
<h1>Example Heading Here</h1>
</div>
<!--
below here are
the paragraphs
of the page
//-->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>
<p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.</p>
</div>
</body>
</html>
-
The next step is simple: all we have to do is APPLY the ID to an appropriate and particular tag below. You may ask, 'What makes a particular tag the appropriate one?' and my response would simply be that IDs are generally applied to <div></div> tags. Those tags below, as I have mentioned, do very little by themselves. They haven't done much to the way the page looks when viewed with the browser. They don't hold any particular set of instructions for the browser to format the page in any particular way. In a way they are blank tags put there for YOU, the designer, to format the way you want.
Let us look at it this way: we know that we want a menu bar at the top of the page. We also know that what we want in the menu bar are the links. Furthermore, in our code, the links are set between the <div></div> tags. That means that if I apply the menu id styles above to the <div></div> tags, then I will magically have my menu bar.
Great, so let's apply the ID to the tag. The way we do this is by setting an attribute within the <div></div> tag as demonstrated below (since our code is getting quite long, I am only going to put the necessary tags below each time from now on instead of all of it each time I need to modify it):
<body>
<!--
below here is
the menu/navigation
of the page
//-->
<div id="menu">
<a href="one.html">one</a>
<a href="two.html">two</a>
<a href="three.html">three</a>
</div>
And that is that. Voila! We have a menu bar! Just save this code and refresh your browser.
-
But now I would like to further design the way the text in the body section looks; more specifically, the main heading and the paragraphs. What I would like to do is to move them around on the page into EXACTLY THE SPOT THAT I WANT, and the only way to do this is to create even more IDS that I will apply to the <div></div> tags:
<style type="text/css">
body {background-color:#ffffaa;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
a:link {color:#000000;
text-decoration:none;}
a:visited {color:#660000;
text-decoration:none;}
a:hover {color:#000000;
text-decoration:underline;}
a:active {color:#ff0000;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
text-align:right;}
p {color:#666600;
font-family:Arial, Helvetica, sans-serif;
font-size:20pt;
line-height:9pt;}
text-align:justify;}
#menu {background-color:#ffcc00;
font-family:Courier, Courier New, monospace;
font-size:16pt;
font-weight:bold;
letter-spacing:5pt;
word-spacing:10pt;
padding-top:20px;
padding-bottom:20px;
padding-left:120px;
border-bottom-width:10px;
border-bottom-style:dashed;
border-bottom-color:#000000;}
#title {position:absolute;
width:200px;
height:150px;
top:50px;
left:120px;
z-index:2;}
#paragraph {position:absolute; width:500px;
top:170px;
left:350px;
z-index:3;}
</style>
And these can be applied just as the previous id, only to the other two <div></div> tags, the title to the heading, and the paragraph to the paragraphs.
The basic document structure is as follows:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
