What's your style?
2012/02/23 Css resources, examples & tutorials for webmasters and online professionals
What's your style?
If you are new to css styles it might seem complex, but actually it is the best thing that happened to building web pages since the invention of sliced bread. In this tutorial some basic usage will be explained. To view the details of all the options that the different elements have use the menu on the left.
Let's begin
We begin by using the style element and setting the main (body) background color to white and the text color to red.
<style type="text/css" media="all">body {
color: red;
background: white;
}
</style>
Style elements are always placed in the head part of your web page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My first styled web page</title>
<style type="text/css" media="all">
body {
color: red;
background: white;
}
</style>
</head>
<body>
<p>This is the main content of my web page</p>
</body>
</html>
As you can see style elements start with the name of the element (in this case body) and than the actual definition between the two brackets { }.You can define multiple style parts for each element, like in this example where we set the background and text color in one definition. Color values van be given as a name (for common colors like white, black, red, blue, etc), hexadecimal RGB values like #ffffff (white) or #000000 (black) or decimal RGB values rgb(255, 255, 255) (white) or rgb(0, 0, 0) (black).
The following example defines the paragraph (p) element:
p{
background: #aaaaaa; /* this is light grey */
color: rgb(0, 255, 0) /* this is green */
}
As you can see you can comment your style sheet by using /* to open the comment and */ to close it.
Targeting elements
There are differents ways to define the styles for an element. As shown above you can directly style elements by using their html name. Examples are:body{ }
p{ }
h1{ }
a{ }
But what if you do not want to change all the links (a) but only 1 or 2? You can assign classes to do so:
Your html code might look like:
<p>This is a paragraph with <a href="http://google.com">different links</a> in it. It links to Google and <a class="saarun" href="http://saarun.com">Saarun</a>.
Your style sheet looks like
a{
color: red;
text-decoration:underline;
}
.saarun{
color: blue;
text-decoration:none;
font-weight:bold;
}
Leave a reply.