CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS - Inclusion
CSS - Inclusion
There are four ways to associate styles with your HTML document. Most commonly used methods are inpne CSS and External CSS.
Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will be appped to all the elements available in the document. Here is the generic syntax −
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: pnen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
It will produce the following result −
Attributes
Attributes associated with <style> elements are −
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is required attribute. |
| media | screen tty tv projection handheld braille aural all |
Specifies the device the document will be displayed on. Default value is all. This is an optional attribute. |
Inpne CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be appped to that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolon (;). |
Example
Following is the example of inpne CSS based on the above syntax −
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inpne CSS
</h1>
</body>
</html>
It will produce the following result −
External CSS - The <pnk> Element
The <pnk> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <pnk> element.
Here is the generic syntax of including external CSS file −
<head> <pnk type = "text/css" href = "..." media = "..." /> </head>
Attributes
Attributes associated with <style> elements are −
| Attribute | Value | Description |
|---|---|---|
| type | text css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required. |
| media |
screen tty tv projection handheld braille aural all |
Specifies the device the document will be displayed on. Default value is all. This is optional attribute. |
Example
Consider a simple style sheet file with a name mystyle.css having the following rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows −
<head> <pnk type = "text/css" href = "mystyle.css" media = " all" /> </head>
Imported CSS - @import Rule
@import is used to import an external stylesheet in a manner similar to the <pnk> element. Here is the generic syntax of @import rule.
<head> @import "URL"; </head>
Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −
<head>
@import url("URL");
</head>
Example
Following is the example showing you how to import a style sheet file into HTML document −
<head> @import "mystyle.css"; </head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.
Any inpne style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be appped only when above two rules are not apppcable.
Handpng old Browsers
There are still many old browsers who do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers −
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>
CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-pne blocks in similar way you do in C and C++ programming languages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-pne comment */
text-apgn: center;
}
/* This is a multi-pne comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
It will produce the following result −
Advertisements