Follow this link and you'll find a tool that allow you to experiment with CSS.
|
Note: unlike HTML CSS is case sensitive.
|
Fortunately, you know about CSS (Cascading Style Sheets), don't you? CSS is a way to assign rules how HTML objects should look in web browsers. These rules allow you to ' manipulate with fonts, colors, backgrounds, positions, spaces, sizes, etc of any particular object, some objects, or all of them at once. Every CSS rule has the form:
H2{
font-size: 110%;
font-family: Verdana;
}
Inline style is probably the easiest form of CSS. To apply particular rules to an object we need to specify parameter style of the object. The value of this parameter is a string with CSS rules separated with semicolon. Here is an example:
| Code | Result |
|---|---|
<span style="font-family:monospace; text-transform:capitalize;"> This text is displayed using CSS. </span> |
This text is displayed using CSS. |
For now we'll concentrate on embedding style sheets. To embed styles in your document inside the header of your documents we need to use tag <style> (requires the closing tag </style>). Inside the style tag we can write our style rules. Here is an example:
...
<head>
<title>My First Styled Page</title>
<style>
body { font-family: Verdana; font-size:90%; }
h3 {
background-color: darkblue;
color: yellow;
}
</style>
</head>
...
The rules we described in this style will be applied to the tag body; that is to the whole
document, and to all headers of the third level in the document, but to only documents where they are '
embedded into.
H2{
font-size: 110%;
font-family: Verdana;
}
In this example H2 is a selector; that is, these rules should be applied to all
second level headers in the current document. We also can apply the same rules to several tags. For example,
if we want to change all headers of levels 1 through 3 we can list them separating with commas:
H1, H2, H2 {
font-size: 110%;
font-family: Verdana;
}
We can also put some conditions on the objects we want to change. For example, if we want to change colors of emphasized text (inside em tag) only if this text is inside tables, then we can do this:
table em { color: red; }
For now we know how to redefine all elements created with a specific tag or some of them. However, CSS are much more flexible than that. We can assign the same style to all elements belong to a specific class. The following code creates new look for all elements of class example:
.example {
background-color: lightgrey;
font-family: Courier;
font-size: 85%
whitespace: pre;
}
But how we specify that a particular elements belongs to this new class. To do that we can use new
property class, which can be used with any tag. The next code has three elements of this
class:
This is <span class=example>my text</span>. And this is <a href="somewhere">a link</a>. This text is <em class=example>emphasized</em>, isn't it? <table class=example> ... </table>Thus elements span, em, end table are of the class example, and element a is not.
We can assign even more complicated conditions combining in the selector tag names and classes. For example, the following style will be applied only to the tables of class big:
table.big {
font-size: 125%;
border: 3px;
color: darkblue;
}
And finally, we can assign style rules to a specific element assigning an ID property of the element and setting rules for this ID:
#menu {
visibility: hidden;
position: absolute;
}
...
<div id=menu>This is a pop-up menu</div>
ID is one more parameter that can be applied to any tag, but unlike parameter
class value id supposed to be unique for each element you assign that property.
Property id also allows to access these IDentified elements via JavaScript and
change their styles on-fly.
P { font-family: "Letter Gothic MT", Times, fantasy; }
| Code | Result | |
|---|---|---|
.the_font { font-size: 1cm; }
...
<span class=the_font>This is this font</span>
|
This is this font |
| Code | Result | |
|---|---|---|
.bigger { font-size: 125%; }
...
This is normal font.
<span class=bigger>This is this bigger font.</span>
And this is normal font again.
|
This is normal font. This is this bigger font. And this is normal font again. |
Actually, there is one more property font, but that property doesn't give us any additional options. It only allows to set all the 5 previously mentioned properties in one statement. The syntax of this property is:
P { font: italic bold 12pt Times, serif; }
In this example we assigned the following values:
Follow this link and you'll find a tool that allow you to experiment with CSS.
|
|
Note: unlike HTML CSS is case sensitive.
|