|
Support for CSS did not start until version 4.0 browsers. Each browser
supports CSS a little differently. Currently there are two CSS standards, CSS 1
(formatting) and CSS 2 (layout). Only recent browsers support CSS 2 and its
additional functionality.
There are 4 types of style sheets:
- Inline
Style definitions are created within the BODY of the HTML
document and apply to that element only.
- Embedded
Style definitions are placed within the HEAD of the HTML
document and applies to the full document. Works for the current page only.
- Linked (external)
The file contains only the style sheet
information and can be referenced by multiple files using the <LINK REL=> command.
- Imported (external)
The file contains only the style sheet
information and can be referenced by multiple files using the <@import> command. With an imported style sheet, the
HTML file can also use inline and embedded style sheets.Â
A style is a definition of fonts, colors, and other page layout. Each style
has a unique name called a selector. You simply refer to the selectors whenever
you want to activate a certain style type. You can also use the link rel or
@import to call external stylesheets. This way you can create one stylesheet and
call it for all your pages. This means by modifying one document, it is possible
to change the style of an entire site. You can insert comments in CSS to explain
your code. A comment will be ignored by the browser. A CSS comment begins with
"/*", and ends with "*/".
When multiple style sheets are used within a document, the below order of
inheritance is applied.
- Inline
- Embedded
- Linked
- Imported
INLINE STYLE
Any tag except the <HTML> tag can have a style declaration. Here is a
example:
<p style="color: red">The text here would be
red</p>
That would make only that paragraph have red text.
EMBEDDED STYLE
The <style> tags must go in between the <head> and </head>
tags with the selectors going between the style tags on the page. TIP: Don't
forget the semi-colons ";" after each selector. This example will be applied to
all the <p> tags. It defines all <p> tags on the page to be red with
a font of Arial with a size of 24 pixels and will be underlined.
<html>
<head>
<style
type="text/css">
p {color:red; font-size:24px; font-family:arial;
text-decoration:underline;}
</style>
</head>
<title>Some
Page</title>
<body>
</body>
</html>
EXTERNAL STYLE SHEET
This uses the link rel= to call a style sheet named main.css. It goes between
the <head> and </head> tags
<html>
<head>
<link rel="stylesheet"
href="main.css" type="text/css">
<title>Some
Page</title>
</head>
<body>
</body>
</html>
When making a external style sheet you can leave out the <style> and
</style> tags. Just create the stylesheet and save it with a .css file
extension.
IMPORTED STYLE SHEET
The @import may be used in a CSS file or inside the STYLE element itself. You
can combine importing with other methods since other CSS rules can be included
in the STYLE element, but that all @import statements must occur at the start of
the style sheet. The below example imports a stylesheet named main.css and then
uses a embedded style to make all <p> tags on the page to be red with a
font of Arial with a size of 24 pixels and be underlined.
<html>
<head>
<style
type="text/css">
@import url (main.css);
p {color:red; font-size:24px;
font-family:arial;
text-decoration:underline;}
</style>
<title>Some
Page</title>
</head>
<body>
</body>
</html>
Some Examples
Replacing Attributes in the BODY Tag
Adding a:hover for a Link Rollover Effect
Specifying a Font for the Whole Page
Defining the Browser Scrollbar Colors
This is what is used to create the scrollbar colors for this page.
Change the colors to whatever you like for your theme.
More:
Code Generators CSS Reference and Tutorials
Free CSS Editors to help you write stylesheets.
topSTYLE Pro is considered to be the best css editor available today. It's what we use. They offer a free version, topSTYLE Lite which will meet most of your requirements. Download Here.
| 