CSS Tutorial

About CSS

CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers.
A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.
Version:
●   CSS1 was released in December 1996. Around 50 properties for simple formatting, fonts and colors.
●  CSS2 was released in May 1998. Additional 70 properties for more advanced features like numbering, cursors, and page breaks.
●  CSS3, the latest standard version.
Advantages:
Simplicity
●   A way to layout web pages without the use of complex tables and tricks.
Flexibility
●  A way for users to take control of how web pages are displayed.
Style Type:
There are three ways of employing CSS in Web pages:
Inline styles (in the tag)
Embedded or global styles ( in the head)
Linked or external style sheets

1. Inline Style in CSS

The Inline style is specific to the tag itself. Added to each tag; the style affects only that tag and has no effect in the rest of the document.
When and How?
● To format a single section in a page
● Problems arise when need to change styles frequently!
Add the style attribute to the HTML tag. Style declaration must be enclosed within double quotation marks.

<h1 style="color: blue"> Hello world! </h1>

<tag style="style declarations">
<p style="font-family: Arial,sans-serif; font size: 28pt;">
A paragraph with 28pt font size.
</p>

2. Embedded Style

●  An embedded style is applied throughout a page. Uses a <style> tag within the head section.
●  Within the <style> tag, enclose the style declarations needed for the entire Web page.
●  Controls style on a page basis
Syntax is:

<style type="style sheet language">
       style declarations;
</style>

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
             h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold}
        </style>
    </head>
    <body>
<h1>Hello world!</h1>
    </body>
</html>

A Style Declaration
●  A style declaration consists of attribute names that specify such features as:
            font size
            color
            font type
●  Attributes followed by colon and value
             selector {property: value}
●  Multiple attributes allowed (separate with ;)
●  The general syntax for the style declaration is:
             selector { property1: value1; property2: value2 }
A Style Anatomy

Selectors and Declarations
● Style declaration within the <style> tags obey the following syntax:

selector {attribute1:value1;attribute2;value2; ...}

● selector identifies an element in document, such as a heading or paragraph, and the attributes and values within the curly braces indicate the styles applied to all the occurrences of that element
● This collection of attributes and values is also referred to as the declaration of the selector.
Example

<style>
      h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold}
</style>

Problems with Embedded Styles
●  Each instance of a style must be hand coded, meaning that any document with lots of style changes becomes labor intensive.
●   Maintaining a consistent look and feel across pages is tough on a large site.
●   Making style changes to multiple pages is difficult and very time consuming.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
             h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold;color:blue}
             p {
  font-family: georgia, serif; 
  font-size: x-large;
  color:#ff9900;
  }
        </style>
    </head>
    <body>
<h1>Tutorials for RK EDU(tutorials.abssorganisation.com)</h1>
    <p>This is embedded style example</p>
    </body>
</html>