In
my previous post, I wrote about the three basic types of selectors used in CSS.
If you haven’t checked it out yet, I would recommend you see that post once and
come back here to the next part of CSS that I’m about to discuss, which is –
Ways to insert the CSS codes on your webpage. Here’s a link to the previous
post: http://justechjustphy.blogspot.in/2016/06/cascading-style-sheets-css.html
There
are three ways of inserting CSS codes and each of them has its own advantages
and disadvantages.
·
External Style Sheet.
· Internal
Style Sheet.
· Inline
Style.
1.
The External Style Sheet:
The
code of the style sheet is separately written and saved with the extension “.css” and it can’t contain any html tags (examples of html
tags are <body>, <head>, etc.)
In
your html document, to insert the css code that is
externally saved, you need to add a link to that file so html can know there’s
an external editing file to be added to the webpage.
So,
how do we link the css file?
Simple!
By using the <link> tag in html between <head> and </head>
tags.
Its
syntax goes like this:
<link
rel = “stylesheet”
type=”text/css” href=”your_file_name.css”>
· In
the above syntax, the “rel” is an attribute used to
tell html of the type of document to be linked. In this case, it is “stylesheet”
· Type
refers of course to the type of document, which is in this case, a text
document or a css document.
· Href is
a very important attribute because it specifies where the webpage should be
linked, which is your file name, followed by “.css”
extension.
So,
now we know how to externally link a CSS file to a webpage. This is very
advantageous as it doesn’t mess with the html code. What I mean to tell, is
that the editing or the designing part of the webpage code is separate and the
actual content of the webpage is separate. That really helps improve
readability.
Ex:
CSS
code:
.p{
color: red;
} // (file is saved as para.css)
Html
code:
<html>
<head>
<link
rel=”stylesheet”
type=”text/css” href=”para.css”>
</head>
<body>
<p>
This is the affected paragraph colored red using an
external style sheet </p>
</body>
</html>
Output:
This is the affected paragraph colored red using an external style
sheet
So,
properties of the webpage can be changed anytime, just by changing the file
name in href section of the html code. That makes
using the External Style sheets very versatile and easy.
2.
Internal Style Sheets:
As
the heading states it, the CSS code is written within the html document between
the <head> and </head> tags. There are some examples in my previous
post. This form of adding CSS code is pretty basic and useful for small
websites and is mostly used when there’s not much editing involved in the
webpage.
3.
Inline Style Sheets:
It
is used to apply a unique style for a single element. It comes within the
<body> and </body> tags unlike in previous 2 cases where the
internal code is written (or the external code is linked) within the
<head> and </head> tags.
Ex:
<html>
<body>
<p
style = “ color: blue; “> The affected paragraph
</p>
</body>
</html>
Output:
The affected paragraph
As
seen in the above example, this way of adding CSS can be used to give a really
quick edit to the webpage. It kind of saves up on the number of lines of code
required and comes handy.
Multiple
Style Sheets:
In
case of 2 distinct CSS codes editing the same element and are included in the
same html file, then the first defined code is applied and the other one is
just ignored.
Ex:
CSS
file:
P
{
Font-size:20px;
}
// file name is myfile.css
Html
code:
<html>
<head>
<link
rel=”stylesheet”
type=”text/css” href=”myfile.css”>
<style>
P
{ color: purple;}
</style>
</head>
<body>
<p>
Paragraph affected with the first defined css style
</p>
Output:
Paragraph affected with the first defined css
style
In
the code above, the CSS with color edit is defined first and hence, only the
color edit is applied to the paragraph. If the style tag was written before the
link tag, then the font-size edit would be applied to the paragraph.
Now,
we move to the final topic of this post, the order of cascading.
Cascading
Order:
In
case of above multiple style sheets, we have priorities assigned to each type
of method of applying CSS. So one with highest priority is applied to the html
element, and the rest are ignored. The precedence is as follows and number one
has the highest priority:
1. Inline
style (within html element)
2. External
and internal style sheet (whichever is defined first)
3. Browser
Defaults.
Now,
we have come to the end of this post which dealt with methods of applying CSS
code onto websites.
No comments:
Post a Comment