HTML

HTML Projects

HTML Project

StyleSheet In HTML
Previous Home Next
adplus-dvertising

Cascading Style Sheets (CSS)is genaerally use for Style with colors of our document to represent on screens. It is introduced by W3C consortium since 1994.

Cascading Style Sheets (CSS) is used to various attributes for html tags and use style properties .This style properties contains name and a value which is use colon(:) and it declaration in semi-colon(;).

CSS Syntax

element { property:value ; property:value }
This <p> tag is shown that which parameters used in CSS Syntax

Example without use style sheet as follows

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p> Hello, user's in www.r4r.co.in</p>
</body>
</html

Output :

Example of CSS with style sheet as follows

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:blue;font-size:24px;">Hello, user's in www.r4r.co.in</p>
</body>
</html

Output :

Types of Cascading Style Sheets (CSS)

There are three types of using Cascading Style Sheets (CSS) as follows.

  1. Inline - It is generated a style attribute in HTML elements.
  2. Internal - It is generated in <style> element in the HTML <head> section.
  3. External - It is generated one or more external CSS files.
Inline Style Sheets

In Inline Style Sheets is used to Style attribute to apply in <style> HTML element .

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:blue;">welcome in blue</p>
<p style="color:red;">welcome in red</p>
</body>
</html>

Output :

Internal Styling (Internal CSS)

when we want to apply Internal Styling (Internal CSS) in a single document then we use in header section of HTML document using <style> tag.

Example

 <!DOCTYPE html>
<html>
<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>
<body>
  <h1>Hello user's in www.r4r.co.in</h1>
  <p>Hello user's in www.r4r.co.in and This is a paragraph.</p>
</body>
</html>

Output :

External Style Sheets

External Style Sheets are used a external style sheets and we can change entire site with the help of change one file.It is use in <head> section within <link> element.

Example

 <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello user's in www.r4r.co.in</h1>
  <p>This is a paragraph.</p>
</body>
</html>

This style is to be save by name "style.css".

body {
    background-color: lightgrey;
}
h1   {
    color: blue;
}
p    {
    color:green;
}
div
{
color: #FFFFFF;
background-color:#000000;
}
span
{
color: #000000;
background-color:#FFFFFF;
}

Output :

Supporting Browsers
Previous Home Next