Cumulus Wiki

Stylesheets: Difference between revisions

Page Discussion

Stylesheets (view source)

Revision as of 21:45, 22 April 2015

7,780 bytes added ,  22 April 2015
Updating to reflect current standards
No edit summary
(Updating to reflect current standards)
= How do I style my web page =
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.
 
[[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.
 
▲TraditionallyOriginally, formatting was placed directly in the HTML of a webpageweb-page, but current standard compliance forbids that. Mixing structure and styling in howeverone thisdocument becomes unmanageable as your websiteweb-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.
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 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, JavascriptJavaScript) 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 <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.
 
ThereHere areis the basic requirementsskeleton HTML requirement when writing a web page and I mention these here simply to aide understanding:
<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 eachthat most HTML ofelements theserequire hasboth 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.
 
INote have indentedindenting the text here is only forto goodensure orderthe 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.
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 used at this station ends at midnight9 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>
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.
<nowiki><h1></nowiki> is a predefined tag in HTML and stands for ‘heading1’. <nowiki><p></nowiki> is a ‘paragraph’
 
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:
I want to make heading red rather than black.
 
''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 havemove itthe onstyling it’sinto owna separate CSS file.
<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. ThisThe tag tells the browser that what follows next, until the style tag closes, is a CSS (style sheet) instructions and the type attribute confirms it is CSS written in plain text.
 
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 tolda the browserdescriptor that specifies a HTML tag, if itthe browser finds an <nowiki><h1></nowiki> tag thenit applyis to modify the somedefault 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 <nowiki><h1></nowiki> 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 combine effects and separate with a semi-colon.
 
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:
Example
<pre>
<style type="text/css" media="all">
h1 { color: red;
font-weightcolor: boldred;}
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):
This could also be combined in one line:
 
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: "arial", "times new roman"," courier";
}
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 creatingusing it as a descriptor in the style sheet above.
 
So our second paragraph is now formatted with italics (as per our class declrationdeclaration), 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 otherothers with same descriptors or HTML structure implicitly included within that inheritance, if we have not implieddefined itanother style specifically. ▼
 
▲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 bodyour CSS.▼
▲=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>-----</td>
</tr>
</tbody>
<table class="summary-table">
<tbody>
<tr><th>Last Dawn:</th>▼
<tr>
▲<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>-----</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 textinstructions 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
<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 iswas betweenwithin itthem, 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 tagsHTML elements only have one tag, nothing can be contained within them so they do not needhave closeda 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. 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!
 
 
</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 thisthe instructions below and '''reload''' your page. See how the look changes. You did not touch any HTML only changed the formatting in the CSS.!!
 
<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 Internet ExplorerChrome, Firefox, Opera, and Safari, are all good howeverat Internetimplementing Explorerthe canlatest beCSS3 quiterecommendations fussyfor anda isstandard. notUsually alwayseither compliantChrome withor theFirefox standard.will be Whenquick developingto apick up CSS4 siterecommendations, testas inthese abrowsers varietyare ofwidely browsersused, 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.
 
*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!!!
 
 
 
 
▲=Some suggested reading=
 
<span style="color:#909090">
*The best place for all your CSS tags is the [http://www.w3schools.com/css/ w3school]
=The next article to read ……=
*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 [http://en.wikipedia.org/wiki/Web_colors article]
 
WeLearn talkmore about HTML elements like <nowiki><DIV></nowiki> and <nowiki><SPAN></nowiki> and more about positioning in [[Webpage layout]]▼
</span>
FeedbackOriginally welcomewritten - [[User:Daj|Daj]] 12:25, 25 August 2009 (UTC)▼
 
Updated - [[User:Sfws|Sfws]] ([[User talk:Sfws|talk]]) 14:45, 22 April 2015 (PDT)
=In the next article……=
 
▲We talk about <nowiki><DIV></nowiki> and <nowiki><SPAN></nowiki> and positioning in [[Webpage layout]]
 
▲Feedback welcome - [[User:Daj|Daj]] 12:25, 25 August 2009 (UTC)
 
▲[[Category:WebTips]]
Sfws
5,838

edits

Retrieved from "https://www.cumuluswiki.org/a/Special:MobileDiff/3736"