What is a Cascading Style Sheet (CSS)?
Cascading Style Sheet (CSS) is very important language used in presentation and designing of html websites. It not only set the design, colour, text, font, images, and layout of the webpages but also enhance the usability of the website. This is the language that deals with the web browser about presentation of different parts of webpages.
A Cascading Style Sheet code contains a class name called Selector that is follow by Declaration Block. Declaration block is represented as { }. All the declarations are mentioned inside declaration block. When all Declarations are combined together, called Rule-set of the Selector. Each declaration has two parts- Property and Value. Property and Value are joined with “:”.
CSS Syntax:
SELECTOR {
PROPERTY1: VALUE1;
PROPERTY2: VALUE2;
…..
PROPERTYn: VALUEn;
}Cascading Style Sheet Example:
H3 {
Font-size: 2em;
Color: blue;
Text-decoration: underline;
}Differnce Between HTML and CSS
HTML is mark-up language that contains all the website content. All the contents of a website image, text, media etc. are contained in html coding. Cascading Style Sheet is styling language. Cascading Style Sheet is used for styling the website. Its purpose is to enhance the usability of website with well presentation.
Html add web content like page headings, media contents, pictures, blogs etc. to webpages. CSS is responsible to add colors, font-size, font-style, borders, layouts, background images etc. that belongs to webpages presentation.
When using Cascading Style Sheet in web design, we can use Class and Id both as Selector for Cascading Style Sheet Styling. When we need to style multiple elements in a single page, we use Class as Selector. If the element that we want to style appear only once in the page, it is better to use Id as selector.
How to Link CSS to HTML
Cascading style sheet can be added to an html web page in 3 different ways: Inline Style, Internal Style, and External Style.
What is an Inline CSS?
The Inline Cascading Style Sheet is used to style a specific html tag. It is applied to the tag by adding STYLE attribute in the tag. The Style attribute include the property and value that is needed to style the specific element.
Example:
<! DOCTYPE html>
<html>
<head>
<title> Inline CSS Example </title>
</head>
<body>
<h1> Inline CSS Example Page </h1> <br><br>
<p style= “color: blue; font-size: 20px”> I am applying inline style in this paragraph tag. </p>
</body>
</html>This inline style will change the colour and font-size of the paragraph.
What is an Internal CSS
The Internal Cascading Style Sheet is used to style any specified html element in the whole webpage. It is applied by adding <style>…</style> tag in the <head>…</head> section of the webpage.
Example:
<! DOCTYPE html>
<html>
<head>
<title> Internal CSS Example </title>
<style type= “text/css”>
h1{ color: red; }
h2 { color: green; }
h3 { color: blue; }
</style>
</head>
<body>
<h1> Internal CSS Page Example</h1><br><br>
<h1>The colour is RED</h1><br>
<h2> The colour is GREEN</h2><br>
<h3> The colour is BLUE</h3>
</body>
</html>
What is an External CSS
The External Cascading Style Sheet is used for styling the whole website. It is a stylesheet file with extension “.css”. We have to include this file with our website for styling. It reduces the effort of style every page again and again. It make any changes in style very easy. We have to link the stylesheet within <head>….</head> section of the webpage by using <link> tag.
Example:
“MyStyleSheet.css”
h2 {
color: blue;
padding: 10px;
}
h3 {
color: green;
padding: 8px;
}
h4 {
color: red;
padding: 12px;
}
“ExternalStyle.html”
<! DOCTYPE html>
<html>
<head>
<title> External CSS Example </title>
<link rel= “stylesheet” type= “text/css” href= “/MyStyleSheet.css” />
</head>
<body>
<h1> External CSS Example Page </h1> <br><br>
<h2> This is Heading 2. It is blue in colour. Padding 10px. </h2> <br>
<h3>This is Heading 3. It is Green in colour. Padding 8px. </h3> <br>
<h4> This is Heading 4. It is Red in colour. Padding 12px. </h4>
</body>
</html>Was this article helpful? We would love to hear from you. Must share your view in the comment section below.
Keep visiting our Tech Blog and stay updated with all our latest technology related blog posts.