Styling you page using Cascading style sheets.
Fourteen years ago(from today 2008) a guy called Håkon Wium Lie created the first version of Cascading style sheets for HTML and similar markup languages. The intention was to devide the strukture containing data and the semantics describing the layout of the data. Later this language has evolved and became a W3C standard. Now, this blogposts will describe a couple of ways to implement CSS to your web page. You are welcome to comment and ask questions. I will respond as well as I can.
Now, in the previous bloggpost I described how to implement an external css file to your webpage. You can do this in three ways actually. Either in the header, in an external document linked in the header or you can add it to a specific element by using the style attribute. Below is given an example of the three. You may use one or more of the method, just remember that the last one read by the browser, is the one that will be executed.
A browser starts reading documents from the top and down. That means if you link a style sheet in the header and declares a style as an attribute in an element, the attribute will be the one executed. Actually the browser executes the first one and then changes again whan a new argument is called. Another thing to remember is that if you set style to paragraphs in the header it will effect all paragraphs, but if you do the same in a single paragraph element, it will effect that element only.
Now on with the code...
The content of the css file can have exactly the same syntax as the css code above. The file can be called mystyle.foo for that matter - what makes the browser realize that it is reading CSS code is that you say so. You do so by going: type="text/css". Now let me give you an example on how to style an element. Most elements can be styled. You can change size, colors, position and much more. The next code snippet shows how to style a paragraph in three ways.
This was fairly simple. You now know how to set style to elements, id's and classes - and you know the syntax. First the element you want to style, and then the style options in a couple of curly parentheses. Now all you have to do is to find out how you can style your page, and last but not least how you want it to be styled. In my next blog post I will go through a couple of ways to do that. But for that you will have to wait a bit - I'll post it next time.
So until then - happy coding:)
Now, in the previous bloggpost I described how to implement an external css file to your webpage. You can do this in three ways actually. Either in the header, in an external document linked in the header or you can add it to a specific element by using the style attribute. Below is given an example of the three. You may use one or more of the method, just remember that the last one read by the browser, is the one that will be executed.
A browser starts reading documents from the top and down. That means if you link a style sheet in the header and declares a style as an attribute in an element, the attribute will be the one executed. Actually the browser executes the first one and then changes again whan a new argument is called. Another thing to remember is that if you set style to paragraphs in the header it will effect all paragraphs, but if you do the same in a single paragraph element, it will effect that element only.
Now on with the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<!-- Now this links to an external css file called foo.css-->
<link rel="stylesheet" href="css/foo.css" type="text/css" />
<style type="text/css">
p{
margin:0px;
padding-left:50px;
width:600px;
height:400px;
background-color:green;
}
</style>
</head>
<body>
<p style="font-size:12pt;background-color:blue;">Blue text with font size 12.</p>
</body>
The content of the css file can have exactly the same syntax as the css code above. The file can be called mystyle.foo for that matter - what makes the browser realize that it is reading CSS code is that you say so. You do so by going: type="text/css". Now let me give you an example on how to style an element. Most elements can be styled. You can change size, colors, position and much more. The next code snippet shows how to style a paragraph in three ways.
In the HTML document:
<p id=myParagtraph" class="myParagraphClass">This is a paragraph... foo</p>
In the css file(or other implementation):
/* This code makes the paragraph 600px wide, 400px high and the background green. In addition eveything inside the paragraph, including the text, will mode 50px left from the left border if the paragraph. This implementation will effect all paragraphs in the document until further changes have been made. */
p{
margin:0px;
padding-left:50px;
width:600px;
height:400px;
background-color:green;
}
/* Here the paragraph/element with the ID "myParagraph" will get a new background color - blue */
#myParagraph{
background-color:blue;
}
/* Here all the elements of the class "myParagraphClass" gets a yellow background.*/
.myParagraphClass{
background-color:yellow;
}
Note:
// Comments in CSS is done like this...
/* or like this... */
This was fairly simple. You now know how to set style to elements, id's and classes - and you know the syntax. First the element you want to style, and then the style options in a couple of curly parentheses. Now all you have to do is to find out how you can style your page, and last but not least how you want it to be styled. In my next blog post I will go through a couple of ways to do that. But for that you will have to wait a bit - I'll post it next time.
So until then - happy coding:)
Comments
Post a Comment