What is CSS and its types with Examples?

Updated: Feb 17



CSS stands for Cascading Style Sheet. A CSS files allows us to style for HTML Content. We can present the content on our website with fonts, colors, background, borders, text formatting, links effect etc through the CSS. In other word we can say that CSS is makeup net for HTML element. CSS is the small language which is use for decorate the HTML elements. It is known as client scripting language.

In other words we can say that CSS is the first technology we should start learning after HTML and also used to format the layout's of web pages of websites. By CSS we define the text styles, table sizes and it describes how HTML elements are to be displayed on screen and paper. The file extension of CSS is .css .



Types of CSS:

There are three different ways for using CSS in web page which are below:

  1. Inline CSS

  2. Internal CSS

  3. External CSS

Inline CSS:

Inline are those css which is used when it need. We use it line to line whenever it requirements. It helps us to apply unique style rules in specific HTML elements. We can insert inline styles anywhere in the middle of our HTML code,

For Example:

<!DOCTTYPE html>

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<h1 style="color:red"> Inline CSS</h1.

<p style="color: pink"> O Level is the ordinary course of IT and have four papers. </p>

</body>

</html>


Internal CSS:

We use internal CSS at the top of each web page. We define it in head tag. It is different from inline CSS because it use only one place of each page whereas inline css use in page according to requirements.

For Example:

<!DOCTTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style>

body {

background-color: light-blue;

font-size:15px;

}

h1 {

color: red;

}

</style>

</head>

<body>

<h1> Internal CSS</h1.

<p > O Level is the ordinary course of IT and have four papers. </p>

</body>

</html>

External CSS:



External CSS is the another css in which an external css file can be created with any text or HTML editor like notepad, notepad++ etc ans save it with .css extension and call it web page when it need.

For Example:

Step 1: Open notepad and type following below code:

body {

background-color: lightgreen;

}

h1 {

color: red:

}

To save this with .css extension like external.css

Write another html Program

<!DOCTTYPE html>

<html>

<head>

<link rel="stylesheet" type=text/css" href="external.css">

</head>

<body>

<h1> Internal CSS</h1.

<p > O Level is the ordinary course of IT and have four papers. </p>

</body>

</html>


99 views1 comment

Recent Posts

See All

Switch Statement: A switch statement allows a variable to be tested for equality against a list of values. Each value is called a case and the variable being switched on is checked for each switch cas

<html> <head> <title> form event</title> <script language="javascript"> function si(fnm) { P=fnm.t1.value R=fnm.t2.value T=fnm.t3.value fnm.t4.value=(P*R*T)/100 } </script> </head> <body> <form> <br>