Tuesday 18 December 2012

Box Model


CSS BOX MODEL


All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.


  • Margin -The margin is the length between the border and the browser - <div class="margin">

    • .margin
    {
    width:100px;
    }
  • Border - A border that goes around the padding and content. The border is affected by the background color of the box- <div class="border">

    • .border
    {
    color:yellow;
    }
  • Padding - Clears an area around the content. The padding is affected by the background color of the box- <div class="padding">

    • .padding
    {
    width:100px;
    }
  • Content - The content of the box, where text and images appear-
    • <div class="content">

    .content
    {
    background: blue;
    color:yellow;
    }



    Bibliography

    Posted by at No comments:

    Tuesday 13 November 2012

    U20P1 - Explain how HTML files access CSS

     

    Features of web development -

    In the following post I would describe styling methods in CSS these are Inline, Internal and External.

    Inline

    HTML is used for layout
    CSS is used to format web pages
    The structure of CSS

    the CSS is attached to the HTML element e.g. <h1 style="color:blue;">
    • This code is useful if you need to use the style only once
    • Limitations are that if you need the style again you need to write the code again and every time you use it.
    • Has to be created and repeated for every task
    Advantages
    • The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider. It is also useful when designers are testing a web page and encouter a problem which can not be easily fixed. 
    Disadvantages
    •  Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.

    Internal

    the CSS is described in the <HEAD> tag e.g.
    <head>
    <style>
    h1{
    color:blue;
    }
    </style>
    </head>
    • Is useful for using one page because it can be carried on for a certain tag within that page
    • Not useful for multiple pages as they don't carry on 
    • Has to be entered once every page
    Advantages
    • Manage styling within a single document. Also Internal styles do not need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.
    Disadvantages
    • Hard to maintain consistency across several related web pages
    •  This method can’t be used if you want to use it on multiple web pages.

    External

    <head>
    <link rel="stylesheet" href="style.css">
    </head>
    • links to an external style sheet where the tag is entered
    • Most useful because it cam be carried on for a tag for multiple pages
    • Has to be entered once
    Advantages
    • Can link to multiple documents
    • By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages.
    Disadvantages
    • Takes longer typing it out for smaller websites

    Bibliography

    Posted by at No comments:
    Labels:
    Subscribe to: Posts (Atom)