5,838
edits
Stylesheets: Difference between revisions
m
no edit summary
No edit summary |
mNo edit summary |
||
| (One intermediate revision by the same user not shown) | |||
|
= How do I style my web page =
[[Category:WebTips]]▼
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.▼
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.
▲
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 [http://www.w3schools.com/css/ 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 [http://en.wikipedia.org/wiki/Web_colors 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 ==▼
▲=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,
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 <nowiki><h1></nowiki> and <nowiki></h1></nowiki>. 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.
<pre>
<html>
</html>
</pre>
A fuller list of what is normally included in a HTML file can be seen [[Customised_templates#HTML_5_-_a_very_quick_guide_to_structure|here]]. Follow up that cross-reference to understand the various approaches for producing customised web pages.
Notice
<html><head></head><body></body></html>
and it would give the same results.
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 ===
<pre> <html>
<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
<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>
We use two sets of formatting tags here…<nowiki><h1></nowiki> and <nowiki><p></nowiki> (and their closing tags too!)
<nowiki><h1></nowiki> is a predefined tag in HTML and stands for ‘heading1’. <nowiki><p></nowiki> 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 [[Customised_templates#Changing_the_Standard_Templates|Cumulus Templates]] containing web tags that Cumulus software recognises and [[Customised_templates#What_is_meant_by_.27Cumulus_processes_templates.27|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; ... }
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.▼
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
<pre>
<html>
Ok, some new tags here.
The <nowiki><style></nowiki> and <nowiki></style></nowiki> tags in the <nowiki><head></nowiki> section; also note that the opening ''style tag'' has some additional information contained within it.
Within this set of tags we have told the browser that if it finds an <nowiki><h1></nowiki> 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 <nowiki><h1></nowiki> tag without it’s < and > (this is important!). All styling for each tag is enclosed within { and }▼
▲Within this set of tags we have
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:
<pre>
<style type="text/css" media="all">
h1 {
font-weight: bold;
}
</style>
</pre>
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 <nowiki><body></nowiki> tag we will set a default font of arial, with a couple of alternatives, and the text colour of blue.
<pre>
<html>
<style type="text/css" media="all">
body { color: blue;
font-family:
}
h1 { color: red;
</html>
</pre>
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 <nowiki><h1></nowiki> will still be red and bold, but will retain the Arial font
=== It's all in the class ===▼
▲=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 <nowiki><p></nowiki> tag, just as we did with the <nowiki><h1></nowiki> tag however that would restyle both paragraphs.
<nowiki><p class="italics-para"></nowiki>
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
So our second paragraph is now formatted with italics (as per our class
▲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 <nowiki><body></nowiki> tag as the <nowiki><p></nowiki> tag is contained within the <nowiki><body></nowiki> and <nowiki></body></nowiki>. 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
▲=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 <nowiki><table></nowiki>, create a table body, create a row <nowiki><tr></nowiki>, some headings <nowiki><th></nowiki>, data <nowiki><td></nowiki> and close the tags as required!
<tbody>
<tr>
<th>Last Dawn:</th>
<td>07:00</td>
<th>Last Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
</tr>
<tr>
<th>Next Dusk:</th>
<td>19:00</td>
<th>Next Sunset:</th>
<td>18:35</td>
<th>Moonset:</th>
<td>
</tr>
</tbody>
<table class="summary-table">
<tbody>
<tr><th>Last Dawn:</th>▼
▲<th>Dawn:</th>
<td>07:00</td>
<th>Last Sunrise:</th>
<td>07:25</td>
<th>Moonrise:</th>
</tr>
<tr>
<th>Next Dusk:</th>
<td>19:00</td>
<th>Next Sunset:</th>
<td>18:35</td>
<th>Moonset:</th>
<td>
</tr>
</tbody>
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
<pre>
body { color: blue;
font-family: "arial","times new roman","courier";
}
h1 { color: red;
font-weight: bold;
}
.italics-para
border-width: 1px;
border-color: blue;
color: black;
}
.summary-table th { color: black;
</pre>
Now return to your HTML, delete the style open and close tags, and all that
<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>
</pre>
=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
<pre>
*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
*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.
▲=Some suggested reading=
=The next article to read ……=
▲We talk about <nowiki><DIV></nowiki> and <nowiki><SPAN></nowiki> and positioning in [[Webpage layout]]
Updated - [[User:Sfws|Sfws]] ([[User talk:Sfws|talk]]) 14:45, 22 April 2015 (PDT)
▲[[Category:WebTips]]
| |||