CSS | HTML vs. CSS | Link CSS to HTML | Inline CSS | Internal CSS | External CSS

CSS | HTML vs. CSS | Link CSS to HTML | Inline CSS | Internal CSS | External 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 CSS 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;

}

 

CSS Example:

H3 {

Font-size: 2em;

Color: blue;

Text-decoration: underline;

}

HTML vs. 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. CSS is styling language. CSS 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 CSS in web design, we can use Class and Id both as Selector for CSS 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.

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.

Inline CSS

The Inline CSS 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.

 


Internal CSS

The Internal CSS 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>

 


External CSS

The External CSS 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>

Categories:   tech blogs

Comments