Style tag is the most commonly used tag for web designers for applying styles and themes of a web page. It is used to define a format and style of fonts, colors and their alignments. In HTML, we first have to create a style sheet using a CSS format. This style sheet contains pre-defined formatting. After creating a sheet, all we have to do is to simply call out the sheet in a HTML page source code by creating a link. Here in this tutorial, we will teach you how to apply style in html page using a CSS style sheet. Furthermore, we will teach you how how to link style sheets.
Step # 1 – Create a Style Sheet
In this tutorial we will guide you on how to apply style in html. First of all, we are going to need a style sheet in a “.css” format which we have already created here as “Style.css”. This style sheet contains pre-defined styles for your HTML page.
Step # 2 – Link the Style Sheet in your HTML Page
Now open up the source code of the page in a Text editor to edit it. Once done, insert a “Link” tag in the “Head” section of the page by entering the following syntax as,
<link rel = “stylesheet” type = “text/css” href = “style.css” />
In this syntax, the “Rel” code shows the relationship between your HTML page and the style sheet. The “Type” code is a string for using the css over text and the “href” code refers to the style sheet name which you want to apply on the page. In this manner, you can link style sheets and work with them accordingly.
Step # 3 – View the Changes
Once done, go to the “File” menu, save your changes and refresh the browser to view the new style applied on your HTML page.
Home