HTML Styles – CSS
CSS stands for Cascading Style Sheets.
CSS describe how our html document are presented on screen, paper or in other media.
We can add CSS to HTML elements in 3 ways:
- Inline css – style attribute has to define in HTML elements
- Internal css – <style></style> tags has to define in <head> section
- External css – make a separate CSS file and include
Let’s review all the above methods with suitable examples.
Inline CSS
We can apply style directly to the HTML element by using style attribute. See below an example of inline css with <h1> and <p> tag.
Example:
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style=”color:green;”>Heading with inline stylesheet.</h1>
<p style =”color:red;”>Paragraph with red fonts.</p>
<p style =”font-size:24px;”>Paragraph with large fonts.</p>
<p style =”color:blue; font-size:12px;”>Paragraph with small and blue fonts.</p>
</body>
</html>
Output:
Internal CSS
Internal CSS is used to define a style for single HTML page, its defined with <style> tag in the <head> section of an HTML page.
Example:
<head>
<title>Internal CSS</title>
<style>
body { background-color:cyan; }
h1 { color:blue; font-size:32px; }
p { color:red; }
</style>
</head>
<body>
<h1>Heading with inline stylesheet.</h1>
<p>Paragraph with red fonts.</p>
<p>Paragraph with large fonts.</p>
<p>Paragraph with small and blue fonts.</p>
</body>
</html>
Output:
External CSS
If there is a need to use common styles to various html pages elements, then its always recommended to use external CSS. A separate file having extension .css has to be create and include it in HTML files using <link> tag.
Example:
So consider we have define a style sheet file “style.css” which has following code/ styles define:
background-color:yellow;
}
h1 {
color:blue;
}
.font1 {
color:green;
font-size:32px;
}
Above we have defined 3 CSS rules, First one is for body background color. Second for heading text color and in third rule we have created a CSS class that we can implement in any element of html page, like below:
<head>
<title> External CSS </title>
<link rel = “stylesheet” type = “text/css” href = “style.css”>
</head>
<body>
<h1> Heading with inline stylesheet.</h1>
<p> Paragraph with normal fonts.</p>
<p class=”font1″>Paragraph with large fonts.</p>
<p> Paragraph with normal fonts.</p>
<p class=”font1″>Paragraph with large fonts.</p>
</body>
</html>
Output:
Note: If you have defined a HTML element style multiply, more then one ways, then preference will be given as, first it will consider inline css, then internal css and the external CSS.
About Author
bestonetechnologies
I am a software developer.
Leave a Reply
You must be logged in to post a comment.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
No Responses