#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » uCoz » About CSS Basics
About CSS Basics
How's This Tutorial?
1. Best [ 0 ] [0.00%]
2. Excellent [ 0 ] [0.00%]
3. Very Good [ 0 ] [0.00%]
4. Good [ 0 ] [0.00%]
5. Not Bad [ 0 ] [0.00%]
6. Awful [ 0 ] [0.00%]
7. Nothing Helped [ 0 ] [0.00%]
Answers total: 0
SirDarknight(Tonmoy)Date: Tuesday, 03.05.2011, 06:15 | Message # 1
Group: Verified
Posts: 167
Awards: 6
Status: Offline

CSS Introduction

What You Should Already Know

Before you continue you should have a basic understanding of the following:

  • HTML / XHTML

    What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files


    Styles Solved a Big Problem

    HTML was never intended to contain tags for formatting a document.

    HTML was intended to define the content of a document, like:

    Code
    <h1>This is a heading</h1>


    This is a paragraph.</p>

    When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

    To solve this problem, the World Wide Web Consortium (W3C) created CSS.

    In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

    All browsers support CSS today.


    CSS Syntax

    A CSS rule has two main parts: a selector, and one or more declarations:

    The selector is normally the HTML element you want to style.

    Each declaration consists of a property and a value.

    The property is the style attribute you want to change. Each property has a value.

    Please Give Me A Reputation or Award If My Post Helps You
    •  
    SirDarknight(Tonmoy)Date: Tuesday, 03.05.2011, 06:29 | Message # 2
    Group: Verified
    Posts: 167
    Awards: 6
    Status: Offline

    CSS Styling



    Styling Backgrounds


    CSS background properties are used to define the background effects of an element.

    CSS properties used for background effects:



    • background-color

    • background-image

    • background-repeat

    • background-attachment

    • background-position


    Background Color

    The background-color property specifies the background color of an element.

    The background color of a page is defined in the body selector:

    Code
    body {background-color:#b0c4de;}

    With CSS, a color is most often specified by:

    Quote
    a HEX value - like "#ff0000"
    an RGB value - like "rgb(255,0,0)"
    a color name - like "red"

    In the example below, the h1, p, and div elements have different background colors:

    Code

    h1 {background-color:#6495ed;}
    p {background-color:#e0ffff;}
    div {background-color:#b0c4de;}

    Background Image

    The background-image property specifies an image to use as the background of an element.

    By default, the image is repeated so it covers the entire element.

    The background image for a page can be set like this:

    Code
    body {background-image:url('.gif/.jpg/.png');}

    Below is an example of a bad combination of text and background image. The text is almost not readable:

    Code
    body {background-image:url('urlforimage');}

    Background Image - Repeat Horizontally or Vertically

    By default, the background-image property repeats an image both horizontally and vertically.

    Some images should be repeated only horizontally or vertically, or they will look strange, like this:

    Code
    body
    {
    background-image:url('http://i51.tinypic.com/kb9k4o.png');
    }

    If the image is repeated only horizontally (repeat-x), the background will look better:

    Code
    body
    {
    background-image:url('http://i51.tinypic.com/kb9k4o.png');
    background-repeat:repeat-x;
    }

    Background Image - Set position and no-repeat

    When using a background image, use an image that does not disturb the text.

    Showing the image only once is specified by the background-repeat property:

    Code
    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    }

    In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

    The position of the image is specified by the background-position property:

    Code
    body
    {
    background-image:url('http://i51.tinypic.com/293cz8i.png');
    background-repeat:no-repeat;
    background-position:right top;
    }

    Please Give Me A Reputation or Award If My Post Helps You
     
    SirDarknight(Tonmoy)Date: Tuesday, 03.05.2011, 06:32 | Message # 3
    Group: Verified
    Posts: 167
    Awards: 6
    Status: Offline

    CSS Box Model

    The 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.

    The image below illustrates the box model:

    Explanation of the different parts:

    Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
    Border - A border that goes around the padding and content. The border is affected by the background color of the box
    Padding - Clears an area around the content. The padding is affected by the background color of the box
    Content - The content of the box, where text and images appear


    In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
    Width and Height of an Element

    Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.

    The total width of the element in the example below is 300px:

    Code


    width:250px;
    padding:10px;
    border:5px solid gray;
    margin:10px;

    Let's do the math:
    250px (width)
    + 20px (left and right padding)
    + 10px (left and right border)
    + 20px (left and right margin)
    = 300px

    Imagine that you only had 250px of space. Let's make an element with a total width of 250px:

    Code
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;

    The total width of an element should always be calculated like this:

    Total element width = width + left padding + right padding + left border + right border + left margin + right margin

    The total height of an element should always be calculated like this:

    Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin


    Browsers Compatibility Issue

    If you tested the previous example in Internet Explorer, you saw that the total width was not exactly 250px.

    IE8 and earlier versions includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.

    To fix this problem, just add a DOCTYPE to the code:

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
    </style>
    </head>

    Please Give Me A Reputation or Award If My Post Helps You
     
    Forum » For webmasters » uCoz » About CSS Basics
    • Page 1 of 1
    • 1
    Search: