<font>
and
<u>
that were used for formatting text. In 1996, CSS1 came out and slowly started to replace the old formatting tags. Now, many browsers have stopped support for these tags, making CSS the standard in the web design world.
Once you get used to the formatting, CSS is very simple to use. There are three ways to use CSS
- in a linked style sheet (external)
- a
<style>tag placed in the header of a page (internal) - an inline tag placed directly on the element it’s affecting.
Linked Style Sheets
The linked style sheet is created in the same format as the
<style> tag in the header of the page, only it’s an external .css file that is pulled into the HTML page. You can load an external CSS file with the following line of text:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />Internal Style Sheets
Internal style sheets are placed in the
<head> tag at the top of the page. They are contained by an open <style> tag and a closing </style> tag.
A CSS rule has two parts: the selector and the commands for that selector. Below is an image showing the parts of the CSS rule.
The selector is the tag you want to change the appearance of. The declaration is the stuff you want to change on the tag. There is a long list of declarations you can use in CSS, so it’s nice to have a cheat sheet or a reference book handy. Here is a link to the W3C Schools CSS Reference. If you click on the property, you can see all of the options for the values under the PROPERTY VALUES section. If a color is involved, you can use the name for the color (ex: black), the RGB value for the color (ex: rgb(0,0,0)), or the HEX code for the color (ex: #000000). The properties in CSS rules are separated by a semi-colon, where the property and value is separated by a colon.
Inline Styles
Inline styles look similar to the internal styles, except they are placed on the tag you are changing. These go in the
<body> of your HTML page. We covered some of this in the floating images with inline styles post. Below is an example of an inline style.
<p style="color: blue;">Text Goes Here</p>The property and the value are formatted the same, only they’re preceded by a style= after the tag starts.
For more information on what style sheets are and how you can use them, please reference the W3C Schools CSS Tutorial Page. They have examples, quizzes and a test, as well as an interactive "Try it Yourself" feature.
No comments:
Post a Comment