Cascading style sheet

CSS stands for Cascading Style Sheets. Describes how elements are to be displayed on website. Simply CSS is used to prepare a layout for your web page.

Types of CSS

Inline CSS

Inline CSS is used to manage single element at a time. You can place the Inline CSS in the same line along with your HTML.

Example

<input type=”button” value=”Login” style=”background-color:blue”>

<h2 style=”color:red”>Welcome to CSS World !!! </h2>

<input type=”text”  style=”width:160px; border:solid 1px red”>

Internal CSS

Internal CSS is used to manage multiple elements at a time. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

Example:

<html>

<head>

<style type=”text/css”>

.myclass

{

width:200px;

height:30px;

background-color:gray;

}

</style>

</head>

<body>

Enter Name : <input type=”text” class=”myclass”> <br>

Enter Email : <input type=”text” class=”myclass”>

</body>

</html>

External CSS

This is the same as Internal CSS, the only difference between internal and external css is that you can manage entire website using External CSS while Internal could work on the same page only.

You can link to the file externally by placing one of the following links in the head section of every HTML file.

<link rel=”stylesheet”  type=”text/css” href=“CSS File Path Here” />

Example:

<link rel=”stylesheet”  type=”text/css” href=“CSS File Path Here” />

<link rel=”stylesheet”  type=”text/css” href=“master.css” />

This means, that if you need to modify the design of all your pages, you only need to edit one css file to make global changes to the entire website.

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/04/09/cascading-style-sheet
YouTube39
YouTube