There are three ways to style your HTML document using CSS. CSS can format your paragraphs like in the news paper, magazines where HTML can't even imagine to do with. Before knowing about CSS much further we need to know how and where to put the CSS into your HTML document or how to do it?
- Inline Styles
- Internal Styles
- External Styles
1.Inline Styles
Inline styles are used on the elements of HTML by using the style attribute. This makes the element to change according to the CSS style that is written.
A sample inline style
<p style="font-size:12px; color: blue; font-style: italic; background-color: gray;">Hide
your craziness behind a smile.</p>
However this style is not recommended mostly because too much inline styles make webpage to load slower and it takes much time for the developer and it is too hard to structure the document.
2.Internal Styles
As inline styles use style attribute on elements, internal styles use <style> tag on the head section of html. From within the style tags, the elements are targeted.
A sample internal style:
<style type="text/css">
h1 {
color: #C7AA8D;
font - size: 3em;
font -family: "Arial Black", Arial, sans-serif;
margin: 0;
}
p {
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 80px;
}
</style>
3.External Styles
External styles are highly recommended and mostly used CSS style. Here the CSS file is stored in another file and the HTML uses a link to pull the CSS to style its document. It makes the web page to load quicker because the CSS is stored as external file.
It also provides lot of flexibility as a single CSS can be used for multiple HTML files to style it's document. This makes different pages on a website to be unique and it is a lot of time saving process for the developers too.
style.css
h1 {
color: #C7AA8D;
font - size: 3em;
font -family: "Arial Black", Arial, sans-serif;
margin: 0;
}
p {
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 80px;
}
Linking CSS in HTML:
<head>
<title>Linking CSS in HTML</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
No comments:
Post a Comment