CSS Tutorial

CSS Tutorial

Css Tutorial
Css Tutorial

CSS Tutorial


What’s CSS?

  • CSS means Cascading Style Sheets
  • CSS how HTML elements should be shown on screen
    paper, or perhaps in other media
  • CSS saves lots of work. It may control design of multiple          webpages all at one time
  • External stylesheets are kept in CSS file

CSS Demo Body HTML Page – Multiple Styles!
         Wish to consider show one HTML page displayed with four different stylesheets. Click the “Stylesheet 1”, “Stylesheet 2”, “Stylesheet 3”, “Stylesheet 4” links below to determine the various styles:


Why Would You Use CSS?

CSS can be used to define styles for the webpages, such as the design, layout and variations in display for various devices and screen sizes.

CSS Solved a large Problem

HTML never was meant to contain tags for formatting an internet page!

HTML was produced to explain the information of the web site, like:

<h1>This can be a heading</h1>

<p>This can be a paragraph.</p>

When tags like <font>, and color attributes were put into the HTML 3.2 specs, it began a nightmare for web-developers. Growth and development of large websites, where fonts and color information were put into each and every page, grew to become a lengthy and costly process.

To resolve this issue, the internet Consortium (W3C) produced CSS.
CSS removed the style formatting in the HTML page!


CSS Saves lots of Work!
The style definitions are usually held in exterior .css files.
By having an exterior stylesheet file, you are able to change the feel of a whole website by altering only one file!


CSS Syntax

A CSS rule-set includes a selector along with a declaration block:
The selector suggests the HTML element you need to style.
The declaration block contains a number of declarations separated by semicolons.

Each declaration features a CSS property name along with a value, separated with a colon.

A CSS declaration always ends having a semicolon, and declaration blocks are encircled by curly braces.

Within the following example all <p> elements is going to be center-aligned, having a red text color:
CSS tutorials

CSS Selectors
CSS selectors are utilized to “find” (or select) HTML elements according to their element name, id, class, attribute, and much more.

The element Selector
The element selector selects elements in line with the element name. You are able to select all <p> elements on the page such as this (within this situation, all <p> elements is going to be center-aligned, having a red text color):



The id Selector

The id selector uses the id attribute of the HTML element to pick a particular element.
The id of the element ought to be unique inside a page, therefore the id selector can be used to pick one unique element!

To pick a component having a specific id, write a hash (#) character, adopted through the id from the element.
The style rule below will be relevant to the HTML element with id=”para1″:



The class Selector
The class selector selects elements having a specific class attribute.
To pick elements having a specific class, write a period of time (.) character, adopted named the class.
Within the example below, all HTML elements with class=”center” is going to be red and center-aligned:

CSS Selector
CSS Selector

You may also specify that just specific HTML elements should have a category.
Within the example below, only <p> elements with class=”center” is going to be center-aligned:


CSS tutorials
CSS tutorials


HTML elements may also make reference to several class.
Within the example below, the <p> element is going to be styled based on class=”center” and also to class=”large”:


CSS tutorials
CSS tutorials


Grouping Selectors
For those who have elements with similar style definitions, such as this:


CSS tutorials
CSS tutorials

It will likely be easier to group the selectors, to reduce the code.
To group selectors, separate each selector having a comma.
Within the example here we have grouped the selectors in the code above:


CSS tutorials
CSS tutorials

CSS Comments
Comments are utilized to explain the code, and could help whenever you edit the origin code later on.
Comments are overlooked by browsers.

A CSS comment always goes by /* closes the syntax with */. Comments can also span many lines:

CSS tutorials
CSS tutorials

CSS How You Can…

Whenever a browser reads a style sheet, it’ll format the HTML document based on the information within the style sheet.

3 Ways to Insert CSS
You will find 3 ways of inserting a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

Exterior Style Sheet
By having an exterior style sheet, you are able to change the feel of a whole website by altering only one file!
Each page must incorporate a mention of exterior style sheet file within the <link> element. The <link> element goes within the <head> section:


CSS tutorials
CSS tutorials

An exterior style sheet could be designed in any text editor. The file shouldn’t contain any html tags. The style sheet file should be saved having a .css extension.
This is how the “mystyle.css” looks:


CSS tutorials
CSS tutorials

Note: Don’t give a space between your property value and also the unit (for example margin-left: 20 px). The right way is: margin-left: 20px


Internal Style Sheet
An interior style sheet can be utilized if a person single page includes a unique style.
Internal styles are defined inside the <style> element, within the <head> portion of an HTML page:


CSS tutorials
CSS tutorials

Inline Styles
An inline style enables you to use a unique style for any single element.
To make use of inline styles, add some style attribute towards the relevant element. The style attribute can contain any CSS property.

The instance below shows how you can alter the color and also the left margin of the <h1> element:


CSS tutorials
CSS tutorials

Tip: An inline style loses most of the benefits of a style sheet (by mixing quite happy with presentation). Make use of this method sparingly.



Multiple Style Sheets
If some qualities happen to be defined for the similar selector (element) in various style sheets, the worth in the last read style sheet is going to be used.


CSS tutorials
CSS tutorials

When the internal style is determined following the connect to the exterior style sheet, the <h1> elements is going to be “orange”:


CSS tutorials
CSS tutorials

However, when the internal style is determined prior to the connect to the exterior style sheet, the <h1> elements is going to be “navy”:

CSS tutorials
CSS tutorials


Cascading Order

What style is going to be used when there’s several style specified to have an HTML element?

In majority cases we are able to state that all of the styles will “cascade” right into a new “virtual” style sheet through the following rules, where number 1 has got the best priority:

1.Inline style (in a HTML element)

2.Exterior and internal style sheets (within the mind section)

3.Browser default

So, an inline style (in the specific HTML element) has got the utmost priority, meaning it’ll override a style distinct within the <head> tag, or perhaps in an exterior style sheet, or perhaps a browser default value.

Latest posts by shravan (see all)