CSS:Basics
Which CSS?
There are 3 different ways to include CSS in your websites: Inline, Internal and External
(The example of External Style Sheets below have already been created- others have been added so show examples)
Inline Style Sheets: The STYLE attribute of HTML elements
Create the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>
CSS 1
</TITLE>
</HEAD>
<BODY>
<H1 style=
"font-family: Arial; color: green; font-weight: bold">
Section 1
</H1>
<P style="font-family: Courier; color: red">
contents of section 1
</P>
<H1 style=
"font-family: Arial; color: green; font-weight: bold">
Section 2
</H1>
<P style="font-family: Courier; color: red">
contents of section 2
</P>
<H1 style=
"font-family: Arial; color: green; font-weight: bold">
Section 3
</H1>
<P style="font-family: Courier; color: red">
contents of section 3
</P>
</BODY>
</HTML>
Here we see we have used Inline CSS as shown in previous chapters of the HTML] Workbook, to control several aspects of the font for both the headings and paragraphs in the form. However, you should also be able to see that the formatting commands to change the font size and colour are repeated over and over again.
This is increasing the size of the web page dramatically, and thus increasing download times and bandwidth usage.
- TIME TO PRACTICE
- Try the example above - experiment with different formatting commands.
Internal Stylesheets: The Style Tag
When using increasing amounts of CSS, instead of using the Inline version, a more productive approach is to use the Internal version of CSS.
Take a careful look at the code below. What differences can you see between the example above and the one below?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 1</TITLE>
<STYLE type="text/css">
h1 {font-family: Arial; color: green; font-weight: bold;}
p {font-family: Courier; color: red;}
</STYLE>
</HEAD>
<BODY>
<H1>Section 1</H1>
<P>contents of section 1</P>
<H1>Section 2</H1>
<P>contents of section 2</P>
<H1>Section 3</H1>
<P>contents of section 3</P>
</BODY>
</HTML>
Can you see that all the formatting commands have been removed from each individual tag, and are in the <HEAD> section of the web page?
Can you see how much re-typing of the same formatting commands has been saved doing it this way?
Not only does it save retyping, but it cuts down the number of mistakes made in retyping. Remember, syntax rules are strict and the web page will not render as you expect it to if even the smallest mistake is present.
This method means that we only need to define the styles once at the top of the page, then every tag of the same type is rendered with the same formatting commands.
BUT, if we have many pages, we need to include this section at the top of every page, and if a change is required to all the pages, we need to update every page.
- TIME TO PRACTICE'
- Create the example above and experiment with various CSS settings
External Style Sheets: The seperate CSS file
Create the following, and save it as MyStyle.css in a folder of your choosing. Create the following EXACTLY AS IT IS, NO NEED TO INCLUDE THE STANDARD WEB PAGE STRUCTURE IN CSS FILES.
h1 {font-family: Arial; color: green; font-weight: bold}
p {font-family: Courier; color: red}
Now create a webpage and save it in the same folder as your MyStyle.css file – doesn't matter what it's name is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS 1</TITLE>
<LINK REL="stylesheet" HREF="MyStyle.css" type="text/css">
</HEAD>
<BODY>
<H1>Section 1</H1>
<P>contents of section 1</P>
<H1>Section 2</H1>
<P>contents of section 2</P>
<H1>Section 3</H1>
<P>contents of section 3</P>
</BODY>
</HTML>
Pay close attention to the <LINK> tag – notice how you specify where the external cascading style sheet file is. Any other web pages you make can include this exact same <LINK> tag and be formatted exactly the same as each other. Any change to the entire site can be made in the CSS file and all pages will be updated.
TIME TO PRACTICE
Try the example above – experiment with different formatting commands.
More CSS
There are hundreds of formatting and other non-formatting commands that can be done in Cascading Style Sheets. You can find thousands of references to them on the Internet.
Matthew's Rule 12 – Use CSS effectively
If you need to use CSS commands in just one tag, use the style attribute of the tag. If you need to use the same styling in all occurrences of one tag, use the <STYLE> tag within the HEAD section to format all occurrences of the same tag in the same way. If you need to control style across many pages, use an external style sheet. Follow these rules for assessments or your grades may be reduced.
Finished Already?
Some further examples of simple CSS usage can be found at 09 - More Advanced CSS Examples
