Learning some shorthand CSS (MFW#7)

“My First Website” series navigation: first postwhole series

mfw7In 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:

#pagewrap {
    width: 800px;

    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;

    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;

    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}

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:

    border: 1px solid #000000;

If we don’t specify top, right, bottom, or left in the border property, then a complete square border will be created.

Easy padding

The padding code can be shorted to one line:

    padding: 50px;

Just like the border property above, this will add 50 pixels of padding all around.

Minimized margin

Differing from the padding and border code, the margin code is a little longer:

    margin: 30px auto 30px auto;

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:


clock

Here’s a little more detail:

margin

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:

    margin: 30px auto;

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:

#pagewrap {
    width: 800px;
    border: 1px solid #000000;
    margin: 30px auto;
    padding: 50px;
}

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:

View the web page

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:

h1 {
    margin: 0;
    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.

View the result

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? ;)

Your homeowork

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!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



4 Responses:

  1. Joe

    David,
    Thanks so much for these lessons. I’m currently in the process of trying to set up a web page and possibly start into setting up on on-line store. Your demos and explanations of how HTML and CSS work are a godsend. Please keep them coming!!!! I’m also looking at starting a blog and will use your model as a reference. Best of luck with your site and thanks again.
    Joe

  2. Case Ernsting

    Great tips David! I’m playing around with CSS too and I like to think of the four values in the margin declaration in the North-East-South-West arrangement. The clock works too, as you showed.

  3. Piers

    Very clear and easy to follow. Really impresses the stages of website building much better than other websites. Thanks a lot!

  4. Wendy

    Hi David,
    We are revamping our website literally and even though we pay for a web service and website monitoring, changes, etc….and I did the last one I have learned much about what NOT to do. So….since I have to get all the data together for the new one I wanted to make sure I at least looked at it the way I am supposed too. There is one thing that stood out more than any other and I thank you for it. I even made myself a little paper taped to my monitor like a fortune from a cookie that repeats what you said…
    “Every element on your design should be placed with a clear reason in mind. Every element needs to have a visual connection with every other element.”

    Thank you for all the help. It meant so much to me for looking inside the box from outside edges. Thanks! Wendy


Share your thoughts below: