Hi again everyone,
This week I am not assigning any homework for our next class, but you should already know about and have the study sheet for the midterm test which I will be giving to you next week. So, let me say that again:
There is no homework this week for you to do for our next class; however, don't forget to study for the test.
Please study hard the rest of this week, and please don't miss the next class. This upcoming exam is the 2nd most important grade of the term. I don't advocate missing sleep, or not eating, or not taking care of your life's necessities (family, work, etc.), but if there's ever a time to sacrifice a little bit while in school, mid-term time is certainly one of them. There will be two parts to the exam. One concerns the study sheet that I gave you, and the other is more practical, in which you will have to organize some code, and find and correct its errors. Therefore, if necessary, it is worth suffering a little by doing without an hour or two of sleep this week so you can get the stuff done and turned in to me on time.
Good luck, Carter-
- TOPICS:
- HOMEWORK: Make sure that you study. As mentioned above, this is the 2nd most important grade of the term.
- LINK Midterm Exam Study Sheet
*****Remember, this exam is the SECOND MOST IMPORTANT GRADE OF THE TERM.***** - INTRODUCE I:
- Cascading Style Sheets (CSS)—in this week’s class we saw the introduction of the issue Cascading Style Sheets used together with HTML in order to style the text and colors of a page. CSS works often in much the same way that the in-line HTML tags (<b>, <i>, <u>, <font>, etc.) do to bring some styling onto an otherwise dull page of text. For this reason and from this point on, CSS will completely supplant those in-line tags for our uses in this class. In-line tags are not considered proper when following strict XHTML guidelines (and as a result will not pass the test when the code is validated); therefore, our job is to determine how to best configure our pages without them. In other words, from this point on, we will no longer be using many of those inline tags, and heretofore use only CSS; thereby, at last adherely completely to XHTML Strict standards.
- What is CSS?
To begin with, CSS is another type of code used only to style a page of content (mostly text and images). It is used for two reasons.
-
First,
it is vastly more extensive and, thereby, flexible. There are many more aspects of style that you can control with CSS than without it, as you will find out in the weeks to come. You can therefore control the look of your pages much more thoroughly. As a result, you will have many more options of how to style a page, using your own design sense of how to emphasize various elements in the site. -
Second,
as it considers a web-site as a living, changing object rather than 100% complete and fully-formed when it is uploaded onto a server, it is much more efficient to use and, therefore, allows you to update your pages much more quickly and completely. - Where is CSS placed?
depending on what kind of CSS you are typing (yes, there is more than one kind), you will type it in different places. Up to this point, we have been typing our code in the <head> section of our document. When typed here, it is known as an embedded stylesheet.
- How is CSS used?
As we have been using it up to know, as mentioned above, we have been typing what is known as embedded stylesheets, but all types of CSS follow the same basic format.
In the past, we have styled our pages by using the in-line tags throughout our document to change the way the text looks. With an embedded stylesheet, we put all the styles into a central location embedded in the <head> section. That way, if ever we need to change something or update the page, all we must do is go to the <head> section at the very top of the document rather than go searching around all the code of the page to make the change. This is especially useful, if, like the mid-term project, we must type a long and complicated web-page filled with much text and a complex set of tables that we do not want to accidentally mess up.
As mentioned, the styles are embedded directly into the code in the <head> section of a document, and they are placed between a pair of <style> tags. This is the type of stylesheet that we looked at in last week’s class.
- In the first part of the class demonstration, we constructed a basic web-page with text only using only block tags, <h1>, <h2>, <p>. In some cases, we used these tags more than once each. We used the <h2> tag twice.
- In the second part of the demonstration, we created and applied the styles in an embedded stylesheet and applied them to the various block tags we used in the page. Where we used a tag more than once, such as the styles we attached to the <h2> tag, the styles were applied to each instance automatically by only typing them once.
- To create an embedded stylesheet we use the <style> tag pair.
- The <style> tag requires the <type> attribute with the value "text/css" applied.
- Inside the <style> tag pair, it is necessary to place a series of characters to convince the browsers to hide the code. While not strictly required anymore, in some old browsers, CSS code is not recognized and neither is the <style> tag. For this reason, when the code is read by these old browsers, it is mistaken for plain text and therefore displayed in the page, displacing all the actual content. Therefore, in order to prevent the browsers from doing this, it is necessary to disguise the code as HTML notes, notes that the writer of the code composes to himself or others who read the code when he wishes to identify it without having it appear in the page itself. To do this, you must type the following to open the notes: <!— — ; and the following to close the notes: //— —>.
- When typing CSS code, there are three (3) parts that makes up what is known as a style definition.
- the selector refers to the term that determines to which block of text or element the style will be applied, such as a heading or a paragraph;
- the property refers to the term that identifies which aspect will be styled, such as the size or color or typeface;
- the value refers to the term that supplies a particular quantity for a property, as the background-color property might have the value of red, or the width property might have a value of 500px;
- example:
selector property value
body { background-color : #aa0000 ;} - And, finally, why is CSS called Cascading Style Sheets? Where does the Cascading fit in? It is because CSS is implemented on three (3) levels. This is why it is called cascading, as it begins by adding style to the widest, most general location, and ends by adding it in the narrowest, most specific location. All three may be used together to style your pages in the most efficient and effective way possible.
-
linked/attached/external styles—First, for those styles that will be applied throughout your site—not only on a single page—such as a common background color, or a common set of margins, or link colors for all of the pages on your site, it is best to apply them to all pages at the same time, rather than on one page at a time. This is better because, for one thing, it is more efficient as all the styles are applied at once and centralized in one location; but by catching things in a single instance, it also prevents you from making more mistakes.
The more you have to type the more opportunities you will have for making errors. Therefore, since you will only have to type these styles in one place for the entire site rather than on every single page, your chances for making errors are greatly reduced. For such styles as these, the most general to be applied to all, or most, pages of your web-site, you will type on a single separate document. This document will only have CSS code in it, and it will be attached, or linked, to each of the pages that will receive the stylings that it dictates. This is called a linked or attached or external stylesheet, and the document gets the extension .css.
-
embedded styles—Second, for those styles that will be applied to only a single page—you will use what’s called an embedded stylesheet. If you have a single page in a multi-page web-site that is something of an anomaly in that it must be somehow and for some reason different from the other pages (must have a different background color, or have different stylings than other pages in your web-site, for example) then you will use this type of stylesheet for those styles that must be different. These are called embedded styles because rather than being typed in a separate .css document, they are typed, embedded, directly into the HTML & centralized in the head section. This type of stylesheet is meant to style a single page, which is what makes it ideal for a page that has a number of styles that are markedly different from the general styles placed on all the pages. It is also very efficient, as it places all the styles together in the head section.
-
in-line styles—Third, for those styles that occur only one time in one particular location in one page, we tend to use what are called in-line styles. These styles are applied directly into a particular HTML tag via the style attribute. They work very much the same as in-line tags do, but are much more versatile and thorough in what types of styling you may apply in that you can do much more with them. These styles are normally used for one-time styling. If you plan on using the same styles in more than one location, then in-line styles are probably not the right CSS to use.
- 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.
The basic document structure is as follows:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
- 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<br/>Heading<br/>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:#ffffaa;
text-decoration:underline;}
a:active {color:#ffffaa;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
line-height:30pt;}
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<br/>
Heading<br/>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;}
a:visited {color:#660000;
text-decoration:none;}
a:hover {color:#ffffaa;
text-decoration:underline;}
a:active {color:#ffffaa;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
line-height:30pt;}
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;
position:absolute;
width:100%;
height:25px;
left:0px;
top:0px;
z-index:1;}
</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<br/>Heading<br/>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:
<!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:#ffffaa;
text-decoration:underline;}
a:active {color:#ffffaa;
text-decoration:underline;}
h1 {color:#ffaa00;
font-family:Arial, Helvetica, sans-serif;
font-size:36pt;
letter-spacing:5pt;
word-spacing:10pt;
line-height:30pt;}
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;
position:absolute;
width:100%;
height:25px;
left:0px;
top:0px;
z-index:1;}
#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.
No comments:
Post a Comment