Learning xHTML and CSS – day 6 of 30
It’s been 6 days and already we have created a simple xHTML document. We learned some valuable and fundamental xHTML tags and begun our journey into the world of website design and style using CSS definitions. Today will be the last day that we focus on CSS and leave the xHTML alone. Tomorrow, we’ll modify some of the xHTML tags, add a few more tags to give us more room for playing around/styling, and start working towards the final structure of our website.
To recap:
This is where we currently stand with xHTML markup:
<!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>
And this is where we currently stand with CSS style definitions:
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;
border: solid 1px red;
padding: 10px;
margin-bottom: 10px;
}
What’s next?
The text-align property
CSS allows us to choose a text-alignment just like Word does. If you call, Word has four text alignment options: left aligned, centered, right aligned, and justified. Well, CSS has those exact same features with these definitions:
text-align: right; text-align: left; text-align: justify; text-align: center;
So now, given those properties, let’s right align the paragraphs. Add this to your ‘p’ selector CSS definitions:
text-align: right;
And the result is shown in the picture on the right.
For those of you who want to make websites in languages reading Right to Left, you’ll find yourself in a serious situation if you don’t declare a right to left reading direction in CSS. Here’s how I recommend doing that. I won’t take a screenshot of what this looks like because I won’t add it myself, but just know that in case you want to write a website in Hebrew, Arabic, or any other right-to-left language, you should add this to your ‘body’ selector definitions:
direction: rtl;
So that your body becomes:
body {
background-color: black;
color: white;
direction: rtl;
}
But, like I said, I’m going to remove it from my ‘body’ definitions since we’re writing in English.
The last thing I’ll introduce today, which may be a little too complicated for this part of the course, is called a pseudo-selector. What’s a pseudo-selector? It’s a selector that modifies a primary selector. Enough with this mumbo jumbo, how does it look like? Like this:
selector:pseudo-selector { styles go here }
I’ll introduce one pseudo-selector in this lesson and then we’ll forget about it until later in the course. The pseudo selector in question is called the first-child pseudo selector. If we declare this:
p:first-child {
color: blue;
}
The first paragraph (‘p’ tag) will have a color blue, while the rest of the paragraphs will be in the previously determined color (white in our case). So let’s actually add that to our CSS file and see what we get (shown right).
Well, we got nothing different then what we had before. And why do you suppose that is?
It’s simple, the :first-child selector targets the first-child of the targeted tag. In other words, the first-child new definition we have added to our CSS only targets the first paragraph that goes directly beneath the <body> tag. If we, for example, now add a paragraph tag directly beneath (also known as first-child) the <body> tag, we’ll get this:
Thus, I’ve added a paragraph (‘p’) tag to the xHTML, and so our HTML is currently the following:
<!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> <p>This is a direct descendent paragraph of the body tag. It can also be called the first-child paragraph.</p> <h1>My first website!</h1> <p> Hello World! This is a paragraph! </p> <p> And this is another paragraph! </p> </body> </html>
And our CSS is the following:
body {
background-color: black;
color: white;
}
p {
background-color: gray;
font-weight: bold;
font-style: italic;
text-align: right;
}
h1 {
background-color: #c3c3c3;
color: black;
font-size: 20px;
text-decoration: underline;
border: solid 1px red;
padding: 10px;
margin-bottom: 10px;
}
p:first-child {
color: blue;
}
And the resulting outcome of this is the picture shown on the right. Notice how the first paragraph, which is the first-child of the <body> tag, is blue-colored, while the rest of the paragraphs are white. Let’s now delete that first-paragraph from the xHTML and delete the first-child CSS style definition so that we go back to a clean beginning for tomorrow.
Summary
We learned some text-align CSS definitions today as well as introduced the concept of a pseudo-selector. I didn’t originally intend to change the markup code, but things had to be done…
Be sure to subscribe to the RSS feed so you can get the new post by email. Also, feel free to contact me with any questions or use my contact form to send me any private comments or questions.
Thanks for reading!
Learning xHTML and CSS, a 30 day course, for FREE. This is Day 2 of 30
Day 1 of 30 – The basics
A simple javascript client-side validation
Well, the topic of discussion for today’s blog post is text boxes. There are a wide variety of actions commonly used with text boxes. For example, their radius, their border, their focus event, their hover event, and so forth. In this article, we’ll discuss some of these actions/behaviors.