This is going to be a very short post because all I'm saying here I should have said in the last one.
In the last post I have just briefly mentioned how to put CSS into an html document. I failed to mention what it is we're actually doing. It is all pretty simple and the syntax is the same in all three forms of integrating it into an html document. In the previous post I had two examples:
<body style="background-color: #000; color: #F00">
and:
p {color: #00F;}.
The only difference here is that in the first option we put the CSS code inside the html tag itself and thus we obviously don't have to specify which tag the CSS code applies to.
The second one is how it usually looks: We have a Selector and a declaration of property and value. Here we're giving the property color (for text foreground color) the value #00F, which is blue. The Selector can be either a tag, a class, or an ID. If we're writing code specific to one html tag we just put the exact tag into the CSS code, without the angle brackets, and define what we want to change. If we write code for an ID we're changing one specific tag inside the html document, for example:
#uniqueelement {color: #F00;}
defines a specific element that would look something like this in html:
<p ID="uniqueelement">some red text</p>.
If we were to put two html tags into the same document with the same ID, the browser should only apply the CSS to the first of them.
Classes are more useful in my opinion, in the CSS code you define a class by putting a dot before the name of the class and then just add your declarations:
.italic {font-style:italic;}. Then you add that class to the tags that you want to be printed italic:
<p class="italic">This part should be italic</p>. You can even use multiple classes inside the same html tag.
So with that you should be able to write your own basic CSS code and get all the style information out of the html tags. enjoy.
ps. I also think it's weird that I capitalize CSS but not html, but I think HTML looks weird.
Wednesday, August 25, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment