| Previous | Home | Next |
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 }
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 :
There are three types of using Cascading Style Sheets (CSS) as follows.
- Inline - It is generated a style attribute in HTML elements.
- Internal - It is generated in <style> element in the HTML <head> section.
- External - It is generated one or more external CSS files.
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 :
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 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 :
| Previous | Home | Next |