Learning CSS – A Quick & Useful Introduction

Want to learn CSS fast? This tutorial should help you understand what it is and how it works. Read on and in no time you’ll be modifying your website’s design to your heart’s content.

What is CSS?

Cascading Style Sheets is a part of a website that dictates its design. There are two common ways of adding CSS to your website. The standard way is to link a separate stylesheet file ( e.g. Style.css ) into your website’s head. This file will contain most of the website’s needed CSS codes. Another way to add CSS is to add it Inline with your HTML element ( e.g. <p style="color: red;">This is a text</p> )

Understanding CSS Syntax

To modify the design of an HTML element first we indicate the CSS Selector then add one or more CSS Properties wrapped inside curly brackets. The CSS Selector can either be an HTML Element ( body, div, span, p, a ), an element ID ( #container, #header ), an element Class ( .entry-content, .widget ) or a combination of all of them. Each individual property with value ends in a semi-colon ( ; )

CSS Syntax

selector { property: value; }

As an example, consider the HTML structure below.

<body>
     <div id="container">

          <div id="header"></div>

          <div id="content">

               <div class="entry-content">
                    <p>This is a sample content.</p>
               </div>

               <div id="sidebar">
                    <div class="widget"></div>
                    <div class="widget"></div>
               </div>

          </div>

     </div>
</body>

Lets say we want to set the header’s background color to white. Following the CSS Syntax, we come up with this:

#header { background-color: #FFFFFF; }

As stated previously, we could declare one or more CSS properties inside a selector’s curly bracket. For example, let’s say we want to:

  • Set our whole website’s width to 940px then make it display in the middle.
  • Let’s make our .entry-content area have a background-color of black.
  • Let’s also set the text of “This is a sample content” to white.

We could write our CSS like this:

#container {
     width: 940px;
     margin-left: auto;
     margin-right: auto;
}

.entry-content {
     background-color: #000000;
     color: #FFFFFF;
}

Note: The text “This is a sample content” is inside the .entry-content div. Therefore, it will inherit the CSS Property which is color: #FFFFFF;

Shorthand CSS

Some CSS properties like “Margin” can be written in shorthand fashion. Normally, you would assign a value for the margins like this:

margin-top: 2px;
margin-left: 4px;
margin-right: 6px;
margin-bottom: 8px;

Instead, you can assign their values just by writing a single line.

margin: 8px; All sides are given a margin of 8px.

margin: 8px 10px; 8px for top & bottom, 10px for left and right.

margin: 8px 6px 10px; 8px for top, 6px for left and right, 10px for bottom.

margin: 2px 6px 8px 4px; top = 2px, right = 6px, bottom = 8px, left = 4px

Other properties like “Padding” can be written in the same shorthand style as the sample above.

Another example:

font-weight: bold;
font-size: 15px;
line-height: 22px;
font-family: Tahoma, Arial, Sans-serif;

Shorthand CSS for Font

font: bold 15px/22px Tahoma, Arial, Sans-serif;

Share This Post

3 Comments

Add a Comment
  1. Thanks for this short and sweet instalment. I’ve been looking for a quick (hit and run) way of learning code syntax. Cant fly by the seat of my pants forever. lol. BTW – love Frontier.

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>