Cascading Style Sheet (CSS) in HTML5 ~ Online Quiz in IT

Cascading Style Sheet (CSS) in HTML5

Introduction to CSS
Syntax of CSS
Types of CSS

Inline CSS
Internal CSS
External CSS

CSS stands for Cascading Style Sheets.

By using CSS we control the layout of multiple web pages all at once.

By using CSS, we control the look and feel of several pages by changing single source code.

Syntax of CSS:

selector{property:value;property:value}

e.g.H2{color:green;font-size:22px}

The syntax of CSS contains-

1.A Selector 2.A Declaration Block

1.A selector :

Selector means the html element which you want to style. The html element means any tag like <h2>,<body> etc.

2.A declaration block :

It contains one or more declarations separated by a semicolon(;).Each declaration contains a property name and its value separated by colon(:).

e.g.H2{color:green;font-size:22px}

Here color:green and font-size:22px are two declarations.

Property:

A property is attribute of html element e.g.color,font-size etc.

Value:

Values are assigned to CSS properties i.e. value green is assigned to property color.

Types of CSS:

There are three types of CSS for implementing styling information to an HTML.

1.Inline CSS

2.Internal CSS or Embedded Stylesheet

3.External CSS

1.Inline CSS:

Inline CSS is used to apply CSS on a single line or html element.In an inline CSS the style attribute of an HTML is used.

e.g.Sets the text color of the <h3> element to green.

<h3 style="color:green">This is Inline CSS</h3>

2.Internal CSS or Embedded CSS:

When you want to apply CSS on a single document or page internal CSS is used. This is affects all the elements of the page. It is written inside the style tag within head section of html. An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the head section of html page within a <style> tag.

Example-<!doctype html>

<html>

<head>

<style>

body{background-color:blue}

h2{color:red}

</style>

</head>

<body>

<h2>This is Internal CSS Example</h2>

<p>An internal CSS is used to define a style for a single HTML page. </p>

</body>

</html>

3.External CSS:

To define the style for more than one html pages, an external style sheet is used. With the help of external CSS, we can change the look of an entire web site by using one file i.e. CSS file.

An external style sheet uses <link> tag in the head section of the html page.

!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>This is External Style Sheet Example</h3>

<p>An external style sheet uses <link> tag in the head section</p>

</body>

</html>

In above example style.css external style sheet file is used.

An external style sheet file is written in notepad or any text editor and save this file with .css extension. The external css file should not contain any html tags.

Example -style.css

h3{color:green;margin-left:15px}

p{margin-left:15px}