Style HTML with CSS Styling

Style HTML with CSS Styling

As a web Designer, it is very important to have knowledge of designing. CSS( Cascading Style Sheets ) provide us the way to design or style our webpage to make it look more interactive and attractive.

In HTML Page Styling can be done in 3 ways:

Inline – In this we can directly embed style using style attributes in HTML Tags.
Internal – In this one we can simply embed styles between <head> & </head> using a <style> tag.
External – In this we will have to create External CSS Files.

External css styling is most popular and common way to add style to HTML webpage.

Inline CSS Styling

In this type of styling style attribute is added in an HTML Element tag and style set are defined as value of style attribute. All value embedded in style attribute are applied to a single HTML Element.

Example:

<h1 style="color: brown; background-color: yellow;">This is a brown Heading with yellow Background.</h1>

Output of above Example:

This is a brown Heading with yellow Background.

 

Internal CSS Styling

In this type of styling all styles related to HTML Element are embedded in style tag between <head> </head> tag.

It can be used to define common styles to all HTML Elements using Element Tag Name.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h2 {color:brown;}
p {color:lightgreen;}
</style>
</head>
<body>

<h2>This is a small heading</h2>
<p>This is a light green paragraph.</p>

</body>
</html>

Output of above Example:

This is a small heading

This is a light green paragraph.

 

External CSS Styling

In this type of styling all styles related to HTML Element are added in external css file/style sheet. All styles related to tags can be added in the external file and a link to external file is added in <head> tag of the HTML page.

It is the most popular way to control styling of many pages by changing or modifying single page.  Multiple style sheets can be used for a single webpage.

Example:

index.html

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

style.css

 

body {
 background-color: lightgrey;
}

h1 {
 color: blue;
}

p {
 color:green;
}

In HTML Tags separate styling can be given to common tags with the help of id and class attributes.
Example:
index.html

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<p>This is first paragraph.</p>
<p>This is second paragraph.</p>

</body>
</html>

style.css

#bold_text{font-weight:bold;}
.st_1{font-size:23px;}

To get more detailed example on id and class attribute you can refer HTML Guide on HTML Attributes here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.