CSS:Start
Introduction
Before we begin, I must point out that Cascading Style Sheets (CSS) is a massive topic – I could write several workbooks on this topic alone. This chapter will give you a basic overview of CSS, why it is useful, the various ways it can be used, and some simple CSS commands that should show the strengths of using CSS.
Which CSS?
The different types of CSS are Inline, Internal and External
(The example of External Stlye Sheets below have already been created- others have been added so show examples)
Why CSS?
Simple web sites consist of a few web pages. Complex, corporate sites consist of many hundreds of pages. In such a large organisation, on occasion, corporate logos and colour schemes change. When this happens, companies invest massive sums of money on "re-branding" – changing the entire look of everything used in the company that has its colours or logos. The cost involved is huge, but the time it takes to update all the tangible items that a company has is also overwhelming. A website with many hundreds of pages that needs to change the background image or colours on every page can take a massive amount of resource to accomplish.
What if all the colours, logos and formatting were stored in one document and all the web pages referenced that one document, so that all the colours are the same on every page, all the images are in the same place and the same on every page, and any time a change was required, you needed to update just one line in one file and the entire website was updated? The answer: Cascading Style Sheets. This is one of the more powerful features of CSS, the ability to have an external document that controls all the formatting, and referring to that document in any page you create. This is called an External Style Sheet, and we'll look at this later in this chapter. Before we get to external sheets, let's have a look at some of the things CSS allows us to do.
The Style Attribute of Tags
Create the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 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, especially as you can see that not much content exists on the final page. We can move from Inline Style Attributes of tags to a more productive form of CSS – the STYLE tag.
Internal Stylesheets: The Style Tag
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 Transitional//EN" "http://www.w3.org/TR/html4/loose.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.
So, we can remove the style sheet entirely from the web page, and hold it as a separate document.
Inline Style Sheets
Try creating the following example as it is and save it as a file with .css, such as MyStyle.css
body {background-color: yellow; color: black;}
Create a simple webpage with the HTML structure and save it in the same folder as your MyStyle.css file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Inline CSS</TITLE>
<LINK REL="stylesheet" HREF="MyStyle.css" type="text/css">
</HEAD>
<BODY>
<H1>Hello SCITs</H1>
<P>
Hello fellow SCITS!
Try this out
</P>
<H1>What is SCIT</H1>
<P>contents</P>
<H1>SCIT courses</H1>
<P>contents</P>
</BODY>
</HTML>
TIME TO PRACTICE
Try the example above – experiment with different formatting commands.
External Style Sheets
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 THIS.
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.
