HTML Styles
This chapter is to learn about how to incorporate CSS styles in HTML to format it. In the previous chapter we learnt about formatting HTML content using the tag elements provided in HTML. CSS provides a rich set of features to format HTML. There are three ways to incorporate CSS styles in a HTML web page.
- Link a external CSS stylesheet within HTML
<head>
tag. - Enclose CSS styles using
<style>
tag internally within<head>
tag. - Inline CSS styles using
style
attribute.
Link External CSS Stylesheet
Use the link
tag to include a style sheet file in a HTML web page.
<link rel="stylesheet" href="/css/styles.css">
link
is the tag element name.rel
is the attribute that specifies this link is for a style sheet.href
is the address of the included CSS style sheet.
Internal CSS Styles
CSS styles can be added internally in the HTML document itself. CSS styles should be enclosed by <style>
tag and placed within the <head>
tag. Following is an example of using CSS styles internally in the HTML document.
<head>
<title>CSS Style Example</title>
<style>
.large-font {font-size: 50px;}
.small-font {font-size: 8px;}
.highlight {background-color:#00FF00;font-style:italic;}
</style>
</head>
Inline CSS Styles
We can add an attribute style
to HTML tag elements. style
is name of the attribute and in value we should specify the corresponding style. Inline styles can be added as below. property
and value
belong to CSS.
style="property:value"
Example HTML Inline Style
<p style="background:#CCCCCC; border:1px solid #000000; padding:20px;">This is a an example HTML paragraph to demonstrate the inline style capabilities of HTML.</p>
Example Output
This is a an example HTML paragraph to demonstrate the inline style capabilities of HTML.
As shown in the above example, we can add multiple style elements in a style text. We have added background, border and padding.
More Inline Style Example
<h4 style="font-family:arial">Page Heading</h4>
<p style="color:green">This is a green paragraph used to demonstrate HTML styles in-lining. </p>
<p style="font-size:120%">This text should appear larger than other text.</p>
Example Output
Page Heading
This is a green paragraph used to demonstrate HTML styles in-lining.
This text should appear larger than other text.