|
But there is !! These are called style sheets. They will come to no surprise to many of you who have used style sheets in other applications such as word processing or DTP packages These are not just the current in thing but are being actively encouraged as good HTML. There are currently 3 ways of using style sheets
You can combine them to give your document extra oomph!!. This technique is calledcascading style sheets and is described later In the examples below we use the following style sheet properties
some more style sheet properties are listed together with RGB and colour names in our HTMLresource library Inline Style SheetsThis is the simplest approach. In any tag you just include a style attribute e.g. gives rise to this This is a big italic red headerHang on I am not red or in italics.hmm.....As you can see the effect doesn't carry on once the defining tag is closed. You can use them in the middle of text using the <span> tag e.g. <p> I am Red whereas I am not Why not just use physical style and content tags like font Well there are some advantages You can set some factors such as giving a chunk of text a background. You can divide areas of text up with <div> tags e.g. <p> I have blue behind me I am normal These clearly have their limitations. But can be useful in conjunction with other style sheets
Document Level Style SheetsNow we're motoring ! If you felt Inline style was fiddily & wishy washy, then this should impress you. With Document level style sheets you can define a consistent style for all your text components You need to place this in the <head> tags of your document here is an example <head> Now view a page with this style sheet which explains everything between the <style tags> As you can see you get a document wide approach. It can also be set to react to certain editing changes (like the use of <em> tags with defined terms in the example)
External Style SheetsThe principles of external style sheets only differ from document level style sheets in one respect. Instead of defining all the styles on the document, the style is defined by a separate style sheet file (called a .css file). The advantage is that if you want the same style sheet across all your documents you don't have to slavishly copy (or cut and paste !) the same <style> tags and attributes. It also means you can also alter the layout of all linked files just by changing the .css file rather than ploughing through each HTMLdocument (i.e.. You could change all files with a linked external style sheet in a website just by replacing the .css file) You don't need a special editor to create a .css file. Notepad or any basic text editor will do. Say you wanted to use the style sheet described in document level style sheets simply enter the following into notepad h1 {color: aqua; font-style: italic; text-align: center} select save as and alter save as type to read all files. Find your web folder and in file name enter your style sheet name plus .css (e.g. mystyle.css) To link HTML documents to external style sheets use must place a <link> tag in the <head> tags here we are using the .css file called mystyle.css <head> We've created a page which uses our mystyles.css as its External style sheet. Have a look In it there is a link to an identical page but which is linked to a second style sheet file called mystyle2.css. Other than that the HTML editing remains the same. It gives you an idea of the effect of changing a .css file without altering HTML documents We use a .css file for this site to control our links CASCADING STYLE SHEETSYou've probably seen the term before , but what are cascading style sheets? Well, essentially it means several style sheets can be used in a document each influencing the layout slightly (or causing a cascade of style. This is what W3C want you to be doing for page layout and it can be very effective For example your site could have a common external style sheet to give a like feel throughout your site. Then further document level or in line style sheets could be used to shape an individual document's feel If there is conflict between style sheets (e.g. your .css file says all header should be blue and your <style> says red) The "closer" style sheet will take precedence. Therefore Inline style sheets win over document level with external style sheets having the least power.
|
By now you should be happy with altering text in terms of size, colour, font and other things.
