Vocabulary:
CSS - The Shorthand for the language / syntax for Style Sheets and Cascading Style Sheets.
Style Sheet - A set of code contained locally within the page, or in a seperate .css file that functions to create stylized effects on your page. You can create basic interactive and dynamic elements on your page utilizing CSS.
Cascading Style Sheet - Also called a Style Sheet. This is the full, formal, name for this design element of a web page.
Tags: There are no real 'tags' for CSS, but any of your HTML tags can be used within your style sheets.
Introduction to CSS
I'll start by saying this much. There are books out there that you can find that deal specifically with using CSS, and they will be far more extensive than what I am going to be showing you here.
There are three different methods of applying CSS to a web page. Two of them are Localized, and the third is External.
I will only be offering an explanation of how to incorporate CSS locally into your page in one of these methods to add a more flavorful element to your web page, since this guidebook is only dealing with the basics.
For more advanced lessons relating to Style Sheets, I would strongly advise looking for a book that deals specifically with learning CSS. There are many of them available out there and all of them will be more in depth than this chapter.
Lesson #1 - Utilizing a Local Style Sheet
Okay, for this lesson we're only going to be going over the basic elements of including CSS to control your background, links, and font styles.
For this, we do use one tag that is meant to indicate to your browser what our code is. You can just copy this example format straight into your page.
---------------------------------------------------------------
<head>
<title></title>
<style> <!--This marks the beginning of your Style Sheet-->
Body {
Background-color: #xxxxxx;
font-family:Verdanna, Serif;
color: #xxxxxx;
}
a:link {color: #xxxxxx;}
a:active {color: #xxxxxx;}
a:visited {color: #xxxxxx;}
a:hover {color:#xxxxxx; background: #xxxxxx;}
table {background-color: #xxxxxx; border-color: #xxxxxx;}
.page {background-color: #xxxxxx; border-color: #xxxxxx;}
</style>
<!--This marks the end of your Style Sheet-->
</head>
<body>
---------------------------------------------------------------
Now, we'll be using this example above for every reference to CSS in this chapter, one element at a time. Note, that all colors MUST be expressed in their HexDec value for the CSS to function. Personally, I'm not sure if anything else will work, but this is your best bet here.
The first thing I usually start with in CSS is setting up the Body style, which effects everything contained within the body tag of your page. The elements of this style in the above sample determines the Background color, Font, and Font Color for all normal text on your page.
Serif or San-Serif must be included as well, in case the person doesn't have the font you specify for your page installed. It is also a good idea to choose a font and color theme that is easy to read.
The 'Background-color: #xxxxxx;' portion of the sample above sets the page's background color for the Body portion, while the 'color: #xxxxxx;' sets the color of the non-link font. Font-family sets the font style for your page, selecting from left to right based on if the viewer has that font on their computer.
As previously mentioned, all colors should be expressed in HexDec value, and I know we went over how to use MS Paint to determine the hexdec value of a color in the beginning when we were using our HTML tags to set the background and other page colors.
It is also important to remember to close each notation, and for CSS it utilizes the ' { ' to open a notation and ' } ' to close one.
The next few lines of CSS are meant to customize the color of links in various states, creating a more streamlined page. It is important to make the color of the link DIFFERENT from your normal font, and equally important to choose a color that stands out on your page.
a-link = The passive link on your page that hasn't been clicked yet. [Default is that annoying and ugly blue color]
a-active = The color of the link when you click [and hold] the mouse button.
a-visited = The color of the links that have already been clicked on by the visitor to your website. [Default is that ugly purple color]
a-hover = This is the link when a person has their mouse pointer over it.
Utilizing the above CSS sample, you can utilize a number of different interactive link effects, such as it flashing a different color when clicked, or even a highlighting-effect when the mouse pointer moves over it.
The last element of the sample above are the table and .page indicators. I used these to create different colored borders for my table and the full page. Additionally, you can use these to create multiple different backgrounds.
In my original code, I just kept the single background, but was also playing around with different changes here and there to create slight differences in the background of different areas of the page.
YOU ARE READING
How to Code - A Beginner's Guide
RandomThis guidebook was compiled from most of what I've learned over the years. Since I'm writing this one with the complete newbie in mind, any of you who have a fair degree of prior knowledge and skill in the area of web programming should probably loo...
