Where to put your styles
Inline Style Sheets
You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed elsewhere. Here's an example of an Inline style:
Embedded Style Sheets
Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE attribute, if you want. But modern browsers don't need it.
External Style Sheets
Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it all in a separate text file. You then 'tell' the browser where the text file is. The text file (along with its code) is then treated as though it were in the HEAD section. You set up an External stylesheet like this:
External stylesheets have a big advantage over embedded ones because they can be used for all the pages in your web site. All you need do is insert the LINK tag in the HEAD section of your website's pages. With Embedded stylesheets, you would have to have the same STYLE code in the HEAD section of every page. External Stylesheets can save you a heck of a lot of typing (or copying and pasting).
External stylesheets are just text files, so you can write them in any text editor. Something like Windows Notepad is ideal. Here's a screenshot of an external stylesheet written with Notepad:
Note, too, that three styles have been set up. You can do this with embedded STYLE tags as well. You can have as many different styles as you want between one pair of <STYLE> </STYLE> tags.
If you are using external stylesheets, you are not limited to only one. You can use as many external stylesheets as you need. All that is required is a different LINK tag for each stylesheet.
When saving your external stylesheets, you don't have to save it with the extension .css. You can save it with the extension .txt. In the HREF part of your LINK tag, you would then have this:
Wednesday, 8 July 2015
Where to put your styles
<H1 STYLE = 'Color: Red'>My Heading</H1>
To place a style in a HTML tag, do the following:
HREF = style1.txt
instead of
HREF = style1.css
In the next part, you'll learn how to use your CSS selectors.
0 comments:
Post a Comment