“My First Website” series navigation: first post — whole series
In the last post in this series we centered our web page, added some padding and margins, and put a border around it all. But, in order to do so, it took about 13 lines of CSS code. Ouch! Most people, after seeing that much coding, would give up the idea of hand-coding a website and run to a WYSIWYG visual editor.
Never fear, there are actually a few ways to take that obnoxiously long CSS code and shrink it down to only 4 lines! In this post, you’ll learn how to miniaturize your CSS code and — as promised — talk about some spacing anomalies.
Recap: the full CSS code
Here’s the full CSS code for our “style.css” file we ended up with in the last post:
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
We won’t be making the “width” declaration any shorter because we can’t (so I won’t be including it in the following examples) but everything else can! Here we go…
The quick border code
We can quickly replace all four lines of the CSS code that makes the square border with this simple shorthand line of code:
If we don’t specify top, right, bottom, or left in the border property, then a complete square border will be created.
The padding code can be shorted to one line:
Just like the border property above, this will add 50 pixels of padding all around.
Differing from the padding and border code, the margin code is a little longer:
What does it all mean? Read on…
Tick-tock, think like a clock
The four values in the margin declaration list the margin distances in this order: top, right, bottom, left. The easy way to remember this is to imagine a clock:
Here’s a little more detail:
Each value can be different. For example: margin: 10px 50px 25px 30px; is perfectly fine. Also, padding can be written this way if each value is different.
A little shorter
The margin declaration can be shortened even further:
In this case, the first value of “30px” is for the top and bottom. The second value of “auto” is for left and right. You can use this shorthand for padding as well.
The final cleanup
We can now replace all of that lengthy CSS code for the #pagewrap with the following:
border: 1px solid #000000;
margin: 30px auto;
If you haven’t done so already, update your “style.css” file to the above code. You can then look at your “index.html” file in your browser. If all went well, you shouldn’t see any difference!
Some spacing anomalies
We declared that the padding should be 50 pixels all around. But if you look carefully you’ll notice that the padding at the top and the bottom look larger than on the sides (i.e. there is a greater distance between the top border and the “A Level 1 Heading” than there is between the left border and the text.) Here’s the web page to check out:
The reason is the <h1> heading and the <p> paragraphs have their own margins and padding. Both of these come from your browser’s default style sheet. You can change them by making your own style declarations in your “style.css” file. Let’s do that now by adding the following code:
padding: 0 0 10px 0;
This CSS code will remove the margins on the <h1> heading and add 10px of padding at the bottom to give us some space between the heading and the first paragraph.
While this is closer to what we want, it’s still not perfect. There is still the issue of line-height that is adding some extra space above our heading and the issue of extra padding after the last paragraph. But since we’ve covered a lot of ground today, let’s cover those topics in a later post, shall we?
As always, take some time to play around with the values for the padding and the margins. If you’re feeling adventurous, add some CSS to the h3 heading.
In the next post we’ll take a look at dividing up our web page even further by creating a separate header section for our website’s title and adding a little background color as well.
See you then!