Tutorial Menu
  1. Home ›
  2. HTML
‹‹ PreviousNext ››

HTML Styles

Bookmark
Add CSS styles to HTML document by including an external stylesheet, internal styles with head tag and inline 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.

Tutorial Menu
  1. Home ›
  2. HTML
‹‹ PreviousNext ››

Exception Occured:

TypeErrorException
Messageerror_log(app.log): Failed to open stream: Permission denied
File/home/dh_czz6eb/tutorialwalk.com/common/error.php
Line36
Trace#0 (): log_error(2, 'error_log(app.log): Failed to open stream: Permission denied', '/home/dh_czz6eb/tutorialwalk.com/common/error.php', 36)
#1 /home/dh_czz6eb/tutorialwalk.com/common/error.php(36): error_log('17-04-2024 02:06:50 am (IST),/home/dh_czz6eb/tutorialwalk.com/common/common.php,193,0,ErrorException,Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter,/html/html-styles.html,#0 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parame...', '/home/dh_czz6eb...', 193)
#1 [internal function]: check_for_fatal()
#2 {main}
', 3, 'app.log')
#2 /home/dh_czz6eb/tutorialwalk.com/common/error.php(8): log_exception(ErrorException)
#3 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter', '/home/dh_czz6eb/tutorialwalk.com/common/common.php', 193)
#4 (): check_for_fatal()
REQUEST_URI/html/html-styles.html