r4r Right place for Right person^®

HTML

R4R^® HTML

HTML Examples

HTML Registration Page

HTML Registration page using CSS

HTML Projects

HTML Project

HTML Interview Materials

HTML subjective question

HTML Objective question

HTML FAQS

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.

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.

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

(追記) (追記ここまで)

Web technology Topics