Styling your elements.
A few weeks ago I promised to create a few examples on how to style different elements using CSS. We have already seen how to do this in several different ways but not so much which options we have for the specific element. First we need a webpage and we will start with a simple one like the example below. It contains of a small collection of elements. There are three DIV containers used to limit the geometry of the child elements. Also there are an unordered list, UL, and a paragraph, P. Last but not least there are a collection of links, A HREF, in the list functioning as a menu.
The containers mainly limit the space that the child elements use on the web page. In addition, any styling settings set on these, or any parent, will be inherited by their children if they do not change the specific setting. So if we set the font in the container, say the "mainContainer", every child element will inherit this font. The next snippet of code shows how to set the geometry of the div element and some properties for any child elements of the container.
This example sets the font to "Comic Sans" and if not installed "Comic Sans MS". (If neither are installed the default font will be chosen.) Further more the font color is set to #333333(dark gray), the font size set to 12px (remember that there is a difference between 12px and 12pt) and last but not least the font weight is set to normal and the text alignment is set to justify. You can look up the available options for each of these properties at W3.org/Style/CSS.
The second part of the properties makes up the different settings regarding the elements geometry. As we want to have absolute control of where the element is placed within its parent (Note: it is displayed inside the parent so if the parent has a margin, this will affect the placement of the element.) we set position as absolute. Then we tell the browser to place the element 150 px from the top of its parent top border and 50 px to the left of its left border. We also want the child elements inside the "mainContainer" to be placed 15 px from any of the sides of the parent. You can do this in two ways.
First, you can set the margin of the parent, thus pushing every element away from the parents' borders. However, if you only want one element to be pushed away from its surroundings, you can use padding which tells the browser to place this element x px away from every element, both parent and siblings. Finally we set the height and width of the element. The last part sets the background color, image and repeat frequency of the background image.
From what I see I've actually covered many of the properties needed, but I've got a couple of other things to show before we wrap this up. We now have a container placed and a bunch of things inside it with only parts of the styling finished. We want the two other containers placed beside each other and the content placed properly. First of is placement of the containers. We want them lined up horizontally (side by side) and filling the space of the parent element. In addition we set a margin inside both elements so the text inside doesn't get crammed against the "wall" of the parent element.
The text inside the "mainText" element already has a font set to it. Still we don't want all these settings to apply to the links inside the "menuContainer". The menu items (the list elements) should have different behaviour in different settings. By using the "state selectors" we can apply different behaviour on all kinds of elements. As you might have noticed in the HTML snippet above I declared the elements members of a class named "menulink".
You can not have more than one element with a certain id (it would not be valid), so using classes when setting the same properties to several elements is the right thing to do unless you actually enjoy repeating yourself - as some people do. Anyways, I only want to do this once, and the way to implement the CSS combining class name, element type and state is showed in the snippet below.
So what we have done on the last snippet is to set the properties for the menu links when they are hovered, active and normal (not clicked, hovered or activated in any way). We want the links to change color when the cursor is hovering over them and loose the text-decoration (loose the underlining of the link). In addition we throw in a slight padding when the links are hovered. Just for good measure :) So this pretty much wraps up the example and this blog entry. I hope you've enjoyed it as much as I have :) However, you are welcome to comment, cheers or boo at you own will to give me feedback. If I've made any mistakes you are welcome to correct me as well.
So until my next entry, happy coding :)
<!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>
<link rel="stylesheet" href="css/foo.css"
type="text/css" />
</head>
<body>
<div class="mainContainer">
<div id="menuContainer">
<ul>
<li><a href="www.engvoldsen.net/morten"
class="menulink" >myPage</li> </a>;
<li><a href="www.engvoldsen.net/morten"
class="menulink" >myPage</li> </a>;
<li><a href="www.engvoldsen.net/morten"
class="menulink" >myPage</li> </a>;
</ul>
</div>
<div id="mainText">
<p style="font-size:12pt;background-color:blue;"
>foo bar</p>
</div>
</div>
</body>
The containers mainly limit the space that the child elements use on the web page. In addition, any styling settings set on these, or any parent, will be inherited by their children if they do not change the specific setting. So if we set the font in the container, say the "mainContainer", every child element will inherit this font. The next snippet of code shows how to set the geometry of the div element and some properties for any child elements of the container.
.mainContainer{
/* Font and alignment */
font-family:"Comic Sans", "Comic Sans MS";
color: #333333;
font-size:12px;
font-weight:normal;
text-align: justify;
/* Geometrical properties */
position:absolute;
top:150px;
left: 50px;
margin:15px;
width:400px;
height:400px;
/* Background settings */
background-color:#000000;
background-image:URL(../images/bckgr2.png);
background-repeat:no-repeat;
}
This example sets the font to "Comic Sans" and if not installed "Comic Sans MS". (If neither are installed the default font will be chosen.) Further more the font color is set to #333333(dark gray), the font size set to 12px (remember that there is a difference between 12px and 12pt) and last but not least the font weight is set to normal and the text alignment is set to justify. You can look up the available options for each of these properties at W3.org/Style/CSS.
The second part of the properties makes up the different settings regarding the elements geometry. As we want to have absolute control of where the element is placed within its parent (Note: it is displayed inside the parent so if the parent has a margin, this will affect the placement of the element.) we set position as absolute. Then we tell the browser to place the element 150 px from the top of its parent top border and 50 px to the left of its left border. We also want the child elements inside the "mainContainer" to be placed 15 px from any of the sides of the parent. You can do this in two ways.
First, you can set the margin of the parent, thus pushing every element away from the parents' borders. However, if you only want one element to be pushed away from its surroundings, you can use padding which tells the browser to place this element x px away from every element, both parent and siblings. Finally we set the height and width of the element. The last part sets the background color, image and repeat frequency of the background image.
From what I see I've actually covered many of the properties needed, but I've got a couple of other things to show before we wrap this up. We now have a container placed and a bunch of things inside it with only parts of the styling finished. We want the two other containers placed beside each other and the content placed properly. First of is placement of the containers. We want them lined up horizontally (side by side) and filling the space of the parent element. In addition we set a margin inside both elements so the text inside doesn't get crammed against the "wall" of the parent element.
#menuContainer{
position:relative;
height:400px;
width:200px;
margin:5px;
}
#mainText{
position:relative;
height:400px;
width:400px;
margin:10px;
}
The text inside the "mainText" element already has a font set to it. Still we don't want all these settings to apply to the links inside the "menuContainer". The menu items (the list elements) should have different behaviour in different settings. By using the "state selectors" we can apply different behaviour on all kinds of elements. As you might have noticed in the HTML snippet above I declared the elements members of a class named "menulink".
You can not have more than one element with a certain id (it would not be valid), so using classes when setting the same properties to several elements is the right thing to do unless you actually enjoy repeating yourself - as some people do. Anyways, I only want to do this once, and the way to implement the CSS combining class name, element type and state is showed in the snippet below.
a.menulink{
position:relative;
text-decoration:none;
color:#ffffff;
padding-top:0px;
}
a.menulink:hover{
position:relative;
/*font-weight:bold;*/
text-decoration:none;
color:#FFFF99;
left:0px;
top:2px;
}
a.menulink:active{
text-decoration:none;
color:#ffffff;
}
/* a:visited {color:#000066 ;}*/
So what we have done on the last snippet is to set the properties for the menu links when they are hovered, active and normal (not clicked, hovered or activated in any way). We want the links to change color when the cursor is hovering over them and loose the text-decoration (loose the underlining of the link). In addition we throw in a slight padding when the links are hovered. Just for good measure :) So this pretty much wraps up the example and this blog entry. I hope you've enjoyed it as much as I have :) However, you are welcome to comment, cheers or boo at you own will to give me feedback. If I've made any mistakes you are welcome to correct me as well.
So until my next entry, happy coding :)
Comments
Post a Comment