Keeping it Going
I am 10 chapters deep into Head First HTML with CSS & XHTML and I have to say that even though I have learned a lot about the ‘beginning’ of web design, I am still just a young pup compared to other people who have been doing this for many years. But I am not giving up on this and neither should you if you are just starting out like me. WGT!! (oh, by the way that stands for We Got This) I have found out that if you get overwhelmed with retaining all this information and knowledge, just take a break. Go for a run, do some laundry, or play with you kids. Find something to clear your head and when your brain is refreshed and clear, jump back into it will determination and dedication. Alright, now that we are ready, lets do this.
Major Renovations
In the past few blogs I have discussed some simple properties of elements, like size, color, and decorations. Now it is time to move onto bigger and better ways to tweak your website and really add some style to it. The first thing I learned about is what is known as the box model. What is this you ask. Well, it is how CSS sees elements. CSS treats every single element as if it were represented by a box.
From the prospective of CSS, every element is a box, as illustrated above. Every box is made up of a content area along with optional padding, border, and margins. The content area holds the content of the element like the text or an image. The content area is surrounded by optional transparent padding. An optional border can be placed around the padding, and finally, an optional transparent margin surrounds everything. All elements are treated as if they are boxes. For example, paragraphs, headings, block quotes, list, list items, and so on. Even inline elements like <em> and links are treated by CSS as boxes.
A Closer Look
You will be able to control every aspect of the box using CSS; the size of the padding around the content, whether or not the element has a border, and how much margin is in between your element and other elements. I will go over each part of the box in the following sentences. Every element starts out with some kind of content, like text or an image. Its content is placed inside a box that is just big enough to contain it. What is padding? Padding is an optional style. Any box can have a layer of padding around the content area. You can use padding to create a visual whitespace between the content and the border of the box. The padding will be transparent and has no color or decoration of its own. Using CSS you will be able to control the padding around the content area. You can control each side of the padding individually or all at once.
.WGT {
padding-left: 25px;
}
The above rule will add 25 pixels of padding to the left side of the content area only. If you wanted to add 25 pixels of padding to all sides your rule would look look this:
.WGT {
padding: 25px;
}
If you wanted to have different sizes of padding around your content area you could use a shortcut for the rule, instead of declaring each side a curtain size of pixels.
.WGT {
padding: 0px 20px 30 px 10px;
}
This shortcut will not only save you a little time but also add 0 pixels of padding to the top of the content, 20 pixels to the right, 30 pixels to the bottom, and 10 pixels to the left. Elements can have an optional border around them. The border will surround the padding forming a line, therefore; providing a visual separation from other elements. Borders can be various widths, colors, and styles. If you look at the picture above you will notice that the padding separates the content area from the border. The rule for adding border would look similar to this:
.WGT {
border-color: black;
border-width: 1px;
border-style: solid;
}
Here we are making the color of the border black, the width of the border 1 pixel, and the style just a solid line. There is a shortcut for this as well. To save some time you can do something like this:
.WGT {
border: thin solid #a7cece;
}
You can put your styles in any order. Shortcuts will save time with writing the code, but on the other hand, displaying each property and style will allow others to follow along with your code easier. Last but certainly not least, the margin. Margins are also optional and they surround the border. They allow you to put space between your element and other elements on the same page. If two boxes are next to each other margin will act as the space between the two. Same with padding, you can control the width of the entire margin, or of any particular side, (top, right, bottom, or left).
.WGT {
margin: 0px 20px 30 px 10px;
}
The class attribute
Let me back up a little and explain what exactly .WGT is. When you are wanting to add style to certain elements on your page you can add that element to a class in your HTML, as follows:
<p class="WGT">
WGT stands for We Got This. If you are a hater or nonbeliever, please exit my site. Thank you and God Bless.
</p>
This is pretty simple to understand. By adding the attribute class and the value WGT this will allow you to style this paragraph independently of the other paragraphs. The next thing to do is to go to your style sheet and add the rule like we have been doing above. Doing this, you can style the WGT paragraph without affecting the rest of your website.
The id attribute
Similar to a class, just add the attribute ‘id’ and choose a unique id name.
<p id="footer">
Please steal this page, it isn't copyrighted in any way
</p>
Unlike class, you can only have one element in your page with an id of footer. id attribute is what you will use when something is unique on your page, like a header or footer. You are going to have only one header and footer on your page. You could “simulate” a unique id with a class but there are many reasons not to. One reason is if you are working on a web site with a project team, one of your teammates may look at the class and think they will be able to reuse it with other elements, (an element can’t have multiple ids). But if they see an id, they will know that it is an unique element and won’t be able to reuse it for other elements. Using an id selector is very similar to using a class selector. To select an element by its id, you use a “#” character in front of the id (compared to a class, where you use a “.” in front of the class name). Say you want to select any element with the id “footer”:
#footer {
color: red;
}
The only difference between class and id is that an id selector should match only one element in a page. If you want to select any element that belong to the WGT class it would look like this:
.WGT {
color: red;
}
Baby Steps
After chapter 10 I am one step closer to my goal. This chapter has taught me construction on a box, an element box that is. I can now style individual elements, therefore, my site will begin to stand out a lot more. I will continue to work hard as I learn web design and also continue to share my experience and knowledge with the world. As always, keep learning, keep coding….WGT!!