Connecting a style sheet with a HTML file
Connecting a style sheet with a HTML file:
Today I will tell you how to import a style sheet into a HTML file, it is very simple. There are a few ways of doing it. So let us being…
Method 1: Writing a style sheet within a HTML page
Well after the <title> in the <head>, we mention that we are giving a link to a style sheet and start coding there. This is what the html code will look like
|
<html> <head> <title>Untitled-1</title> <link rel=”stylesheet” type=”text/css”> <style type=”text/css”> h1{ background:black; color:white; } background:black; /** and so on and so forth the styling can be continued**/ </style> </head> |
If your web has not a lot of styling involved then only I recommend, because if your webpage is totally based on a lot of styles, then it gets rather complicated or if the style is being imported to many pages.
Method 2: Linking to an external style sheet
In the head we can import an external style sheet. The advantage to this is that it can be applied to as many pages without having to put the whole CSS code into the HTML file.
|
<html> <head> <title>Untitled-1</title> <link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”> </head> |
Well if you see href=”/style/style.css”, this is more like a hyperlink to the style sheet. Well indeed it is a hyperlink to the style sheet. Now an important piece of information, you should place the link in the href from the root to the web site. Most of the websites use this method, as it is better and easier to implement. And changes can be made much more easily as compared to method 1 of adding styles to your web page.
We can multilink that is connecting multiple style sheets; here is a specific pattern by which results comes. We can embed 2 or more style sheets by the following code
|
<html> <head> <title>Untitled-1</title> <link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”> <link rel=”stylesheet” type=”text/css” href=”/style/style_new.css” media=”all”> </head> |
Method 3: Importing a style sheet
This is a built in declaration that we can use to import a style sheet into a HTML page. The syntax is as follows
|
<html> <head> <title>Untitled-1</title> @import url(styles/style.css); </head> |
Method 4: Inlining style sheets
We can put our styles individually to elements, this can be done as follows:
|
<p STYLE=”color:red; background: black; align: center”>This paragraph will be styled as red text on black background.</p>. |
So this is about it. I hope you understood the basics of connecting a style sheet with an HTML file. In case of any questions feel free to contact. Have a great day .
