CSS Tutorial

What is CSS?

Cascading Style Sheets, popularly called CSS, is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page.
Using CSS, we can control:

The color of the text
The style of fonts
How tables are sized and laid out
What background images or colors are used
As well as a variety of other effects.

Advantages of CSS

Serial no.	Advantages
1.	CSS saves time
2.	Pages load faster
3.	Easy maintenance
4.	Superior styles to HTML
5.	Multiple Device Compatibility

Who maintaines CSS?

CSS is created and maintained by a group of people within the W3C called the CSS Working Group.
The CSS Working Group creates documents called specifications.
These specifications are called recommendations because the W3C has no control over the actual implementation of the language. It depends on the browser.

CSS Syntax

selector { property : value; }

Selector: A selector is an HTML tag on which style will be applied. This could be any tag like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.
Value: Values are assigned to properties. For example: color property can have value either red or #F1F1F1 etc.

Example:


<html>
     <head>
           <style type=“text/css”>
    p
    {
        color:red;
        text-align:center;
    } 
            </style>
     </head>
     <body>
    <p>Hello Students! Welcome to CollegeAcademy.</p>
    This paragraph is styled with CSS.</p>
      </body>
</html>

Output:


    
                                Hello Students! Welcome to CollegeAcademy.
                                This paragraph is styled with CSS.

Types of CSS Files

There are 3 choices available to use CSS in our HTML file:

Internal CSS
External CSS
Inline CSS

Internal CSS

In this ,we place the CSS code within the <head></head> tags of each HTML file which we want to style with CSS. The format for this is:


<head>
    <title>….</title>
    <style type=”text/css”>
        CSS Content Goes Here
    </style>
</head>

In Internal CSS , each HTML file contains the CSS code needed to style the page.
Meaning that any changes we want to make to one page, will have to be made to all.
Internal CSS is good only if we need to style just one page, or if we want different pages to have varying styles.

External CSS

In this ,we place the CSS code within a separate file and save it with .css extension.
Then in the section of each HTML file which we want to style with CSS we use the tag to link the CSS file.
The format for this is:


<head>
<title>…</title>
<link rel=”stylesheet” type=”text/css” href=“Path To css file” />
</head>

By using an external style sheet, all of our HTML files link to one CSS file in order to style the pages. This means, that if we need to alter the design of all our pages, we only need to edit one .css file to make global changes to our entire website.
Here are a few reasons why this is better.
1. Easier Maintenance
2. Reduced File Size
3. Improved Flexibility

Inline CSS

Inline styles are CSS styles that are applied to one element using the “style” attribute.
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
It’s format is


<body>
<tag style=“css property”> some text </tag>
</body>

Comments in CSS

A CSS comment begins with "/*", and ends with "*/“.


<style>
    p
    {
        /*color:red; */
        text-align:center;
    } 
</style>

Selectors in CSS

Selector is used to select or point to a specific element within the page.
Following are the most commonly used selectors:
Universal Selector
Type Selector
ID Selector
Class Selector

The Universal Selector

The Universal Selector is indicated by * and applies to all the elements of a page.
For example :
The following rule set changes all the element font name to “Arial”


*
    {
        font-family: Arial;
    }

The Type Selector

The Type Selector allows us to create styles that apply to a specific type of HTML element.
The style will be applied to all the elements of that type in the web page
For example :
The following rule set changes color of all h1 tags to green.


h1
    {
        color: green;
    }

The ID selector

The Id selector is always prefixed by a hash symbol(#) and allows us to refer to a single element in a page.
With Id selector we can change the appearance for that single element.
For example :
The following rule set changes font style to italic for element whose id is “intro”


#intro
{
    font-style: italic;
}

The Class Selector

The Class Selector enables us to style multiple HTML elements through the class attribute. It is always prefixed by a dot symbol(.) Class selector enables to apply same type of formatting to a number of unrelated elements.
For example :
The following rule set changes font and color for element with class “highlight”


.highlight
    {
        font-weight: bold;
        color: red;
    }

ID v/s Class

There is often confusion about when it is appropriate to use CSS IDs and when CSS Classes should be used.The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify multiple elements. Thus,ID's are unique. Each element can have only one ID. Each page can have only one element with that ID. Classes may or may NOT be unique. We can use the same class on multiple elements.

Grouping Selectors

Grouping of selectors is done when we want to apply the same style to different elements.
For Example:


h1,h2,h3,h4,h5,h6
    {
        color:red;
    }

Combining Selectors

Combining selectors is done so that we can hierarchically point to a specific element within the page.
For example:


p.main
    {
        font-size: 26px;
    }

The above rule set says:
Change the font size of only those “paragraphs” which have a class attribute set to “main”

Descendent Selectors

Combination of selectors can also use descendant technique.In CSS, a descendant means an element that is a child, grandchild, great grandchild, and so on,of another element. Descendant selectors apply style based on whether one element contains another.
For Example:


p a
    {
        font-weight: bold;
        color: red;
    }

The above rule applies to all the anchors which are placed within the tag.

Next tutorial

College Academy
Author- Chitranshi
( Core Member )