Cascading Style Sheet

CSS or Cascading style sheet is the style sheet language of web, used to style or formatting of an HTML document. Without CSS, it is easier to build a website as css can style whole website using one single css file.

HTML Vs CSS
CSS Tutorial

Before we had CSS, all of the styling of HTML was embedded directly in the html document- like, attributes width or bgcolor (background color) or in the form of presentational tags like font, center, strike etc.
Using separate style sheet for an entire site, a developer can apply styles across a whole site while updating a single css file.

Css was Developed by Hakon Wium Lie of MIT in 1995. In 1996, level 1 of CSS was published, level 2 comes in 1998 and level 3 ( CSS3) in 2009 with HTML5.

With HTML5, CSS has become the W3C standard for controlling visual presentation of web pages. W3C is celebrating 20th anniversary of css in 2016 as level 1 of css was published 20 years ago on 17 Dec 1996.

CSS Syntax

CSS Code

Type of CSS

TypeExplanation
Internal CSSCSS Code is written inside <style> tag in head. Recommended for single page only.
External CSSCSS code is written in separate file with .css extension and <link> element is used to attach external css with html document. Used for multipage websites.
Inline CSS CSS code is written inside html tag directly, in style attribute.

Internal CSS

Use internal stylesheet when you are working on single page website. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.
The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css". But in HTML5, type is optional.

Heading 1

The text in this paragraph will be green.

This paragraph too.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<meta charset="UTF-8">
<style >
    p{color: green}
    h1{ text-align:center; color:red}
</style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>The text in this paragraph will be green.</p>
    <p>This paragraph is also green.</p>
</body>
</html>

External CSS

Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used.
An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag includes three attributes.

Attributes in the link tag

  • rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet"
  • type - When using an external stylesheet on a webpage, this attribute takes the value "text/css". ( optional in html5)
  • href - Denotes the name and location of the external stylesheet to be used.
<!DOCTYPE html>	
<html>
<head>
<title>External CSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>
</body>
</html>

(How a External CSS Looks like on browser)

The text in this paragraph will be blue.


Inline CSS

Use inline css when you want to apply a style to a single occurrence of an element.
Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute and value inside.

This text will be red.

This text is highlighted.


<p style="color:red">This text will be red.</p>

<p>This text is <span style="background:yellow">highligted</span>.</p>

Use inline css with caution. Inline css is having more priority than internal css and external css.


CSS Media Attribute

CSS Media Atttribute specifies the device media where css will run. Default value of media attribute is all. Others values for media attribute are screen and print. Here are some examples for media attribute


<style media="screen">
    body{ 
        font-family:sans-serif;
    }
</style>

<style media="screen and (min-width:460px)">
    body{ 
        font-family:cursive;
    }
</style>

<style media="print">
    body{ 
        font-family:monospace;
    }
</style>

        or
        
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-print.css" rel="stylesheet" media="print">

CSS Comments

CSS Comments are same like Javascript Comments. CSS Comments starts with /* and ends with */. CSS Syntax inside comments is not functional. We can store notes, or dummy code inside css comments.
See example


<style>                      
            /* CSS Comments */
body{
    font-family:arial;
    font-size:14px;
}
</style>