CSS (which means Cascading Style Sheets according to AbbreviationFinder) is like a type of style sheet that describes how the various elements are to be presented. You “steal” your documents, compare to Word’s stylesheets. For example, you will not be bound by the default sizes of the headings (H1). You can specify your own wishes regarding size and color, etc.
When working with style sheets, it is important that you print all final tags, even those that are not mandatory – otherwise you may get unwanted results as certain elements inherit properties from the element they are in, you talk about boxes in Style Sheets – each Elements consist of one or more boxes (premium for those interested, see links at the bottom for more details). In your style sheet you specify which elements to format, and talk about how.
You should be aware that sometimes there is still poor support from some browsers for this (including Netscape), so take this opportunity to try to look at the result at least with the two biggest * giants *, Microsoft Internet Exlorer ( MSIE) as well as Netscape. MSIE 3. * and up and Netscape 4. * and up support Style Sheets. Unfortunately, this may differ in the interpretation of CSS in Netscape Netscape 6. * and earlier versions. Netscape 7. * and Mozilla have better support. Add to that many things only work in MSIE. You should be aware of this and know it. Many examples at the bottom of the page only work in MSIE.
An example of how you write:
p { font-family: Times; color: blue }
It is important that everything is written correctly with spaces, commas, semicolons, colon and “gull wings” in the right direction.
In the example above you can see that you first write what is to be changed, here p then a gull wing. The attribute (property), this font-family is followed by a colon, then spaces the value here as Times. After this comes a separating semicolon and a space. Then comes the next attribute, colon, space, and value. Since nothing further follows, there will be no further semicolon without a closing gull wing.
You can list more elements that should have the same properties, in this case specify that in each paragraph (p) and each table cell (td), the font should be 15pt (dots),
p,td { font-size: 15pt }
In the example below you can see that the blue color of the piece (p) is inherited by the element b (bold)
<p style=”color: blue”>blå <b>boldad</b> text</p>
In the example below this is broken by the fact that * steals * also in another color
<p style=”color: blue”>blå <b style=”color: red”> röd boldad</b> text</p>
blue bolded text
blue red bolded text
More about the attributes (properties)
You have a table of examples of different attributes (not all but the most useful) and some of its values, click here! A complete list can be found at http://www.w3.org/ for level 1 CSS1. A list for level 2 CSS2 can be found here! Many great links and tips can be found here! Do you want to validate your code? Look here ! The most common area of use is to format text, with style sheets there are many ways to influence the layout of the page, more than with regular HTML – which is not a “layout language” directly 😉 without a simple selection language.
To specify what the fonts should look like, for example, via font-family, font-style font-weight and font-size. In the example below, note that each new attribute is separated by a semicolon (;) and keep in mind that there may be unintentional line breaks in the sample code.
p { font-family: Times, serif; font-size: 12pt; line-height: 20pt; font-weight: bold; font-style: italic }
Instead of sitting and writing all different font attributes as in the example above there is a shortcut. Note 12pt / 20pt, font-size before any line-height. The shortcut means a little less to write.
p { font: 12pt/20pt Times, serif bold italic }
When specifying font-family, you can specify multiple font options separated by a comma. Include a security option at the end that most people have on their computer. If the font has two words in the name without a hyphen, the quotation mark is used.
p { font-family: “Courier New”, Arial, sans-serif }
The text itself can be formatted, for example, via the text properties text-decoration, word-spacing, letter-spacing, text-align and text-indent. The code below should give paragraphs (p) underlined text, straight margins and indent the first line of each new paragraph and remove the underline on links (a).
p { text-decoration: underline; text-align: justify; text-indent: 2cm }
a { text-decoration: none }
With Style Sheets you can give each element a background image, foreground and background color via color, background-color, background-image, background-repeat and background-position. Colors are indicated, among other things, through the 16 most common colors, see below and hexadecimal # ff00ff – here without the usual comma-signs.
| black | silver | Gray | lime |
| maroon | ed | purple | fuchsia |
| Green | white | Olive | yellow |
| Navy | blue | teal | aqua |
The code below gives the link green color on the text and the box that a represents gets a yellow background.
a {color: green; background-color: #ffff00 }
You can enclose a background image on the page via:
body { background-image: url(bild.gif) }
Please note that the path to the file is specified in parentheses () and that you omit the comma characters that you are probably quite used to surround a url (address) with here. Do you want to give the background a property that, for example, should only be displayed once and not repeated * tijlas * as usual, type as below. Keep in mind that there may be unintentional line breaks in the sample code.
body { background-image: url(bild.gif); background-repeat: no-repeat background-color: blue }
Here, too, there is a shortcut if you have several things that will change the background:
body { background: url(bild.gif) no-repeat blue }
You can specify the element’s margins and location, its box properties. This is done via margin-top, margin-right, margin-bottom, margin-left, border-width, border-color and float etc.
body { margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px }
There is a shortcut to printing this code above. The order is top – right – bottom – left when it comes to margins.
body { margin: 5px 10px 15px 20px }
body { margin: 10px }- all margins 10 pixels
body { margin: 10px 20px }- in pairs top-bottom and left-right
When it comes to margins and text-indent (indentation), negative numbers can be used to get special effects.
body { margin-right: 15%; margin-left: 15% }
p { text-indent: -20px }
Divide into classes
You can have different styles of items. box 1<h1>. Then you divide them into different classes. Then when you are going to use them on the web page you are only talking about which class you want to use of h1.
H1 { font-size: 20pt; color: red }
H1.a { font-size: 15pt; color: blue }
H1.b { font-size: 10pt; color: green}
<h1> Red 20pt </h1>
<h1 class = a> Blue 15pt </h1>
<h1 class = b> Green 10pt </h1>
You can also create a special class to assign multiple elements. You name the class with a name but before that name you put a point. Don’t forget this point (.).
.namnet { font-size: 10pt; color: blue }
Then you format your elements by calling the class.
<h1 class = name> Header with blue text, 10pt </h1>
<p class = name> Piece of blue text, 10pt </p>
There is something called pseudo-classes. A link (a) can be displayed in three different ways according to html, to separate them and specify how to format them, enter a colon (:) after a and * position *.
A: link is the same as an “un-clicked” link
A: visited is a link that you already clicked at once
A: active is an active link
A: hover – popular in Explorer, the link colors when the mouse is moved over it
a:link { color: blue }
a:visited {color: green }
A:hover { color: red }
a:active {color: yellow }
Method 1 – an external file
You can create an external “template” that applies to one or more pages simultaneously, a .css file. Then link to this .css file in the documents it is to apply to. Great if you have several pages that you want to “steal” at the same time. How to link to your .css file if it is in the same folder as your document. If you choose to place the file elsewhere in your directory structure, make sure that you specify the correct path, see Html and File name / paths.You “call” your .css file as below in the document’s head tags.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>min hemsida</title>
<link rel=stylesheet href=”egenmall.css” type=”text/css”>
</head>
You write the file in a text editor and save it as a .css file, here in the example eigenmall.css. Then you link to this template file (as the example above shows) from each document to be formatted according to the style file stored in the file. It should look like below, so no html formatting at all.
body { background-color: red }
h1 { font: 30pt “Courier New”; color: green }
h1.a { font: 20pt Arial; color: blue }
p { font: 10pt Arial; color: black}
Met od 2 – embedded
If you only want to make a style sheet for only one page, you can put it inside the head (in the head of your document). you then code your template into the document itself. Don’t forget to put the style sheets information yourself as a hidden comment, otherwise older browsers may display the entire code as it doesn’t understand and can interpret Style Sheets.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Min hemsida</title>
<style type=”text/css”>
<!–
body { background-color: yellow }
p { color: blue }
h1 { font-size: 45pt }
–>
</style>
</head>
<body> Här kommer ditt dokument.
</body>
</html>
Method 3 – single elements
You can “steal” part of the document. Easiest to start with if you are a beginner. Your “steal” is encoded within the tag you want to change.
<p style=”color: blue”>Stycke med blå text</p>
Note that in method 3 you have commas around the attribute / value you specify by style, you would need to quote something within the string using a single quotation mark then (‘). Don’t forget to enter the end tags! If you want to “steal” only one heading, it may look like this, see the example below:
<h2 style=”font-family: ‘Courier New’, helvetica; color: blue”>
<h2> This is a common heading </h2>
This is a * hassle * heading
If you just want to change one word or some words, you can use <span style=”color: red”>Några röda ord</span>
some red words I formatted as above.
Span is used to format text in elements, so you can surround one or more elements as above, do not forget the end tag. But if it is more than text you want to change and that it should also extend over several elements, you can use div.
<div style=”font-size: 8pt; color: blue; line-height: 10pt”>
<p> Se exemplet nedan.
<ul>
<li>listpunkt 1</li>
<li>listpunkt 2</li>
</ul>
<p> nytt stycke inom div
</div>
The text in the paragraph becomes blue and 8 pt.
The row height was set to 10 pt.
- The list is within div
- thus it looks the same.
This paragraph will be the same as the paragraph above the list,
even this row.
Mixing methods
You can mix the different methods, which are specified closest to the element of the html document. If you have a template in a .css file, you are not bound to it evenly and constantly; even if you have the path to a template that you call override it locally in the document using both methods 2 and 3. See more about this in Example. below.
Examples of “stagling”
When you look at the examples below, not everything will work, depending on what browser you have. Would like to point out again that the support is sometimes bad for Style Sheets, so when you make your website check it in both Netscape and MSIE or make two variants of the website. You can then redirect the visitor depending on which browser he has, a good javascript can be found under the section Active X.
