View and vote on the article here: Cascading Style Sheets
Cascading Style Sheets| Category | | | Summary | | | Body |
Cascading Style Sheets (CSS)
<h5>Part I
By Darkwater685</h5>
Since the beginning of the World Wide Web, there has been an explosion in the multimedia content of websites. In the past few years, the combination of HTML and colors, forms, fonts, and other style elements has been getting out of hand. Cascading Style Sheets, or CSS, has been developed and is maintained under the World Wide Web Consortium to allow the separation of the content of your pages from the stylistic elements.
CSS is very flexible; CSS elements can be defined for a specific section, one page, or an entire site. One of the benefits of CSS is the ability to make site wide changes by simply changing the attributes of a single CSS document. While CSS is fairly well supported by most browsers, some very old versions do not support CSS at all. Most modern, current editions of browsers support CSS, but they each support their own set of CSS commands. Opera and Mozilla have the best support for most CSS elements and Internet Explorer performs nearly as well. If you doubt the power of CSS, just visit Eric Meyer's page of cutting edge CSS masterpieces. It is located at http://www.meyerweb.com/eric/css/edge/.
Below you will find an introduction to CSS. In this tutorial you will learn about how to implement CSS and how to define basic and important aspects of page layout. If you would like to learn more about CSS, the W3C website maintains a listing of the current CSS specifications (http://www.w3.org/TR/REC-CSS2/). After reading this tutorial you should be able to understand and navigate this useful, but rather imposing document.
CSS documents can be created on any text editor. In order to apply style rules to a web page, you need to tell the browser where the style rules are coming from, what type of rules they are (i.e.: CSS), and what to do to the specified HTML.
If you wish to keep your CSS entirely separate from a web page and apply the same styles to several pages on your site, a separate CSS document is created. This document can be named anything, but must end with the extension .css.
In order to link the CSS document (in this case style.css) to the web page the following syntax is used within the <header> tag.
<link rel="stylesheet" type="text/css"
href="style.css" />
All the text on the web page will follow the CSS rules specified in style.css. The benefits of external style sheets include the ease of changing rules such as default font or color for the entire site by just changing one document. You can also royally screw up your entire site very easily in this manner. Remember, backups are very good. The only thing you need to add is the <lin rel
> statement in the header of any page that you want to apply your style sheet too.
If you just want one page to follow certain rules, you can create a special external CSS document for the one page only. You can also specify CSS rules internally. The CSS rules for the page are specified in the <header> tag. The syntax for this embedded method is:
<style type = text/css>
put your CSS rules here
</style>
If you want to specify a style for a single line of HTML only, you can use the following.
<h1 style= color: yellow;>
Heading 1 Text
</h1>
The text in quotes is any CSS declaration (see below). With this method, CSS can be implemented just as HTML style tags are. These in-page uses of CSS can be useful in some cases, but defeat the main purpose of CSS-keeping content and style sparate.
CSS statements have a standard syntax. Just as in HTML, browsers don't care about space, all of the following are proper CSS syntax, so just use a method that looks nice to you and is easy to edit. I prefer the second style because it is easy to add or remove rules.
Selector {property: value;}
Selector {
property: value;
}
Selector
{property: value;}
The selector is any HTML tag, class, id, or pseudo classes (special classes in CSS that allow you to do cool stuff like mouse-over effects). The {property: value;} is referred to as the declaration. Properties are stuff that can be changed about the selector. For example the property could be font-size, color, or any other numerous properties. The value item is what the property's value is. Therefore the declaration could be color: red; or font-size: large;. The most important part of the declaration is the semi-colon (;) with out the semi-colon, your code will usually not work. The semi-colon serves as a way of telling the browser that the declaration is over with, so it plays an important role and leads to much pain and suffering.
Declarations relating to the same selector can be combined into one statement. For example if you wanted paragraph (<p>) text to be red and large you could use either of the following:
p {color: red;}
p {font-size: large;}
or
p {color: red;
font-size: large;}
<h5>Basic CSS properties and values</h5>
Adding notes to CSS:
/* and *\ enclose comments in CSS. Anything within the comment will not be displayed. Comments make it easy to come back to a CSS document and see what is going on.
font-family:
Font-family allows you to specify the font that your text will be displayed in. you can either specify a specific font (like Times, Symbol, etc.) or a generic family.
The generic families are:
- serif (ex: Times New Roman/Garamond)
- sans-serif (ex: Arial/Verdana)
- cursive (ex: Bradley Hand ITC)
- fantasy (ex: Windings)
- monospace (ex: Courier New)
If a generic family is specified, the browser will select its favorite font in the specified family to display the text in. It is better to use generic families so that more browsers will be able to display your text. You can combine multiple fonts and generic families in the same line to try to give the browser multiple choices.
font-size:
This property specifies text size. There are several way to specify what size you want the text to be. Absolute size says: Thou shalt display the text at this size and leaves no room for questions. The size depends only on what the browser's resolution settings are. Absolute size names are: xx-small, x-small, small, medium (usually 12 pt), large, x-large, xx-large. You can also specify the font to be a certain size by saying font-size: 12pt;
Font sizes can also be set relative to their default size. You can use larger and smaller to make the text increase and decrease over what it is normally. You could also use percentage to display a font size of a specified percent of the original value.
font-weight:
This makes text darker or lighter. Values for this property are: normal, bold, bolder, lighter and number values of 100-900. Normal is 400 and 900 is the darkest.
font-style:
The font-style property allows you to make italic text. Values are normal, italic, and oblique. Oblique is normal text that has been rotated by the browser to make a slant.
color:
This property specifies text color (actually the foreground color, but it is usually the text color). You can use HTML full hex (#FFFFFF), three digit hex (#FFF), red-green-blue values (rgb(255,0,0)), or color names.
background:
The background property sets the background color and has the same values as the color property.
background-image:
This property sets the background image. There are two values for this property either a url of an image or blank.
Syntax: background-image: url("bkgrnd.gif");
background-repeat:
This property tells the browser how many times to repeat the background image on the screen.
Values are:
- repeat (repets vertically and horizontally to fill its area)
- repeat-x (repeats horizontally)
- repeat-y (repeats vertically)
- no-repeat (only one copy displayed)
background-position:
This atribute sets where the background image will be displayed within its specified area (box). This can be specified by percentage pairs: 50% 50%= 50% across 50% down (centered). Or as a words and word pairs which are combinations of center, top, bottom, right, and left. For example 50%50%= center center (also simpy center). Bottom left would be the same as left bottom and the same as 0% 100%.
Example:
/* (C)2003 BSD and Section Eight*/ <--Notes and copyright
/* Created 9/5/03 */
/* Last changed: 10/6/03 */
/* Universal Stuff */ <--What the following applies to
body{ /*rules defined for all within body tag */
background: #000; /*background color set to black (#000)*/
color: white; /*the foreground/text color is set to white*/
font-weight: normal; /*normal font weight*/
font-family: veranda, arial, sans-serif;
/*my first choice font is Veranda, 2nd choice is arial, and 3rd tells the browser to pick what ever sans-serif font it has if it cant find the first 2*/
text-align: left; /*this tells the text to be aligned to the left*/
cursor: crosshair; /*this makes the cursor look like gun crosshairs*/
}
H1, H2, H3 { /*The following rules define what headings 1,2,3 look like*/
color: white; /*white text*/
font-weight: bold; /*bold text*/
font-family: veranda, arial, sans-serif; /*my choice of fonts*/
text-align: center; /*centered text*/
}
<h5>Now try some CSS exercises for your self. (The answers will follow, but don't peek)</h5>
1. Make all heading 4 text red, bold, italic, and a member of the serif family.
2. Add a background image to all paragraph text. The image is called background.gif (located in the same directory as your HTML and CSS documents) and should not be repeated. Oh, and also the picture should be centered on the page.
Answers:
1.
H4{
color: red;
font-weight: bold;
font-style: italic;
font-family: serif;
}
2.
p {
background-image: url(background.gif);
background-repeat: none;
background-position: 50% 50%; /*could also be center or center center*/
}
This is just the tip of the CSS iceberg. I would like to thank you for reading this tutorial. I hope you learned something. In my next tutorial, I will continue with CSS. There will be some hard core CSS metaphysics, but I will also cover some very useful (and very attractive) uses of CSS. These will include mouse-over effects, buttons, tables, and CSS shorthand. Thanks again, and keep learning.
Written by: Darkwater685
Member of KB Tutorial Writers
|
|
This article was imported from the CyberArmy University site. (original author: )
There are no replies to this post yet.
|