CSS – Cascading Style Sheets

Introduction

Definition: CSS stands for Cascading Style Sheets. It is used to give the different stylings to the HTML to how it should look on a Different Size Screens, Printed Paper and all other ways it can be represented.

Benefit of CSS

  • It helps to speed up the development
  • Reusability of styling is possible
  • One code serves many web page is possible
  • One code serves many website is also possible

Types

CSS are of 3 types:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

An Inline CSS is a css which is written with the HTML element tags and thus are only specific to that particular element only.

Example:

Input

<label style=”background:red;”>My Background is red</label>

Output

inline

Internal CSS

An Internal CSS is a css which is written within the HTML file mostly inside the <head > tag (you can write it anywhere) surrounded with <style> tag and thus are only specific to that particular web page only.

Example:

Input

<!DOCTYPE html>
<html>
<head>

<style>
label {background: red;}
</style>

</head>
<body>

<label>My Background is red</label>

</body>
</html>

Output

inline

External CSS

An External CSS is a css which is written in a separate file with extension as “.css” and is referred in the HTML file it needs to be used in using the <style> tag. This CSS can be used by any number of web pages.

Example:

Input: Both Files “DemoHtml.html” and “Styles.css” are in the same folder

DemoHtml.html

<!DOCTYPE html>
<html>
<head>

<link href=”Styles.css” rel=”stylesheet”>

</head>
<body>

<label>My Background is red</label>

</body>
</html>

Styles.css

label {background: red;}

Output

inline

So this is how we can use a CSS. Try it yourself and tell me if you need any more information.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s