LEARNING CSS.

Im not an expert at CSS, but if I can do this simple CSS page you see before you, you can also. It will take a while to learn, so better get started. An HTML document Page has one invisible page running it set up in notepad. A CSS document Page has two invisible pages running it set up in notepad, The second one is called CSS or Cascading Style Sheets. With a CSS document Page we can take out most all the HTML tags and run them from the CSS set up in our notepad.

LETS LOOK AT THE NOTEPAD RUNNING THIS PAGE This is what the HTML start tags looks like, running this page, its set up in notepad. This is only the starting tags for instruction. The HTML tags here need the end tags for this code to work. We dont need to try and remember it. The trick is copy and paste. But we do need to try and understand what each tag works, or what its job is. These HTML tags are the same as the ones explained in LEARNING HTML. However most of the HTML tags are removed in this face document, and have been replaced with CSS, such as; CENTER, FONT, BOLD, ITALIC, FONT SIZE, FONT COLOR. All of these tags are controlled inside the CSS document. This document will show you how to do it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>LEARNING CSS</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META NAME="KEYWORDS" CONTENT="html tags, css tags, how to do html, how to do css"> <META content="MSHTML 6.00.2800.1126" name=GENERATOR> <style type="text/css"> <!-- .newstyle { font-family: Comic Sans MS; font-weight: bold; } --> </style> </head><A NAME="(top)"></a> <LINK media=all href="LEARNING CSS_files/css.css" type="text/css" rel=stylesheet> <SCRIPT language=JavaScript src="LEARNING CSS__files/" type="text/javascript"> </SCRIPT> <div align=right> <table border="2" cellspacing="3" cellpadding="3" bgcolor="lightblue" width="80%"> <tr> <th bgcolor="lightyellow"> <pre>

<h2 class="newstyle2">LEARNING CSS.</h2>

<h5 class="newstyle5"> This is the HTML tags all the way to the first heading, anyone who can remember every jot an tittle of HTML should be working for Bill Gates. We need the end tags(below) to make it work, our text would go here. all of the CENTER, FONT, BOLD, ITALIC, FONT SIZE, FONT COLOR. tags have been removed and replaced with the H tag, and are controlled inside the CSS document.</h5>

</pre></th></tr> </table></div></html>

The HTML code above, that is what the HTML code looks like running this page. However there is another code written in another NOTEPAD named CSS, in the background running this page also. Sometimes we may run into a CSS document with a different name other than CSS,

<link rel="stylesheet" type="text/css" href="LEARNING CSS_files/css.css" />

Notice above in red; This is the HTML code name tag stating where the css document is located. Notice above in the tag; (LEARNING CSS_files/css.css) This is the name of the CSS file. There is a Notepad document in LEARNING CSS_files, named css. If we open either of the notepads and change anything, even one period, it will affect the face page.


Have you ever downloaded something off the internet and every time there is a little file that comes with it that follows it around, even when we delete one of them, they both will delete together. If we try to cut and paste one of them the other will follow it.

For example, if we download a page named My Documents, then a file named My Documents_files will follow it. Then if we open up My Documents_files we will find a file named; css. Cascading Style Sheets Document, or external style sheet. It contains the 2nd NOTEPAD to help run a page or document.
The css codes will probably be different for each document. its according to the writer or webmaster, who wrote the document. We can change the codes to manipulate the document text or cells; But be careful of what we change.


<link rel="stylesheet" type="text/css" href="LEARNING CSS_files/css.css" />

Notice above in red; This is the HTML code name tag stating where the css document is located. Notice above in the tag; (LEARNING CSS_files/) This is the name of the CSS file. (css.css.) There is a document in LEARNING CSS_files, named css.

LETS OPEN UP THE CSS NOTEPAD FOR REVIEW.

This is what the CSS notepad looks like running this page.


BODY { background-color: beige; background-position: ; color: #000000; font-family: Comic Sans MS, Sans-Serif; font-style: italic; font-weight: bold; text-align: center; margin: 0px; padding-left: 25px; padding-right: 0px; } TABLE { display: inline; text-align: center; } TABLE#content { background-color: lavenderblush; border-bottom-style: none; border-left-style: none; border-right-style: none; height: 200px; left: 15%; position: absolute; top: 0px; width: 90%; } TABLE#sidebar { background-color: lavenderblush; border-bottom-style: none; border-left-style: none; height: 750px; left: 0.1%; position: absolute; top: 0px; width: 20%; } TABLE#sidenav { height: 0px; left: 0%; position: absolute; top: 0px; width: 20%; } TABLE#subbar { background-color: lavenderblush; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; height: 100px; left: 5%; position: absolute; top: 0px; width: 100%; } TABLE#topbar { background-color: lavenderblush; borders: 5px; height: 20px; left: 5px; position: absolute; top: 0px; width: 95%; } TD class=link { background-color: pink; height: 30px; padding-left: 0px; padding-right: 0px; td.link1 { background-color: lightcyan; height: 30px; width: 160px; } TD.link2 { background-color: beige; height: 30px; width: 160px; } TD.link3 { background-color: plum; height: 30px; width: 160px; } TD.link4 { background-color: peachpuff; height: 30px; width: 160px; } TD.link5 { background-color: lavender; height: 30px; width: 160px; } TD.link6 { background-color: lightyellow; height: 30px; width: 160px; } TD.link7 { background-color: rosybrown; height: 30px; width: 160px; } TD.link8 { background-color: ghostwhite; height: 30px; width: 160px; } TD.link9 { background-color: lavenderblush; height: 30px; width: 160px; } TD.link10 { background-color: cornsilk; height: 30px; width: 160px; } TD.link11 { background-color: moccasin; height: 30px; width: 160px; } TD.link12 { background-color: wheat; height: 30px; width: 160px; } TD.top { vertical-align: top; } :link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */ H1 { color: #000000; font-family: Comic Sans MS, Sans-Serif; font-size: 16pt; font-style: italic; font-weight: bold; text-align: center; } H2 { color: purple; font-family: Comic Sans MS, Sans-Serif; font-size: 14pt; font-style: italic; font-weight: bold; text-align: center; } H3 { color: black; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } H4 { color: red; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } H5 { color: green; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } H6 { color: purple; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle { color: #008000; font-family: Comic Sans MS; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle1 { color: black; font-family: Comic Sans MS, Sans-Serif; font-size: 16pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle2 { color: purple; font-family: Comic Sans MS; font-size: 12pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle3 { color: black; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle4 { color: red; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle5 { color: green; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } .newstyle6 { color: purple; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; } p { color: navy; font-family: Comic Sans MS, Sans-Serif; font-size: 10pt; font-style: italic; font-weight: bold; text-align: center; }


Copy and paste the codes above. We dont need to remember all that, think of it as; Someone tore your computer apart, you dont have to know how to make the pieces, they are all laying there, all you have to do is put it back together.

WHAT DOES THE CSS CODES DO? CSS TAG CODES. The document face page will default to the CSS document. The CSS will control the HTML tags inside the face page. The HTML tags in the face page must have a start and end tag. Then we can change the CSS instead of perhaps hundreds of HTML tags.

Body tags <body text="purple" vlink="red" alink="red" bgcolor="lightyellow"> </body>


Table Table must have an open and close tag. <table border="2" cellspacing="3" cellpadding="3" bgcolor="lightblue" width="80%"> </table>

The document will default to CSS, CSS will control all the table cell.

TABLE#sidebar TABLE#sidenav <TABLE id=sidebar height=56> <TABLE id=sidenav> links go here in between tags </table>

TABLE#subbar
TABLE#topbar

Topbar is not used in this document. However if its used, it may be in a table cell, so it will need the start and stop tags.

TD class=link TD.link2 to TD.link12

TD class=link controls the color width and height and text inside the TD and /TD tags. Used to control colors inside the sidebar, or topbar. Or anyplace TD class=link is installed. Set up the CSS as shown in the link above,(click on the link above). then set up the tags below in the face page of our document.
<TABLE id=sidebar height=56> <TABLE id=sidenav> <tr><TD class=link3><A href="my homepage.htm#"(top)" >MY HOMEPAGE</a></tr></td></table> We have <tr><TD class=link3> set up in the side bar to go to bottom of page. it is also used at the bottom to return to top. Here is the code install it in your side bar. The TD TR tag may give problems, if installed in another place. <tr><td><TD class=link3><A href="LEARNING CSS.htm#(bottom)"> Go to the bottom</a> We need this tag at the bottom. <A NAME="(bottom)"></a> If we reverse the tags, just reverse (bottom)(top)

:link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */

The above CSS will cause your links to change color when some one hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code is that it is important that the style declarations be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers.
thanks to Stefan Mischook for the update on this tag.

The <H> tag is set to form the size and color of the text. H1 H2 H3 H4 H5 H6 Are all set the same, except H1 and H2 are set with the font sizes bigger for headings. H1 is set for header, H2 is set for header, H3 is set for black, H4 is set for red, H5 is set for green, H6 is set for purple. p is set for blue, gives us one more color. All are set for Italic bold and center. We can change them as needed. However in order to make the tags work in our face page we need to add two more tags.
Here is the code, place it inline(in document), between HEAD AND /HEAD

<style type="text/css"> <!-- .newstyle { font-family: Comic Sans MS; font-weight: bold; } --> </style>

Now add this tag to the text.

<H5 class="newstyle5">Text goes here</H5>

Now we need to add these codes inside the CSS document. .newstyle .newstyle1 .newstyle2 .newstyle3 .newstyle4 .newstyle5 .newstyle6 the newstyle tags code, boost the H tags and gives us more detail, such as colors, bold, italic, center.

<P> </P> Paragraph tags. p is set for blue, gives us one more color. We need to set it up in the CSS document, as shown. <P> text here </P> tag sets fonts size and colors. We can also; center, left, right our text. Change it in the CSS as needed. we can use it to make another text font color in our document. We can use it in the whole document if we want just one text color. Just use it on the start and end of each paragraph. <P> text here </P>
BACK TO TOP
Webmaster Email.
LEARNING HTML
LEARNING CSS
COLORS
BACKGROUNDS
FRAMES AND LINKS
MY WEBPAGE
SPAN TAGS
New River Cousins HOMEPAGE
APIANOTUNING.COM. PIANO TUNING HOMEPAGE
HTML ERRORS HAVE
BEEN REMOVED BY;
CSE HTML Validator.
Download a FREE evaluation version
.
Go to the bottom