Learning xHTML and CSS – day 5 of 30
Shown on the left is the end point of yesterday’s lesson. Again, we didn’t touch any of the xHTML markup, but rather used external CSS stylesheets to add style and pizzazz to our site. Let’s continue on this same road, add a few more style properties, and see what we can else we can do with the power of CSS.
The XHTML code until now:
<!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> <title>My first website</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>My first website!</h1> <p> Hello World! This is a paragraph! </p> <p> And this is another paragraph! </p> </body> </html>
The CSS code until now
body {
background-color: black;
color: white;
}
p {
background-color: gray;
font-weight: bold;
font-style: italic;
}
h1 {
background-color: #c3c3c3;
color: black;
font-size: 20px;
text-decoration: underline;
}
Okay. This is where we’re currently situated. Now let’s add a few more styles.
The border property
The border property is used to give xHTML tags (or elements) a…well…border. Couldn’t have guessed that could you! Let’s make our h1 tag have a solid border of 1 px in width with a red color:
Thus, we add this to our CSS file:
border: solid 1px red;
So our h1 style definitions look as follows:
h1 {
background-color: #c3c3c3;
color: black;
font-size: 20px;
text-decoration: underline;
border: solid 1px red;
}
The border definition gives the h1 tag a border. What type of border? A solid line (other types are dashed, dotted, etc…). How wide is the border? 1 pixel wide. And finally, what color is it? Red. The picture on the right shows the outcome of this definition. See that red border around the h1 tag?
Do you also see how the h1 tag is feeling a little smooshed within that border? We can tell the browser to give it a little room with CSS using the padding property.
The padding property
Let’s add this to our h1 tag definitions:
padding: 10px;
Combining our styles to:
h1 {
background-color: #c3c3c3;
color: black;
font-size: 20px;
text-decoration: underline;
border: solid 1px red;
padding: 10px;
}
Padding tells the browser to give the h1 tag a little room to breathe. How much room? 10 px. Where? In all four of the surrounding sides. You can also control the specific padding to each side, as follows:
padding-top: 10px; padding-bottom: 10px; padding-right:20px; padding-left: 20px;
But for now, let’s stick to the same padding in all four sides. This transforms our site to the picture on the right.
The last property we’d look at today is the CSS margin property. Do you see how the red border around the h1 tag is touching the paragraph ‘p’ tag. Let’s change that. Make things a little cleaner. Make the paragraphs move down a little.
This property is called the margin property. Similar to the padding property, margin can be specified as:
margin-top: [number in px]px; margin-bottom: [#]px; margin-left: 10px; margin-right:20px;So let’s give the h1 tag a bottom margin so it’ll push down the paragraphs a bit. Add this to our h1 definitions:
margin-bottom: 10px;That should do it. The picture on the right shows the outcome. Now isn’t that cleaner?
Summary
None of the xHTML code was modified today. All we touched on was the CSS. We added a few more styles to make our site look a little different. I know it’s still ugly, these yet simple examples always are. However, as we advance in the course, things will get a better look, just wait and see. Always remember the goal of the course. After 30 days, you’ll be able to write a website, from scratch, that looks and stands strong next to other sites. And you got this education for how much? Oh, that’s right. Free!
Well, that’s all for now, see you tomorrow!
Tags: course, css, free course, html, Stylesheets, tutorial, XHTML
