HTML CSS

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test

CSS?

CSS stands for Cascading Style Sheet.
It describes how documents are presented on screens or perhaps how they are pronounced.
CSS provide easy and effective alternatives to specify various attributes for the HTML tags.

CSS syntax

element {
      property:value;
      property:value;
      property:value;
      }

Example:

Let's have a look how to apply CSS style in HTML document.

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> CSS style in HTML </title>
<style>
h1{color:blue; text-decoration:underline;}
p{color:green; font-size:18px;}
</style>
</head>
<body>
<h1> This heading is underlined. </h1>
<p> The font size of this paragrph is 18px. </p>
</body>
</html>

Web Browser

This heading is underlined.

The font size of this paragrph is 18px.

How to style HTML elements With CSS?

There are three ways to use CSS in HTML elements.
Let's go ahead to see all the three cases one by one with the helpfull examples.
The ways are These:

1. External Style Sheet: External style sheet are ideal when the style is applied to many pages
To keep the styles in separate CSS files(style.css) and then link that file in HTML document using HTML <link> tag to the <head> section.
Supose, we make a separate CSS file named 'style.css' for the example below:

h1 {
      color:blue;
      text-decoration:underline;
      }

p {
      color:green;
      font-size:18px;
      }

Example:

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> External Style Sheet </title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1> This heading is underlined. </h1>
<p> The font size of this paragrph is 18px. </p>
</body>
</html>

Web Browser

This heading is underlined.

The font size of this paragrph is 18px.

You can learn more about External Style Sheet in CSS tutorial.


2. Internal Style Sheet: We can use an internal style sheet to definne a common style for all HTML elements on a page.
For this case, we must keep a style element into the <head> section of an HTML page.
Let's have a look the example below:

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> Internal Style Sheet </title>
<style>
h1{color:blue; text-decoration:underline;}
p{color:green; font-size:18px;}
</style>
</head>
<body>
<h1> This heading is underlined. </h1>
<p> The font size of this paragrph is 18px. </p>
</body>
</html>

Web Browser

This heading is underlined.

The font size of this paragrph is 18px.



More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test