How to add CSS

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

CSS is added to HTML pages to format the document according to information in the style sheet.

There are three ways of inserting a style sheet.

Inline CSS

Internal CSS

External CSS

Inline CSS

Inline CSS is used to apply CSS on a single line or element.

To use inline styles, add the style attribute to the relevant element.

Syntax : Inline CSS

<htmltag style = "...style rules....">.... element content... </htmltag >

The value of style attribute is a combination of style declarations separated by semicolon (;).

These styles are not good to be edited because they are not stored at a single place.

Example : Inline CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: white;background-color:black">Code Always.</p>
<p style="font-size:20px;color:blue">Code Always To Become Best Programmer.</p>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

Code Always.

Code Always To Become Best Programmer.

Internal CSS

Internal CSS is used to apply CSS on a single document or page.

Internal styles are defined within the <style> element, inside the <head>section of an HTML page

Syntax : Internal CSS

The value of style attribute is a combination of style declarations separated by semicolon (;).

Example : Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: blue;
}
</style>
</head>
<body>

<p>Code Always.</p>
<p>Code Always To Become Best Programmer.</p>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

Code Always.

Code Always To Become Best Programmer.

External CSS

External CSS is used to apply CSS on multiple pages or all pages.

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

we write all the CSS code in a css file. Its extension must be .css.

Syntax : External CSS

/* This is a CSS file */
selector { property: value }

/* This is the link we used in HTML page */
<link rel="stylesheet" type="text/css" href="externalCSSName.css">

The value of style attribute is a combination of style declarations separated by semicolon (;).

Example : External CSS

File Name : externalstyle.css

p {
text-align: center;
color: blue;
}

The HTML and The CSS file are in separate file.

You need to link this externalstyle.css file to your html pages.

The link tag must be used inside head section of html.

Example : External CSS

File Name : index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="externalstyle.css">
</head>
<body>

<p>Code Always.</p>
<p>Code Always To Become Best Programmer.</p>

</body>
</html>

When the above code is compiled , it produces the following result.

Result

Code Always.

Code Always To Become Best Programmer.

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - How to add CSS

Inline CSS

Syntax : Inline CSS

Example : Inline CSS

Result

Internal CSS

Syntax : Internal CSS

Example : Internal CSS

Result

External CSS

Syntax : External CSS

Example : External CSS

File Name : externalstyle.css

Example : External CSS

File Name : index.html

Result