SIGN UP LOGIN

How to style your web page using css?

  2nd Dec, 2019   Rahul Ranjan   0 comment
How to style your web page using css?

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 id="bold_text">This is first paragraph.</p>
 <p class="st_1">This is second paragraph.</p>
 <p class="st_1">This is third paragraph.</p>
</body>
</html>

style.css 

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

Above i have discussed some basic concepts of css, to help you get started with web page designing.  If you liked this article, do share it with your friends. Thanks for reading complete article carefully, please provide your important feedback or comments below.

Rahul Ranjan
Author: Rahul Ranjan

Founder of 7topics. Rahul Ranjan is a website developer and blogger who loves to read and share about new techonology with others through his blog.

SUBSCRIBE TO NEWSLETTER

Enter your email address to subscribe to this blog and receive notifications of new posts by email

RECENT POSTS

1