Welcome to the Blogleson today I will show you CSS Inclusion in Bloggers. There are four different ways to connect styles with your HTML document. The most basic techniques are installed in CSS and outer CSS.
Embedded CSS - The <style> Element in Blogger
You can put your CSS rules into a HTML archive utilizing the <style> component. This tag is set inside the <head>...</head> labels. Rules characterized utilizing this grammar will be applied to every one of the components accessible in the report. Here is the nonexclusive sentence structure:
<head> <style type="text/css" media="..."> Style Rules ............ </style> </head> |
Attributes in Blogger
Characteristics related with <style> components are:
Specifies the style sheet language as a content-type (MIME type). This is a required attribute. | |||
screen tty tv projection handheld print braille aural all |
Following is a case of insert CSS dependent on the above language structure:
<head> <style type="text/css" media="all"> h1{ color: #36C; } </style> </head> |
Inline CSS - The style Attribute in Blogger
You can utilize the style property of any HTML component to characterize style rules. These standards will be applied to that component as it were. Here is the conventional sentence structure:
<element style="...style rules...."> |
Attributes in Blogger
Example
Following is the case of inline CSS dependent on the above sentence structure:
It will produce the following result:
This is inline CSS
External CSS - The <link> Element in Blogger in Blogger
The <link> component can be utilized to incorporate an outside template document in your HTML archive.
An outside template is a different book document with .css expansion. You characterize all the Style leads inside this content record and afterward you can incorporate this record in any HTML report utilizing <link> component.
Here is the nonexclusive sentence structure of including outer CSS document:
<head> <link type="text/css" href="..." media="..." /> </head> |
Attributes in Blogger
Traits related with <style> components are:
Description | ||
text/CSS | Specifies the style sheet language as a content-type (MIME type). This attribute is required. | |
the style sheet file having Style rules. This attribute is required? | ||
tty tv projection handheld print braille aural all | Specifies the device the document will be displayed on. The default value is all. This is an optional attribute. |
Example
Consider a straightforward template record with a name mystyle.css having the accompanying standards:
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } |
Presently you can incorporate this record mystyle.css in any HTML archive as pursues:
<link type="text/css" href="mystyle.css" media="all" /> </head> |
Imported CSS - @import Rule in Blogger
@import is utilized to import an outside template in a way like the <link> component. Here is the conventional linguistic structure of the @import rule.
<@import "URL"; </head> |
Here URL is the URL of the template record having style rules. You can utilize another grammar too:
<head> <@import url("URL"); </head> |
Example
Following is the model telling you the best way to import a template record into an HTML record:
<head> @import "mystyle.css"; </head> |
CSS Rules Overriding in Blogger
We have talked about four different ways to incorporate template administers in an HTML report. Here is the standard to supersede any Style Sheet Rule.
· Any inline template takes the most noteworthy need. Along these lines, it will supersede any standard characterized in <style>...</style> labels or the standards characterized in any outer template record.
· Any standard portrayed in <style>...</style> names will supplant the standards described in any external format record.
· Any standard characterized in the outer template, the document takes the most reduced need and the rules characterized in this record will be applied just when the over two guidelines are most certainly not relevant.
Handling Old Browsers
There are as yet numerous old programs that don't bolster CSS. In this way, we should fare thee well while composing our Embedded CSS in an HTML record. The accompanying bit shows how to utilize remark labels to conceal CSS from more seasoned programs:<style type="text/CSS"> <!-- body, td { color: blue; } --> </style> |
CSS Comments in Blogger
Commonly, you may need to place extra remarks in your template squares. Thus, it is exceptionally simple to remark on any piece of the template. You can just put your remarks inside/*.....this is a remark in style sheet.....*/.You can utilize/* ....*/to remark multi-line obstructs incomparable way you do in C and C++ programming dialects.
Example
/* This is an external style sheet file */ h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } /* end of style rules. */ |
I hope you enjoy this Post and Photos. CSS Inclusion in Bloggers Full Tutorial
