Monday, February 6, 2012

Lesson 10: Margin and padding

In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.
  • Set the margin in an element
  • Set the padding in an element
Set the margin in an element
An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.
As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.














The CSS code for this would look as follow:
       
        body {
               margin-top: 100px;
               margin-right: 40px;
               margin-bottom: 10px;
               margin-left: 70px;
        }
       
       
Or you could choose a more elegant compilation:
       
        body {
               margin: 100px 40px 10px 70px;
        }
       
       
·         Show example
You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:
       
        body {
               margin: 100px 40px 10px 70px;
        }

        p {
               margin: 5px 50px 5px 50px;
        }
       
       
·         Show example
Set padding in an element
Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.
The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:
       
        h1 {
               background: yellow;
        }

        h2 {
               background: orange;
        }
       
       
·         Show example
By defining padding for the headlines, you change how much filling there will be around the text in each headline:
       
        h1 {
               background: yellow;
               padding: 20px 20px 20px 80px;
        }

        h2 {
               background: orange;
               padding-left:120px;
        }
       
       
·         Show example
Summary
You are now on your way to master the box model in CSS. In the next lesson, we will take a closer look at how to set borders in different colors and how to shape your elements.
Posted by Free E-books at 9:02 PM 0 comments
Labels:

Lesson 9: The box model

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:
The box model in CSS













The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):
       
        <h1>Article 1:</h1>

        <p>All human beings are born free
        and equal in dignity and rights.
        They are endowed with reason and conscience
        and should act towards one another in a
        spirit of brotherhood</p>
       
       
By adding some color and font-information the example could be presented as follows:







The example contains two elements: <h1> and <p>. The box model for the two elements can be illustrated as follows:Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.
<% '
The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:
'
'
'
'
'
When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.
%>
Summary
In this lesson you have been introduced to the box model. In the following three lesson we will take a closer look at how to create and control elements in the box model.
Posted by Free E-books at 9:02 PM 0 comments
Labels:

Lesson 8: Grouping of elements (span and div)

The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.
In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.
  • Grouping with <span>
  • Grouping with <div>
Grouping with <span>
The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.
An example of this could be this Benjamin Franklin quotation:
       
        <p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
       
       
Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:
       
        <p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
       
       
The CSS belonging to it:
       
        span.benefit {
               color:red;
        }
       
       
·         Show example
Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.
Grouping with <div>
Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.
Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:
       
        <div id="democrats">
        <ul>
        <li>Franklin D. Roosevelt</li>
        <li>Harry S. Truman</li>
        <li>John F. Kennedy</li>
        <li>Lyndon B. Johnson</li>
        <li>Jimmy Carter</li>
        <li>Bill Clinton</li>
        </ul>
        </div>

        <div id="republicans">
        <ul>
        <li>Dwight D. Eisenhower</li>
        <li>Richard Nixon</li>
        <li>Gerald Ford</li>
        <li>Ronald Reagan</li>
        <li>George Bush</li>
        <li>George W. Bush</li>
        </ul>
        </div>
       
       
And in our style sheet, we can utilize the grouping in the exact same way as above:
       
        #democrats {
               background:blue;
        }

        #republicans {
               background:red;
        }
       
       
·         Show example
In the examples above, we have only used <div> and <span> on very simple things such as text and background colors. Both elements have the potential to do much more advanced things. However this will not be introduced in this lesson. We will look into these later in this tutorial.
Summary
In lesson 7 and 8, you have learned about the selectors id and class and the elements span anddiv.
You should now be able to group and identify, more or less, all parts of a document, which is a big step in the direction of mastering CSS. In lesson 9 we will introduce you to the box model.
Posted by Free E-books at 9:02 PM 0 comments
Labels:
Subscribe to: Comments (Atom)
Related Posts Plugin for WordPress, Blogger...