Stylesheets
How do I style my web page
A style sheet, also referred to as Cascading Style Sheet (CSS), is simply a way of styling your webpage – styling is defining appearance and can be quite complex as the standard for CSS (CSS version 3 was widely adopted in 2014, but that is really just a set of agreed proposals, not a single standard; CSS4 is the version assigned to those proposed standards that started being announced in 2014) allows quite a lot of different descriptors as well as a range of attributes and all their possible values. This article focusses on the simpler attributes; for example, colouring, font, spacing and positioning.
Originally, formatting was placed directly in the HTML of a web-page, but current standard compliance forbids that. Mixing structure and styling in one document becomes unmanageable as your web-site grows. If (for example) you decide to change the colour of your second-level headings you could be editing hundreds of entries throughout your site if each of those second-level headings had its own styling instruction. Even just a few pages is tedious.
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 suggested reading
- Look up the w3school for an easy follow on to what is described below.
- Colouring - I have used actual words like 'red' and 'black' for colours here, and modern browsers understand quite a number of the colours defined in similar words in CSS4. A far greater range of colours can be specified using numbers as explained in this article, and one way of specifying colours using numbers even allow you to include some transparency, allowing a HTML element to be superimposed on another without totally hiding the lower one.
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, the official recommended standard that applied from 2014 is called HTML5, but in 2014 there are already proposals for the next version. All browsers use HTML as their core language – other technology is used to enhance a web page further (examples of script languages: PHP Hypertext Pre-processor, 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.
Here is the basic skeleton HTML requirement when writing a web page:
<html>
<head>
</head>
<body>
</body>
</html>
A fuller list of what is normally included in a HTML file can be seen here. Follow up that cross-reference to understand the various approaches for producing customised web pages.
Notice that most HTML elements require both an opening and closing tag (so they can enclose other HTML structure) each tag prefixed with a "<" and suffixed with a ">", and the tags must be closed in the reverse order to when they were opened to preserve that enclosing structure. Some people are lazy and do not close all tags, however this can cause unpredictable results and some browsers are more forgiving than others. If a particular HTML element cannot have something else within it, it will start with "<" and end with ">" (or " />", note the mandatory space before the slash) and not have a separate end tag.
Note indenting the text here is only to ensure the tags are matched and because short lines make reading easier – 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. [Note that standard Cumulus pages use '.htm' as earlier (now obsolete) versions of computer operating systems could only cope with 8 characters before the "." and 3 characters after it].
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 9 am.</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 not expected to be accurate when 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’. Although we will not worry too much about HTML conventions here, there are conventions that lower case is preferred, that the first heading to appear within the body of HTML should be a first-level one (h1), that at least one heading should precede any paragraphs (p). Depending on your browser, it will have some default styling for each HTML element, for example it may say a first level heading appears with blank space below it, is in a larger font, and is made bold, while a paragraph appears in the standard size font but has some blank space above and below it.
As described elsewhere in the Wiki, your first attempts to write web pages will probably involve creating customised Cumulus Templates containing web tags that Cumulus software recognises and processes by creating a web page with values determined by those web tags. To keep the description simple on this Wiki page, all the HTML quoted here is typical of that generated by Cumulus processing, some values have already been inserted where Cumulus web tags would be used in a template.
Adding some style
Basically, each style instruction takes the following structure:
Descriptor { attribute: value; ... }
So the instruction starts with a descriptor defining where, and when, it applies; then enclosed in curly brackets are any number of parameters. Each parameter consists of what styling is being applied before a colon and the associated value (or, space separated, values) for that styling before a semicolon.
In this first example we want to colour the text of a heading red, rather than whatever colour the browser uses as its default (or the browser inherits from what we have previously defined for an element that encloses the heading).
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 move the styling into a separate CSS 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. The tag tells the browser that what follows next, until the style tag closes, is CSS (style sheet) instructions and the type attribute confirms it is CSS written in plain text.
Within this set of tags we have a descriptor that specifies a HTML tag, if the browser finds an <h1> tag it is to modify the default styling, in this case to make the text 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 }. As there was only one modifier, the browser accepts that the '}' terminates the value and the semi-colon can be missed off.
If we want to make it red and bold we can list both effects within the curly brackets after quoting a descriptor just once; but then we must terminate our values with a semi-colon as in the next example:
<style type="text/css" media="all">
h1 {
color: red;
font-weight: bold;
}
</style>
This could also be combined in one line (and it then more efficient as the browser has fewer characters to read), but using several lines makes it more readable for humans (although where you choose to start a new line, and how much indent you apply, is not defined by any universal standards):
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, with a couple of alternatives, and the text colour of 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. Those font names that include spaces have to be enclosed in double quotes, those that are a single word do not use quotes, and spaces separate multiple values. 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. Also note that these 3 fonts are seldom used together,
- arial is a sans serif font, it does not have small strokes at approximate right angles on the end of the stroke that define the letters;
- times new roman is a serif font, there are small strokes on the end of the strokes that define the letters, and this font recognises that different letters use different widths (two words with the same number of letters will have proportionally different widths depending on the actual letters included) and the spacing between letters can vary depending on whether the adjacent strokes are curved or vertical;
- courier is a monospaced font, all letters are allocated the same width (two words with the same number of letters will occupy same width regardless of the actual letters included).
Normally the alternative fonts will be the same in terms of whether they use 'serif' or not, and whether they use proportional or mono spacing.
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 in HTML, only when using it as a descriptor in the style sheet above.
So our second paragraph is now formatted with italics (as per our class declaration), 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 others with same descriptors or HTML structure implicitly included within that inheritance, if we have not defined another style 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 a web page being specified by HTML and CSS, but the rules are the same. We are declaring classes in our HTML and referring to them in our CSS.
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>Last Dawn:</th> <td>07:00</td> <th>Last Sunrise:</th> <td>07:25</td> <th>Moonrise:</th> <td>10:07</td> </tr> <tr> <th>Next Dusk:</th> <td>19:00</td> <th>Next 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>Last Dawn:</th>
<td>07:00</td>
<th>Last Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
<td>10:07</td>
</tr>
<tr>
<th>Next Dusk:</th>
<td>19:00</td>
<th>Next 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 instructions between the <style> tags from your latest example, 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 return to your HTML, delete the style open and close tags, and all that was within them, 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 HTML elements only have one tag, nothing can be contained within them so they do not have a separate closing tag, well this is one such example, although it is closed in a round about way, notice the very subtle space then / just before the '>' at the end of the line.
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 the instructions you have in your mystyles.css with the instructions below and reload your page. See how the look changes. 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 Chrome, Firefox, Opera, and Safari, are all good at implementing the latest CSS3 recommendations for a standard. Usually either Chrome or Firefox will be quick to pick up CSS4 recommendations, as these browsers are widely used, most developers will consider using newer CSS features.
- When developing a site, test in a variety of browsers, remembering almost anyone may view your site. Anyone using IE may miss out on some features of your design that Microsoft's code ignores, but then those users will not know what they are missing. Those with the more modern browsers can have their experience of visiting your web site enhanced by you using a wider range of the latest CSS features.
- Internet Explorer can be quite fussy, and those designers writing for where that browser is used exclusively will include separate HTML instructions on what CSS to load for each IE version, making it complicated to understand how the CSS determines the look. The relevant instructions in the HTML are specific to Microsoft, they look like conditional HTML comments, and are treated as comments by non-Microsoft agents.
- Early versions of Internet Explorer are bad for a variety of reasons. If you are on IE version 5 or 6 you should change to using a modern browser now. If a site asks what browser is being used, IE may even report it is Firefox, but despite that generally older IE will either expect different CSS syntax, or just ignore any standard CSS, so it will not display a page as Firefox would. You have to use the Microsoft conditional comments approach to detect IE and switch CSS accordingly.
- When developing your site, remember it may be viewed on a range of different devices including PCs, tablets, mobiles; try whatever devices you have, and experiment with any options your browser offers for different widths, default font-sizes and different screen shapes/resolutions.
- Finally, it is often possible to detect media (although such detections may not always be successful), and apply a different CSS file in each case. For example the page appears shaped best for viewing on a monitor with one CSS file, shaped best for viewing on a mobile with a second file, and shaped best for printing on a sheet of paper with the final CSS file. This is however too complex to describe any further here.
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.
The next article to read ……
Learn more about HTML elements like <DIV> and <SPAN> and more about positioning in Webpage layout
Originally written - Daj 12:25, 25 August 2009 (UTC)