Cascading Style Sheets (CSS)

  BACK   HOME NEXT | Font-Family 

Basics Text Direction Meta Tags Colours Hex Colours Fonts Links Graphics
Lists Tables StyleSheets Word 1 Excel Paint Keyboard Accents

Table of Contents

External Style Sheets
Internal Style Sheets
Margin | Padding | Border
Inline Style Sheets
Using @import in CSS
The CLASS Attribute
The ID Attribute
The SPAN Element
The DIV Element
Indenting
Making a List
Drawing a Line


Implementing CSS

There are 4 ways of implementing CSS:
  • declare inline,
  • embed into the head of your document,
  • link to an external CSS file,
  • import a CSS file.

Let us get started with :

External Style Sheets

What For ?

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.

CSS Structure and Rules

Style rules are formed as follows:

Selector { property 1: value 1 ; property 2: value 2 ; property 3: value 3 }

NOTE :

  • Examples of Selectors :Body | p | Headers | table | td | th | hr | ul | ol | li
  • A Property is followed by ( : ), and a Value is followed by ( ; ).
  • The Style Sheet brackets are { }.

For example :

P { font-size : large ; color : blue }

Very Important :

  • The file of your External Style Sheet must be saved with a ( .css ) extension.
  • When you want to apply the properties of this Style Sheet to HTML pages, each page must have a link to the Style Sheet with this line in the Head section :

<Link rel="stylesheet" type="text/css"href="styles.css">

A TIP :

  • You have to name your Style Sheet, so ( styles ) can be replaced by any other name you like.
  • You can have more than one file of Style Sheets. Each file must have a different name.
  • Readability
    You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.

    h1 {
    color:blue;
    font-family:arial,helvetica,"sans serif";
    font-size:110%;
    }

 Top


View a List OF Styles

Properties
 Values
Font-Family : Helvetica | Impact | Verdana | Tahoma | Arial | Comic Sans Ms
Font-Size : px | percentage | small | medium | large | larger | x-large | xx-large
Font-Style : italic | oblique
Font-Weight : bold | Small-caps

    Notice that :
  1. Small-caps are capitals with uppercase characters slightly larger than lowercase.
  2. The font property is a shorthand.
    For example : P { font : #ff00ff italic bold 14pt Times, Verdana, serif }

Click here To know about Font-Family

Properties
 Values
Background-Color: #000080 | #0c0 | red | 0, 250, 0 | 0%, 80%, 0%
Background-Image :url(images/star.gif) | url(star.gif)
Background-Repeat :repeat | repeat-x | repeat-y | no-repeat
Background-Position:pixels | percentage | top | center | bottom | left | right
Background-Attachment:fixed

    Notice that :

  1. The background color of the page should be set side by side with the background image. If a background image can not be loaded for some reason, then the background color will be loaded instead.
  2. Remember to have a background color well-matched with your font color so that people can read your page.A good rule is to use a light background with dark text or vice-versa.
  3. The repeat value will repeat the image both horizontally and vertically.
  4. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically.
  5. By default, a background image will be positioned in the top left corner of the document.
  6. The property background is a shorthand.
  7. A background colour can be set for all html elements, like heading, paragraph, table, td, th, blockquote, ul, ol, pre.

 How to repeat a background image both horizontally and vertically
 How to repeat a background image only vertically
 How to repeat a background image only horizontally
 How to get a background image fixed
 How To position the background image using pixels.
 How to position a background image using percent( % ).
 How to use the background property as a shorthand.

Properties
 Values
Text-Decoration : none | underline
Text-Align :left | right | center | justify
Text-Indent :length | percentage
Letter/ Word –Spacing :0.1em | 0.2em | 0.4em

Notice that :

  • Text Indentation describes how much indentation to put between the first line of a paragraph and the margin.
  • Line Height would be to control the spacing between baselines of text.
  • A setting of 0 in (0.1em ) will prevent justification.

     How to set Text-Align || Text-Decoration || Text-Indent
     How to set Letter/ Word –Spacing : 1px | 3px | 5px.


    Margin / Padding / Border

      NOTE :
    1. The padding property describes how much space to put between the border and the content.
    2. The Rule can be padding-top or toppadding, margin-right or rightmargin and so on.
    3. If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

    Margin and Border

    Properties
     Values
    Width:thin | medium | thick | length | px | percentage
    Color:red | #800080 | #f0f
    Style:dotted | dashed | solid | double | groove | ridge | inset | outset

     How to set Margin || Padding || Border for an element : heading, paragraph, table, blockquote, pre.

     Top


    Embedded / Internal Style Sheets

    An Internal style sheet should be used when a single document has a unique style.
    The Internal Style Sheet is placed in the <HEAD> section of the web page.

    < html >
    < head >
    < title >Style Sheets </title >

    The Internal Style Sheet Form

    <Style Type="text/css">  OR   <Style>

    <!--

    Body {background : #FFCOCO }

    -->

    </Style>

    <style>
    <!--
    H1 { font-size: x-large ; color: red }
    -->
    </Style>

    </ head >
    </ body >

    NOTE :

     Top


    Inline Style Sheets

    Inline Styles ~ This applies CSS directly to each individual HTML element on your web page using the style attribute. It's handy for applying styles that you're not likely to repeat elsewhere. It is placed in the <body> section.

    <body style="background: #FF0000">

    <table style=width : 50% ; border : #006600 solid ; margin-left : 3cm >

    An Example Paragraph To Apply :

    <p style="color: #990000 ;font:'Times New Roman' ; margin-left: 30px">

    NOTE :

    Multiple word values must be enclosed in single quotation.

    The Result

    Inline Styles ~ This applies CSS directly to each individual HTML element on your web page using the style attribute. It's handy for applying styles that you're not likely to repeat elsewhere. It is placed in the <body> section.

     Top

    Using @import in CSS

    You can use the @import rule to import rules from other style sheets. You can also include an @import rule in a style sheet with styles.

    To use the @import rule, type:

    <style type="text/css">
    @import "styles.css";
    p { color : #f00}
    </style>

    The @import rule can be used in two ways. You can use :

    <style>
    @import "styles.css";
    </style>

    You can import a style sheet from within another stylesheet. So your document’s head could look like this:

    <link rel="stylesheet" type="text/css" href="styles.css">

    The Class Attribute

    To create a class, simply have :

    Consider the Following Classes:

    In Head Section:

    .old { color:lime; background: #ff80c0 }

    P.new {background:#99ff99;padding:10pt;font:verdana}

    In this case, the 'old' class may be used with any element (p, h1/2.., td, ol/ul, etc). The 'new' class is only applied to the P element.

    An HTML element can have different classes:

    p.one { color: #191970 }
    p.two { color: #4b0082 }

    td.a { background: #808000 }
    td.b { background: #99ff99 }

     Top

    The ID Attribute

    Each ID attribute must have ( # + a name )

    In Head Section:

    #web{color: #006600;font-style:italic;font-weight:bold;font-size:14pt;font-family:Verdana,Times, serif }

    In Body Section:

    <P id=web> Welcome to My Website</p>

    The Result:

    Welcome to My Website

     Top

    The < SPAN > tag :

    <Span Style ="a property : a value"> Text </Span>

    <Span class=??> Text </Span>

    <Span id=??> Text </Span>

    The <Span>tag is used within paragraphs.Span Element can accept the STYLE, CLASS, and ID attributes to change a word or sentence.

    Examples:

    1. Doctors warn people against the harmful effects of <span style="color:#ff0000">SMOKING </Span>: this bad habit that we must give up. </p>

      The result:

      Doctors warn people against the harmful effects of SMOKING : this bad habit that we must give up.

      In Head Section:

    2. .first { font: italic }
      #web {color:#006600;font:14pt bold italic}

      In Body Section:

      <span class=first>The first few words </span>of a paragraph could be in small-caps.

      <span id=web>Span Element</span> can accept the STYLE, CLASS, and ID attributes.

      <span style=font:14pt;color:#808000>Style may also be inlined.</span>

    The DIV Element

    First, DIV is short for "division". The DIV element may contain paragraphs, headings, tables, and even other divisions.

    In Head Section:

    .new {color:#006600;font:14pt;width:20% }

    In Body Section:

    <div class=new>
    <p>First, DIV is short for "division". The DIV element may contain paragraphs, headings, tables, and even other divisions.</p>
    </div>

    The result:

    First, DIV is short for "division". The DIV element may contain paragraphs, headings, tables, and even other divisions.

    Indenting : getting a margin space

    You can indent a Text of your web page using styles. Put these Styles Rules in the <head> section. <style type="text/css">
    <!--
    body
    {
    padding-left: 30px;
    padding-right: 30px;
    }
    .indent
    {
    padding-left: 40pt;
    padding-right: 40pt;
    }
    -->
    </STYLE>

    The First Styles Rule, body, will indent the Whole Page. To indent a Paragraph or the First Line of Each Paragraph, put The Text between <p class="indent"> and </P> tags.
    To indent more than one paragraph, use the <div></div> tags:

    <div class="indent">
    Text Text Text
    </div>

     How To Make Use Of an Image To Indent a Text.

    <center></center> Tags can be used to centere a section. It is best to use <div align= center> instead.
    Also, consider :
    ALIGN = RIGHT | JUSTIFY

    NOTE:

    <Blockquote> should not be used to indent sections of the page. Use <Blockquote> if you have a quotation. It is best to use Styles instead.

    Styling Tables with CSS

    IE6 for Windows does not support the border-spacing style. To get rid of the cell spacing you'll always need to use border-collapse, otherwise you'll need to add the cellspacing='0' attribute to your table.

    Without border-collapse attribute

    How to set Text-Align || Text-Decoration || Text-Indent
    How to set Letter/ Word –Spacing : 1px | 3px | 5px.

    With border-collapse attribute

    In Head Section:

    table.11 {border-collapse:collapse}

    The result:

    How to set Text-Align || Text-Decoration || Text-Indent
    How to set Letter/ Word –Spacing : 1px | 3px | 5px.

    Making a List

     How to Make a List Using CSS.

    Drawing a horizontal Line

    In Head Section:

    In Body Section:

    The result:




    In Head Section:

    In Body Section:

    NOTE:

    Line 4 width is 1%, and its height is 100px, so it is a vertical line.

    The result:





    THIS IS THE END

    To see my "CSS" that created this page, Click :
    View | Source

    BACK HOME Top NEXT | Word