HTML CSS

CSS

CSS stands for Cascading Style Sheets.

CSS has 3 type-
  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

  • It is used to apply in a single HTML element.
  • It uses the style attribute of an HTML element.
Program on Inline CSS

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;”>This is an Inline CSS Type</h1>

</body>
</html>

Output

This is an Inline CSS Type

Internal CSS

  • It is used to define a style for a single HTML page.
  • An internal CSS is defined within <style> </style>section under the <head> </head>tag of an HTML page.
Program on Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: pink;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a Internal CSS Type in pink</h1>
<p>This is a Internal CSS Type in red</p>

</body>
</html>

Output

This is a Internal CSS Type in pink

This is a Internal CSS Type in red

External CSS

  • It is used to define the style for many HTML pages.
  • Using Extrnal CSS you can change the look of whole website.
  • Add a link to it in the <head> section of the HTML page.
Program on External CSS

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>

<h1>This is an External CSS Type heading.</h1>
<p>This is an External CSS Type Paragraph.</p>

</body>
</html>

Output

This is an External CSS Type heading.

This is an External CSS Type Paragraph.

CSS Fonts

  • CSS color defines the text color.
  • CSS font-family defines the font.
  • CSS font-size defines the text size.
Program on CSS Fonts

<!DOCTYPE html>
<html>
<head>
<style>
h1 {

color: red;
font-family: courier;
font-size: 160%;

}
p {
color: blue;
font-family: verdana;
font-size: 300%;
}
</style>
</head>
<body>

<h1>This is a CSS Fonts heading</h1>
<p>This is a CSS Fonts paragraph.</p>

</body>
</html>

Output

This is a CSS Fonts heading

This is a CSS Fonts paragraph.

CSS Border

  • It defines a border around an HTML element.
Program on CSS Border

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

<h1>This is a CSS Border heading</h1>

<p>This is a CSS Border Paragraph</p>
<p>This is a CSS Border Paragraph</p>
<p>This is a CSS Border Paragraph</p>

</body>
</html>

Output

This is a CSS Border heading

This is a CSS Border Paragraph

This is a CSS Border Paragraph

This is a CSS Border Paragraph

CSS Padding

  • It defines a padding (space) between the text and the border.
Program on CSS Padding

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

<h1>This is a CSS Padding heading</h1>

<p>This is a CSS Padding paragraph.</p>
<p>This is a CSS Padding paragraph.</p>
<p>This is a CSS Padding paragraph.</p>

</body>
</html>

Output

This is a CSS Padding heading

This is a CSS Padding paragraph.

This is a CSS Padding paragraph.

This is a CSS Padding paragraph.

CSS Margin

  • It defines a margin (space) outside the border.
Program on CSS Margin

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

<h1>This is a CSS Margin heading</h1>

<p>This is a CSS Margin paragraph.</p>
<p>This is a CSS Margin paragraph.</p>
<p>This is a CSS Margin paragraph.</p>

</body>
</html>

Output

This is a CSS Margin heading

This is a CSS Margin paragraph.

This is a CSS Margin paragraph.

This is a CSS Margin paragraph.

 id Attribute

  • id attribute is used to define a specific style for one special element,  to the HTML element.
id Attribute

<p id=”p01″>I am id attribute</p>

class Attribute

  • class attribute is used to define a style for a special type of elements, to the HTML element.
class Attribute

<p class=”error”>I am different class attribute </p>

Program on class Attribute

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>

<p>This is a class Attribute paragraph.</p>
<p>This is a class Attribute paragraph.</p>
<p class=”error”>I am different class Attribute.</p>
<p>This is a class Attribute paragraph.</p>
<p class=”error”>I am different too class Attribute.</p>

</body>
</html>

Output

This is a class Attribute paragraph.

This is a class Attribute paragraph.

I am different class Attribute.

This is a class Attribute paragraph.

I am different too class Attribute.

 

Leave a Reply

Your email address will not be published. Required fields are marked *