Styling HTML in 3 different ways


There are 3 different ways to style HTML. But, only one way is recommended. There are Embedded Styling, Inline Styling and External Stylesheet.

Embedded Styling

Embedded Styling allow us to style document by adding our style rules in <style> </style> tag. For Example, here is our HTML Document

<html>
<head>
<title> Embedded Styling  </title>
<style>
body{
background-color:#cc0000;
}
</style>
</head>
<body>
       Hello World!
</body>
</html>

Inline Styling

Inline styling allow us to style HTML elements within the tag using style attribute.

<html>
<head>
<title> Embedded Styling  </title>
</head>
<body style="background-color:#cc0000;">
       Hello World!
</body>
</html>

External Stylesheet

External Stylesheet provide the benefit to separate structure(HTML), presentation(CSS), logic(JavaScript etc.). It is the recommended model to style HTML documents.

Style.css

body{

background-color:#cc0000;

}

index.html

<html>
<head>
<title> Embedded Styling  </title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
      Hello World!
</body>
</html>

 

[Update 8/20/2014]

I mistakenly write src in <link> tag instead of href.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s