CSS Files
There are Three ways to insert CSS style sheet
- External style sheet
- Internal style sheet
- Inline style sheet
External style sheet
with an external style sheet, you can change the look of an entire by website changing just one file.
Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
Syntax
- <link rel = " stylesheet " href = " style.css ">
- style.css means this is a source of file ( URL ).
Example
<!DOCTYPE html>
</head>
Result
This is heading.
This is paragraph.
A external sheet file can be written in any text editor like Notepad , Notepad++ , Sublime , Alom , Brackerts , pycham Etc....
The Style file must be saved with a .css extension.
Here is Style.css File
body {
background-color: #fff; ( White color );
}
h1 {
color: red;
margin-left: 20px;
}
p {
color: blue;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Example
<!DOCTYPE html>
<style>
body {
}
h1 {
color: red; margin-left: 20px;
}
p {
color: blue;margin-left: 20px;
}
</style>
</head>
Result
Inline Style Sheet
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
</head>
<body>
<h2 style="font-weight: bold; color: blue">This is a heading.</h2>
<p style="color: red;">This is paragraph.</p>
</body>
</html>
<h2 style="font-weight: bold; color: blue">This is a heading.</h2>
<p style="color: red;">This is paragraph.</p>
</body>
</html>
Result
This is heading.
This is paragraph.
This is paragraph.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.
Example
- Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: red;
}
- then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: blue;
}
- If the internal style is defined after the link to the external style sheet, the <h1> elements will be "blue"
Example
<!DOCTYPE html>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h2>This is a heading.</h2>
</body>
</html>
<h2>This is a heading.</h2>
</body>
</html>
Result
This is heading.
Here is External style sheet ( style.css ) :
Here is External style sheet ( style.css ) :
h1 {
color: red;
}
- However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "blue":.
Example
<!DOCTYPE html>
<style>
h1 {
color: red;
}
</style>
<link rel = " stylesheet " href = " style.css ">
</head>
<body>
<h2>This is a heading.</h2>
</body>
</html>
<h2>This is a heading.</h2>
</body>
</html>
Result
This is heading.
Video on This Topic :- SooN
Have a Nice Stay Here : - )
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.