We have already learnt about HTML. But, a major drawback of it is, for creating a large number of web pages, if we want to apply the same style in all the pages then we have to either type the same formatting tags or copy and paste. Thus, it can be time consuming and leads to troublesome. To overcome this problem, we make use of CSS.


What is CSS? 


  • CSS stands for Cascading Style Sheets. It is used to describe the presentation of any document which is written in markup language.
  • Styles define how to display HTML elements.
  • A style sheet contains different tags and attributes which are linked to web pages. Hence, the web pages reflect the same effects of tags mentioned in the style sheet.
  • CSS can be combined with HTML or XML to develop web pages.

Advantages of CSS

  • CSS allows us to specify formatting styles for different HTML tags only once. Hence, it saves time to develop web pages.
  • CSS helps in reducing the bandwidth usage as a style file can be linked to many web pages.
  • It can control the layout of multiple web pages all at once. 
  • It is easy to maintain as the specified changes made in CSS files get reflected in all the specified web pages. 
  • It supports all web standards and browsers.

  •  CSS makes downloading the lighter web pages/ websites faster than the heavier ones.


CSS Syntax

Selector{Property: Value}

Syntax Explained

Selector: It is an HTML tag to which style is applied such as <P>, <H>, etc.

Property: It is a type of attribute of HTML tag such as color, margin, etc.

Value: Values are given to properties such as pink value to color property, 3 value to border and so on.


Example




Types of style sheets


1. Internal or Embedded  Style Sheet

It is  defined in the same HTML page in which we want to use the styles. It is used for a single web page. In this, the style rules are mentioned in the header section of the HTML page. The <STYLE></STYLE> tags are used to define and contain the styles.  <STYLE> tag has a main attribute i.e. TYPE which has the value "text/css". It specifies the style sheet language as a content-type.


Example

<!DOCTYPE html>

<html>
<head>

<title>Internal Style</title>

<STYLE TYPE = "text/css">

H1
{color: green;}

H2
{color: blue;}

</STYLE>
</head>

<body>

<H1>INTERNAL STYLE SHEET</H1>

<H2>Using CSS.</H2>

<P>Let's learn CSS. This is an example of Internal Style Sheet.</P>

</body>
</html> 

OUTPUT:


2. Inline Style Sheet

When we define a style rule for a single tag in the HTML page itself, then it is known as defining an inline style. To define it, the STYLE attribute is inserted in the specific tag for which we want to apply a unique style. The STYLE attribute can contain any CSS property and value.

Syntax:

<TAG STYLE="...style rules..."


Example

<!DOCTYPE html>

<html>
<head>

<title>Inline Style</title>

</head>
<body>

<H1 STYLE= "color: green;">INLINE STYLE SHEET</H1> 

<H2 STYLE= "color: blue;">This is an example of Inline Style Sheet</H2> 

</body>
</html>
OUTPUT:



In the above example, styles are defined using STYLE attribute in <H1> and <H2> tags.


2. External Style Sheet

In this, the style rules are defined in a separate style file and the style file is linked to one or many web pages. This external style sheet is saved as a separate text style sheet file with an extension dot css (.css). This style sheet file can be linked to any HTML document using <LINK> tag. <LINK> tag has two mandatory attributes i.e. TYPE and HREF. 

    TYPE attribute: Its value is "text/css".

HREF attribute: Its value is style sheet file name with which it's saved. It specifies the style sheet file containing the style rules. It accepts the URL of the .css file to be linked as the value. 

Example:

Below is the code for external style sheet file. 

body

{background: #D6CFC7;}

H1

{

color: green; 

font-weight: bold;

}

H2

{

color: blue;

text-align: left;

}

Now, save the above file with .css extension say 'external.css'.


Below is the code for HTML page containing the link to external style sheet file 'external.css'.

<!DOCTYPE html>

<html>
<head>
<title>External Style</title>
<LINK TYPE="text/css" rel= "stylesheet" href= "external.css">
</head>
<body>

<H1>EXTERNAL STYLE SHEET</H1>
<H2>This is an example of External Style Sheet</H2>

</body>
</html>

OUTPUT:



Note: The <LINK> tag is an empty tag for which its closing is not required.


Precedence of Style Sheet

CSS provides us a feature to apply multiple style sheets to the same HTML page. In cases when multiple style sheets are linked and applied to a single web page, the style sheet actually applied is based on the priority. Following is the precedence order of style sheets:


  • Internal Style Sheet: It has the highest priority. It will override any rules defined in external and inline style sheet.

  •  Inline Style Sheet: It has the second priority after internal style sheet. It will override any rules defined in External style sheet.

  • External Style Sheet: It has the least priority. Its rules will be applied only when the above two rules are not applicable.