|
CSS are actually very easy to use. You first address the element or tag that you want to apply the style to.
This, for instance, could be all paragraph tags (<p>). You then add a pair of opening and
closing braces ({ and } respectively), and within these you refer to the property you want to affect
(for instance text-align would address the alignment of text). Finally you set the value of the property
with a colon (:) followed by the value, and end with a semi-colon (:center;).
So put all this together and it could look something like this:
p { text-align:center; }Pretty simple I am sure you will agree. You may also add spaces, new-lines, tabs, etc. to make you code more readable. So for instance, the following code is the same as the code above:
p {
text-align : center;
}Formatting your code something like the above example can add greatly to the readability of your code, especially when you have several definitions. For example, I am sure you will agree the following code:
p {
background: transparent;
border: 1px solid black;
color: red;
text-align: center;
}…is more readable than this code:
p { background: transparent; border: 1px solid black; color: red; text-align: center;}You should find it easier to identify where one property ends, and another begins (by new-lines in this case). Although when you are using style inline you will probably use it like in the second example anyway, but we will come to that in a minute.
So that is how to write some basic CSS commands, but how do you implement it? Well, there are three main ways to do it:
…each of which is explained below:
Using style inline is probably the easiest to start off with as it is used in a similar
manner to other HTML attributes.
You simply add the attribute <style> to the tag you want to affect:
<p style="text-align: center;">Some paragraph text</p>That will make the text Some paragraph text
be aligned centre.
You can embed all of your commands in a special <style> tag (not attribute)
in the <head> section of your HTML document:
<head>
<style type="text/css"><!--
p {
text-align: center;
}
--></style>
</head>That would affect all paragraph tags on your page. You can affect only particular tags of your choosing, but I will show you how to do that later.
Now you may have noticed that there are comment tags (<!-- & -->) in between the <style> and
</style> tags. The reason for that is that some (very) old browsers, or non-visual browsers do not understand CSS commands,
and some of them will simply output all of the text within the <style> and
</style> tags to the screen. And that is not exactly desirable, is it?
So we add comments around the style definitions, and all browsers that understand CSS simply ignore the comment tags,
and read the content within, and old browsers treat it as a comment and read nothing until they find the ending tag (-->).
Note: You should only use the comments when you are defining style in the
<head> of your document, nowhere else.
This is, in most cases at least, the best way of using style.
You define all of your commands in a separate text file (usually with the extension of css),
then import it into your HTML document using the <link> element
in the <head> of your document.
So if, for example, you had all of your CSS commands in a file named style.css,
you could import it into your document like so:
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>Then all of the commands in that CSS file would affect all of the HTML document in question. There are several advantages of this method, which are outlined below:
Comments are text in your CSS code that the browser will ignore.
This is useful for documenting why you have done something,
and can be a great use when you come back to edit your code months later.
To include comments you simply encase the text within /* and */.
They may span several lines, and you can also use them to hide parts of your code
(rather than just comments to whoever is reading your code) from the browser
(this may be useful, for example, if you are having trouble, and want to stop part of your CSS from functioning temporarily):
p {
text-align: right; /*Make the text align to the right*/
border:1px dashed black; /*A black dashed line
around the paragraph*/
/*THIS LINE IS GIVING ME TROUBLE, SO I HAVE COMMENTED IT OUT:*/
/*float: left;*/
}Before we finish this section I should mention a couple of important things:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta> tag in your documents:
<meta http-equiv="Content-Style-Type" content="text/css" />So now you have learnt the basics of how to use CSS, you will probably want to test out your new-found skill. So here are few exercises you can try your hand at:
text-align;left | right | center | justifybackground-color;red | #ff00ff | transparentcolor;blue | #00ff00 | rgb(0,0,0)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="language" content="en" />
<title>CSS Exercise</title>
</head>
<body>
<p>This is Paragraph number 1.
It should be <strong>center aligned</strong>.</p>
<p>This is Paragraph number 2.
It should be <strong>left aligned with blue fore colour,
and red back colour</strong>.</p>
<p>This is Paragraph number 3.
It should be <strong>right aligned with black fore colour
and transparent back-colour</strong>.</p>
</body>
</html>
|
