Cumulus Wiki

Stylesheets

Revision as of 12:26, 25 August 2009 by Daj (talk | contribs) (Created page with 'A style sheet, also referred to as a CSS (Cascading Style Sheet), is simply a way of styling your webpage – for example, colouring, font, spacing and positioning. Traditionall…')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

A style sheet, also referred to as a CSS (Cascading Style Sheet), is simply a way of styling your webpage – for example, colouring, font, spacing and positioning.

Traditionally, formatting was placed directly in the HTML of a webpage however this becomes unmanageable as your website grows. If for example you decide to change the colour you could be editing hundreds of entries throughout your site. Even just a few pages is tedious.

The move now is to the use of style sheets and direct formatting in the HTML is frowned up and should be used as little as possible.

One huge advantage to the style sheet is that making a change to one line in the style will affect your whole site.

There are volumes of information available on CSS writing, both in your local bookshop or library and on the web. However, below is a basic introduction to understanding and writing your own CSS to control your website.


Some basics

(limited HTML knowledge is assumed but we will try to explain as we go)

HTML is the language used to describe how your page will be laid out in the browser. All browsers use HTML as their core language – other technology is used to enhance a web page further (examples: PHP, Java, Javascript) however it is not in the scope of this document to discuss these.

What you need to be clear on is that HTML is a plain text file and everything is enclosed within tags. A tag is contained within < and >. An example of a set of tags would be <h1> and </h1>. Note the second of the two tags differs as it has a / symbol. The first tag denotes the start of your content and the second the end. Every tag has a corresponding end tag however with a few exceptions where there is one tag. More on that later.

There are basic requirements when writing a web page and I mention these here simply to aide understanding 

 <html>
    <head>
    </head>

    <body>
    </body>
 </html>

Notice each of these has an opening and closing tag, and the tags must be closed in the order they were opened. Some people are lazy and do not close all tags, however this can cause unpredictable results and some browsers are more forgiving than others.

I have indented the text here only for good order and reading – HTML ignores any such spacing but it can be useful for you when reading the code. I could have written that whole structure as 

<html><head></head><body></body></html>

and it would give the same results.

Most of your work will be done between the <body> and </body> tags – this is the section that controls what is shown in the browser.

When editing an HTML file always use a text editor, not a word processor. Notepad in Windows is fine, however I would heartily recommend you download Notepad++ if using Windows or TextWrangler if using an Apple Mac. Both are free and are excellent for HTML writing as they understand the structure of the HTML page.

Let’s dive straight in a look at some examples; always the best way to learn! (I will use actual extracts for the Cumulus standard web pages).

All the examples are fully functional, simple HTML so you could copy and paste the text into notepad, save as a file with the .html extension and the double click and view in a browser.


Some simple HTML

 <html>
 <head>
 </head>
 <body>
 <h1>Welcome to my weather station. </h1>
 <p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
 meteorological day  used at this station ends at midnight</p>
 <p>All data offered by this website and station is from an amateur weather observation station and should be 
 used and accepted at face-value and compared alongside official sources.</p>
 </body>
 </html>

Go ahead and try this if you wish.

We use two sets of formatting tags here…<h1> and <p> (and their closing tags too!)

<h1> is a predefined tag in HTML and stands for ‘heading1’. <p> is a ‘paragraph’


Adding some style

I want to make heading red rather than black.

This is where we start using style sheets. For the moment we will put this directly into the HTML for simplicity but later we will have it on it’s own file. 

 <html>
 <head>
 <style type="text/css" media="all">
      h1	{ color: red }
 </style>
 </head>
 <body>
 <h1>Welcome to my weather station. </h1>
 <p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
 meteorological day used at this station ends at midnight</p>
 <p>All data offered by this website and station is from an amateur weather observation station and should be 
 used and accepted at face-value and compared alongside official sources.</p>
 </body>
 </html>

Ok, some new tags here.

The <style> and </style> tags in the <head> section; also note that the opening style tag has some additional information contained within it. This tells the browser that what follows next, until the style tag closes, is a CSS (style sheet) and it is written in plain text.

Within this set of tags we have told the browser that if it finds an <h1> tag then apply some styling, in this case make the colour red. Note the America spelling of ‘color’. Also note that within the style tags we refer to the <h1> tag without it’s < and > (this is important!). All styling for each tag is enclosed within { and }

If we want to make it red and bold we can combine effects and separate with a semi-colon.

Example 

 <style type="text/css" media="all">
    h1	{ color: red;
         font-weight: bold;}
 </style>

This could also be combined in one line: 

 h1	{ color: red; font-weight: bold;}


Default styling

Let’s set some defaults

Using the predefined <body> tag we will set a default font of arial and the colour blue. 

 <html>
 <head>
 <style type="text/css" media="all">
 body	{ color: blue;
 	  font-family: "arial","times new roman","courier";
 			}
 h1	{ color: red;
          font-weight: bold; }
 </style>
 </head>
 <body>
 <h1>Welcome to my weather station. </h1>
 <p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
 meteorological day used at this station ends at midnight</p>
 <p>All data offered by this website and station is from an amateur weather observation station and should be 
 used and accepted at face-value and compared alongside official sources.</p>
 </body>
 </html>

Notice the ‘font-family’ has a list of three possible fonts. Typically you would list a number of fonts; that way if the user does not have the first font installed on their computer, it will try the second, and then third, etc. Of course, most people have Arial so we are pretty safe.

Now every piece of text will be blue and in Arial, unless you decide to style a section in another format. In our example the <h1> will still be red and bold, but will retain the Arial font


It's all in the class

Let’s now assume we want the second paragraph in our example to be in italics. How do we achieve this? Well, we know we can restyle the <p> tag, just as we did with the <h1> tag however that would restyle both paragraphs. To achieve this we write our own style tags, referred to as a class. Here’s the code…. 

<html>
<head>
<style type="text/css" media="all">
body	{ color: blue;
	  font-family: "arial","times new roman","courier"; }
h1	{ color: red;
          font-weight: bold;}

.italics-para
	{ font-style: italic; }
</style>
</head>
<body>
<h1>Welcome to my weather station. </h1>
<p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
meteorological day used at this station ends at midnight</p>
<p class="italics-para">All data offered by this website and station is from an amateur weather observation
 station and should be used and accepted at face-value and compared alongside official sources.</p>
</body>
</html>

So what has changed? Firstly, look in the style section and there is a new declaration “.italics-para”. The dot tells the style sheet that we are declaring a class of our own and we are calling it italics-para. (We can call this anything we like) Now look further down the code and note the second paragraph has changed <p class="italics-para">

We are now telling HTML that this is a paragraph AND it has a class of italics-para. Note that the dot is NOT used when using the class, only when creating it in the style sheet above.

So our second paragraph is now formatted with italics (as per our class declration), however it also has a font of Arial and colour blue even although we did not tell it what font or colour to use. This is where the “C” in CSS comes in. It stands for “Cascading” and simply means that all style sheet rules flow (or cascade) into other if we have not implied it specifically. By not telling our style what to use it simply assume that it would take the defaults from the <body> tag as the <p> tag is contained within the <body> and </body>. We could set the font and colour in the “italics-para” class if we wish but as they are the same this is wasteful.

Classes are ‘the big thing’ in style sheets and you will used them almost exclusively. Your style sheet will be full of classes.


More formatting

This is a larger example of HTML, but the rules are the same. We are declaring classes and referring to them in body.

Let’s introduce a table, used in the Cumulus webpage to present some data. Tables, like everything in HTML have opening and closing tags. We will create a <table>, create a table body, create a row <tr>, some headings <th>, data <td> and close the tags as required!

Firstly, just the table code in order to read it on its own 

<table>
<tbody>
<tr>
<th>Dawn:</th>
<td>07:00</td>
<th>Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
<td>10:07</td>
</tr>
<tr>
<th>Dusk:</th>
<td>19:00</td>
<th>Sunset:</th>
<td>18:35</td>
<th>Moonset:</th>
<td>-----</td>
</tr>
</tbody>
</table>

Have a read through the HTML and you should see the table starting, it creating the table body, opening a row, adding a heading, adding some data, another head, another data, heading, data, and then close the row. Repeat another row, then close the body and the table.

Now let’s add some style to the table. We do this, as before, by creating a class and referring to it in the tag. 

<table class=”summary-table”>
….
….
</table>

And now the extract of the style sheet… 

.summary-table { width: 75%;
		 border: solid;
		 border-width: 1px;
		 border-color: blue;
		 color: black;}
					
.summary-table th { color: black;
		    background: lightgrey;}
				
.summary-table td { color: black;
					}

The first class declaration should be easy; we are creating a class called summary-table, it is to fill 75% of the width of the screen, has a border which is one pixel thick, the border is blue and the text is black.

Next we add a tag to the class “.summary-table th” This simply tells the browser if it finds a <th> tag (table heading) within the table with a class of .summary-table then the font will be black and the background a light grey.

Similarly in the next declaration all the <td> (data) tags will be have a black font colour (otherwise it would inherit it from the blue colour of the <body> -- remember CSS is cascading!)

And the full HTML for you to try…. 

<html>
<head>
<style type="text/css" media="all">
body	{ color: blue;
	  font-family: "arial","times new roman","courier"; }
h1	{ color: red;
          font-weight: bold;}

.italics-para
	{ font-style: italic; }
	
.summary-table { width: 75%;
		 border: solid;
		 border-width: 1px;
		 border-color: blue;
		 color: black;}
					
.summary-table th { color: black;
		    background: lightgrey;}
				
.summary-table td { color: black; }
	
</style>
</head>
<body>
<h1>Welcome to my weather station. </h1>
<p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
meteorological day used at this station ends at midnight</p>
<p class="italics-para">All data offered by this website and station is from an amateur weather 
observation station and should be used and accepted at face-value and compared alongside official sources.</p>
<table class="summary-table">
<tbody>
<tr>
<th>Dawn:</th>
<td>07:00</td>
<th>Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
<td>10:07</td>
</tr>
<tr>
<th>Dusk:</th>
<td>19:00</td>
<th>Sunset:</th>
<td>18:35</td>
<th>Moonset:</th>
<td>-----</td>
</tr>
</tbody>
</table>

</body>
</html>


Splitting the style sheet

As you can see our style sheet is getting longer, and it will continue to grow. It is far better to have your style sheet in its own file, and refer to it within the HTML.

Copy all the Style sheet text between the <style> tags, but NOT the <style> tags! Paste it into notepad and save as “mystyles.css”. Here’s the code 

body	{ color: blue;
	  font-family: "arial","times new roman","courier";}	
h1	{ color: red;
          font-weight: bold; }

.italics-para
	{ font-style: italic; }
	
.summary-table { width: 75%;
		 border: solid;
		 border-width: 1px;
		 border-color: blue;
		 color: black;}
					
.summary-table th { color: black;
		    background: lightgrey;}
				
.summary-table td { color: black; }

Now delete the style tags, and all that is between it and replace with… 

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

This tells your browser to read the file mystyles.css as a style sheet and use it as necessary.

Remember we mentioned that some tags do not need closed, well this is one such example, although it is closed in a round about way, notice the very subtle / just before the > at the end of the line. Is is the same as writing 

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

but most people drop the full closing tag. Do NOT assume that works everywhere – always close your tags unless you know of an exception, like this!


So your full HTML code will be 

<html>
<head>
<link href="mystyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Welcome to my weather station. </h1>
<p>The weather station in use is the Fine Offset WH1081, and these pages are updated  every 5 minutes. The 
meteorological day used at this station ends at midnight</p>
<p class="italics-para">All data offered by this website and station is from an amateur weather observation 
station and should be used and accepted at face-value and compared alongside official sources.</p>
<table class="summary-table">
<tbody>
<tr>
<th>Dawn:</th>
<td>07:00</td>
<th>Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
<td>10:07</td>
</tr>
<tr>
<th>Dusk:</th>
<td>19:00</td>
<th>Sunset:</th>
<td>18:35</td>
<th>Moonset:</th>
<td>-----</td>
</tr>
</tbody>
</table>

</body>
</html>


All change

Just to prove how quickly you can change the format of a page using style sheets, replace your mystyles.css with this and reload your page. You did not touch any HTML only changed the formatting in the CSS.!! 

body	{ color: black;
	  font-family: "times new roman","times","courier";
	  font-size: 16pt; }

h1	{ color: red;
          font-weight: bold; 
	  background: blue;
	  padding:20px;
	  text-align: center;}

.italics-para
	{ font-style: normal; }
	
.summary-table { width: 50%;
		 border: dashed;
		 border-width: 1px;
		 border-color: grey;
		 color: black;
		 font-size:60%;
		 margin-left: 100px;}
					
.summary-table th { color: green;}
				
.summary-table td { color: black;}


Some possible issues

  • If your style sheet rules are not being applied, check your coding. Remember each style entry ends with a ; and a group of style entries for one class or tag are enclosed in { and }
  • check your spelling -- CSS is Americanised so we have color not colour and center not centre!
  • Style sheets are supported in all modern browsers, however with varying degrees of compliance. As a general rule the latest version of Internet Explorer, Firefox, Opera, Safari are all good however Internet Explorer can be quite fussy and is not always compliant with the standard. When developing a site, test in a variety of browsers.
  • Early versions of Internet Explorer are bad for a variety of reasons. If you are on version 5 or 6 you should stop using the internet now, and stick to books!!!


In summary

That is CSS/Style sheets in essence. There is far more to this and lots to read on the subject however what this should do is allow you to read some HTML and CSS and understand how they come together.


Some suggested reading

  • The best place for all your CSS tags is the w3school
  • Colouring - I have used actual words like 'red' and 'black' for colours here, however in reality you will want a far greater range. Colour is often written as numbers and explained in this article


In the next article……

We talk about <DIV> and <SPAN> and positioning

Feedback welcome - Daj 12:25, 25 August 2009 (UTC)

Retrieved from "https://www.cumuluswiki.org/index.php?title=Stylesheets&oldid=158"