Home web designing css What Is CSS – Cascading Style Sheet-Basic

What Is CSS – Cascading Style Sheet-Basic


CSS stands for cascading style sheet . CSS (Cascading Style Sheets) is core technology for building Web pages. It provide visual layout to webpage . CSS do a revolutionary change in web designing .

Before use of cascading style sheet , web developers use inline styling and formatting to web pages . In inline style developer define the style of the content or tag during the tag writing .

Example of inline style

<div style=”width:100px ; height : 50px;“>

In this example div height and width defined during the div tag writing . This is called inline style . Inline style is good  for short type of html codes and less pages , but if html code in large number then inline style is difficult to locate , edit and maintain .

Second demerit is in inline style  that if you want to change height and width of the specific div tag of each page , then you need to add style in each page of specific div .

READ ALSO : -  Solution-Load CSS Dynamically In Webpage To Speed Up Loading

External Cascading style sheet (CSS)

This is a boring and complex work . But cascading style sheet solve this problem . In CSS format , an external style sheet is created . In external style sheet all of styles are defined .

This external sheet is linked with all web pages . When you change one style in stylesheet , then it is applied on all of web pages lined with this css sheet.

Cascading style sheet file extension is .css . You can create a style.css file with any of text editor ,like notepad .

CSS File Example

body {
margin: 0;
padding: 0
ul li:hover {
background-color: transparent !important
#wrap {
width: auto !important;
#header {
width: 100%;
height: 50px;
background-color: #bbcc00
#br-cr {
display: none
.postmeta img {
display: none

In this style sheet when body {} class is used for html boy style . When you change body style in style.css then it is applied on all linked webpage .

Link CSS With Web Page

It is required to link your style.css (your style sheet) with web page to apply styles . To link style.css with web page <link> tag is used .

READ ALSO : -  How To Start Learning Web Designing & Development

Your can choose any name for your style sheet . But file extension must be .css . To link style sheet with web page place the link tag in between the head tag .

Style sheet link tag example

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