What is CSS

HTML Vs CSS
CSS Tutorial

Cascading Style Sheet

CSS or Cascading style sheet is a style sheet language of web, used to style or formatting of an HTML document.
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 oc 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.
External CSSCSS code is written in separate file with .css extension and <link> element is used to attach external css with html document.
Inline CSS CSS code is written inside html tag, 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.

(How to write CSS in HTML code)


<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<meta charset="UTF-8">
<style >
p{color: green}
</style>
</head>
<body>
    <p>The text in this paragraph will be green.</p>
    <p>This paragraph too.</p>
</body>
</html>

(How a Internal CSS Looks like on browser)

The text in this paragraph will be green.

This paragraph too.


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 of 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.

(How to write a CSS in HTML code)

<!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.

(How to write a CSS in HTML code)


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

(How a Inline CSS Looks like on browser)

This text will be red.

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="print" >
    body{ 
        font-family:monospace;
    }
</style>
        or
<link href="css/style.css" rel="styylesheet" media="screen">
<link href="css/style-print.css" rel="styylesheet" media="print">