Adding CSS styles to HTML can transform the page layout to the style you want. The CSS styles can be applied to HTML by three different methods.
Inline Styles
Put CSS styles into an element via the style attribute.
<h1 style="color: yellow; background: red;">Inline Styles</h1>
Embedded Style Sheets
Embed the style sheet at the top of an HTML by using the style element, which must be in the head element:
<html>
<head>
<style type="text/css">
body { background: gold; text-align: center; }
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1>
<p>This is a CSS example.</p>
</body>
</html>
External Style Sheets
You can write your own CSS styles, and save the text into a seperating CSS file. Then jsut include this external CSS file into your HTML.
There are many benefits of using external style sheets:
- Write once, use anywhere. Write common CSS styles, and include the CSS file in any HTML page you want. Thus you don't need to rewrite the rules again and again.
- All HTML pages using the style sheet can be updated by just editing the single CSS file.
- The external CSS file is cached, which can speed up page loading and reduce bandwidth usage.
External style sheets can be included in by one of the following methods:
- link element
An external style sheet can be linked to an HTML document through HTML's link element by placing the link tag in document's head element.
<head> <link rel="stylesheet" type="text/css" href="my_css_file.css" media="all"> <link rel="stylesheet" type="text/css" href="sunrise.css" media="screen"> </head>
- @import
A style sheet can be imported via @import statement. The @import statement should be placed in HTML document's style element, and it can also be included at the top of other CSS style sheets.
<head>
<style type="text/css">
@import url(http://w10schools.com/style.css);
@import url(starlight.css);
body { background: black; color: yellow; }
</style>
</head>
Please login to continue.