HTML CSS

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML CSS

CSS full form is Cascading Style Sheets.

CSS is used to control the layout of multiple web pages all at once.

What is CSS?

Cascading Style Sheets (CSS) gives format the layout of a webpage.

CSS provides controls for the color, font, size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, and different displays for different devices and screen sizes.

Using CSS?

  • Using CSS

    You can add CSS to HTML documents in three ways:

    • Inline – When the style attribute is used inside HTML elements
    • Internal – <style> element is used in the <head> section
    • External – <link> element is used to link to an external CSS file

Inline CSS

An inline CSS gives a unique style to a single HTML element and uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example

				
					<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>


				
			

Internal CSS

An internal CSS defines a style for a single HTML page  and is declared in thesection of an HTML page, within a

				
					<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


				
			

External CSS

An external style sheet defines the style for many HTML pages and is added as a link in thesection of each HTML page

Example:

				
					<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>



				
			

Style.css

				
					body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}




				
			

Output:

A Blue Heading

A red paragraph.

CSS Color, font and size

  • The CSS color property is used to define the text color to be used.
  • The CSS font-family property is used to define the font to be used.
  • The CSS font-size property is used to define the text size to be used.

Example:

				
					<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
				
			

Output:

This is Heading

This is a paragraph

CSS Border

The CSS border property describes a border around an HTML element.

				
					<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

				
			

Output:

This is a paragraph

This is a paragraph

This is a paragraph

CSS Padding 

The CSS padding property is used for padding (space) between the text and the border.

				
					<!DOCTYPE html>
<html>
<head>
<style>
p {
  padding: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>


				
			

Output:

This is a paragraph

CSS Margin

The CSS margin property is used to define the margin (space) outside the border.

				
					<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>

</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>


				
			

Output:

This is a paragraph

This is a paragraph