If you have learned basic HTML coding, now it is time to learn how to style your web pages? 

You can style your web pages to make your website more attractive and interactive. To make your website’s interface much better, you need to stylize your web page. You can stylize your web pages using CSS. CSS is an abbreviation for cascading style sheets. It is a language used to describe the presentation or look of a web page. By using CSS, you can stylize the color, layout, fonts of your web page. You can select or change the layout of your web page to different devices. It would be best if you learned CSS to take the actions mentioned above. CSS styling is performed for designing your HTML web page. 

Types of CSS

There are three methods to style your web page up using CSS. 

1. Inline Style
2. Internal Style
3. External Style

Inline CSS Style:

As it is evident by the name “inline,” this method is only applied to a selected or preferred line or your web page element. Using inline CSS, you can use all the styles that can be used CSS e.g. change background color, change font style, and font color. 

When you are using inline CSS style, you need to write them for that specific line where you want to apply the style. For example, if wish to apply to a paragraph. It would help if you styled your paragraph in <p> tag. You need to add some extra code to your <p> tag.

Changing Background Color:

If you want to change the background color of your web page, you need to add this code to the <p> tag.

<p style=”color: color_code”>. You will need to write a color code of the specific color you want to use in the background. 

Changing Font Family/style:

If you want to change the font style of your text, you need to write this code around your text tags. 

<p style=”font-family:font_family_name”>. You need to write font style, e.g., Arial, Times new roman, etc. There are lots of fonts available for your blog text to look attractive you can use the regular fonts which are available on major OS or you can add the external fonts, but you may need to include those fonts on your webpage, we will discuss this on some other article.

Changing Text Color:

If you want to change the color of your text on your web page, you need to add the following code with the surrounding tag. 

<p style=color: “color-code or color-name”>. You will need to write a color code or color name of the desired color.

Lets see an examples for understanding:

I am writing codes and the out hereunder.

If you want the background color of your text to be yellow, you will do as follows.

<span style="background:yellow"> This is an example.</span>

This is an example.

<span style="color:red"> This is an example.</span>

This is an example.

<span style="font-family:Arial"> This is an Example</span>

This is an Example

You can also add multiple styles separated by ;(semicolon)

<span style="font-family:Arial;background:yellow;color:red;font-size:20px;font-weight:bold"> This is an Example</span>

Internal CSS Style 

In the internal CSS style, you have to write your code or define the attribute in the head section of your web page. You will need to add style code in the head section. This is an easy and time-saving method. You can define the attributes of specific elements throughout your web page with a single line. You need not enter the code with every line. You will mention your element and style in the head section.

..other header code...
<style>
h1{
color:red;
background:yellow;
font-family:Arial black;
}
</style>
..other header code..

Add above CSS to head section of your html code. This will output:

This is an Example

Now, there is no need to write attributes with each line of the <h1> tag. The code in header would automatically assign all the text text under <h1> to red color and will have yellow background.

External CSS Style.  

In this method of defining HTML elements’ attributes, you need to write all code mentioning attributes in a single file and save that file with a .css extension. Now you have to link your CSS file to your HTML page. You can link your CSS file in the head section. You will need to write the name of your CSS file as follows.

<link rela=”stylesheet” href=”example.css” />

Note: You should save the .css file in the same directory having HTML files, or you need to change the specific css file path to href attribute of link.

You have applied the design to your website’s web page.