Basics of Internal CSS


Introduction

In older forms of HTML, creators commonly added attributes to various tags throughout their HTML documents to control colour, alignment, placement, etc. Nowadays, particularly in HTML5, these page attributes are usually handled by Cascading Style Sheets (CSS) because CSS is so powerful and efficient.

The CSS notes for this course assume that you are using HTML5.

Be aware that CSS isn't just another kind of HTML. It builds on top of HTML rules and possibilities, creating additional possibilities while using additional CSS rules and syntax. I will explain a few CSS basics here.

Cascading Style Sheets may be inline, internal, or external.

For the purposes of this course, you should create internal style sheets. External ones are good too, if you understand how to use them. However, for the sake of simplicity, the focus of this course will be on internal CSS, leaving external CSS as an option for those of you who have worked to a more advanced level.

Internal CSS style sheets go in the head of the document (meaning between the <head> </head> tags at the top of the HTML). Create an internal style sheet in the head by starting with the following container tag:
    <style>
    CSS goes here
    </style>

Internal CSS is the easiest way to apply CSS rules to a page if you are a beginner. You only need to use one set of style tags per page; any and all additional lines of CSS would be added within that one set of style tags.

Putting your styles in an internal style sheet in the head using the <style> </style> tag is useful because you can then apply those styles to anything on that one HTML page.


Basic Page Colours and Fonts

Here is an example of CSS rules that control some basic page colour and font settings:

<style>

 body {
        background-color: #ffffff;
        font-family: Verdana, Helvetica, Arial;
        font-size: medium;
        color: #000000;
     }
     
</style>

The above example of CSS configures some default settings for the entire web page by starting with body and making the following settings apply to everything within the body tag.

Meanings of the above settings:
background-color   -   the background colour of everything in the body
font-family   -   the fonts preferred for use in the body
font-size   -   the default size of text in the body
color   -   the default colour of text in the body (note American spelling)
Possible values for each of the above properties are:
background-color:   can be set to
- one of 16 pre-set colour words: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
    for example: background-color: teal;
OR
- a hexadecimal colour code (starting with a # sign), like #ffffff or #cccccc or #000000. You can find charts of common hexadecimal colour codes at Webmonkey's RGB Colour Code Chart
    for example: background-color: #0000ff;


font-family:   can be set to any typeface name or type family name. However, different fonts (typefaces) are available on each computer, so the fonts preferred for use in the body are fonts widely available on many computers, namely, system fonts.
Often people make a general choice between using serif and sans-serif fonts.
Usually several typefaces are listed, in order of preference, including at least one font native to Macs and one to PCs:
    for example:  font-family: Verdana, Helvetica, Arial, sans-serif;
    for example:  font-family: Times New Roman, Times, Garamond, serif;


font-size:   the default size of text can be set to
- xx-small, x-small, small, medium, large, x-large, xx-large
    for example: font-size: x-small;
OR
- a number followed by a unit of measurement, like pt or px (you might want to use px for simplicity's sake in this course)
    for example: font-size: 125px; (which would be very large, like
this

color   -   similar to background-color, the default colour of text (note American spelling) can be set to
- one of 16 pre-set colour words: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
    for example:  color: maroon;
OR
- a hexadecimal colour code (starting with a # sign), like #ffffff or #ccffcc or #000000. You can find charts of common hexadecimal colour codes at Webmonkey's RGB Colour Code Chart
    for example:  color: #ffccff;   (a pink/lavender colour)

Comments within CSS style tags:

CSS comments start with a /* and end with a */
Everything in between is the comment text.

/* This is a comment in CSS. It is used between the style tags.
Comments are ignored by the browser, and are aimed at people.
This kind of comment, using the forward-slash and the *
can run to multiple lines. */

CSS comments are also useful for trying out different lines of CSS to see how they work. You can comment out one line in order to try the same property with a different value on the next line, like so:
 body {
 	/* background-color: #ffffff; */
 	background-color: #ccccff;
 	font-family: Helvetica, Arial;
 	font-size: medium;
 	color: #000000;
 }

Notice how the one line is commented, so it will not function at this time. The following line tests out a different setting for the background-color property.

HTML comments do not use the same characters as CSS comments do. Use CSS comments within CSS (between style tags, for example) and HTML comments in HTML (between body tags, for example).


Simple CSS Background Image:

The most simple way to load a background image using CSS is to use a line like this:

background-image: url(mybackground.jpg);
- where the image listed is in the same folder as the page this line of CSS is written on.

So integrate the above line with our other simple CSS rules by adding it into the code where we set the defaults for the body tag of a page. Adding this line creates a page with a background colour that is covered up by the image that gets loaded as a background image.
Covering the background colour is not a problem if you prefer the background image. Having both a background colour and image means that, if something goes wrong with the image and it doesn't load, the audience will at least see the background colour:


<style>

 body {
        background-color: #ffffff;
        font-family: Verdana, Helvetica, Arial;
        font-size: medium;
        color: #000000;
        background-image: url(mybackground.jpg);
     }
     
</style>

For a complete example (an "ugly" one, in this case) , see CSS Simple Background Image example here.
(For a quick view of the HTML source of the page linked to here, in Firefox you can press command+U. Some other browsers may have menu options to show you the HTML source.)


Example HTML5 page structure with CSS:

You can work from the proper DOCTYPE tag and HTML5 page structure with CSS for HTML5. It starts off with style tags, a body selector and declarations like above, and includes lines that set the various standard link colours.