1 Adding CSS stylesheet to HTML Page Wed May 26, 2010 7:28 pm
ankillien
Administrator
Adding CSS To Web Pages 3 ways to add style sheet to your web pages |
Hello Everyone In our last tutorial we learn the basic concepts of CSS. This time we are going to learn how to add CSS Style sheet to our HTML pages. First of all, obviously, we shall need an HTML page with some elements in it to which we can apply styles. Here is a HTML page code which we shall use for practicing this tutorial...
Create an HTML file on your PC, save it and open it with your favorite browser. You can see a header and a paragraph below it. The page looks very simple and we are going to apply some style to it. Before we add a style sheet to our web page, it is necessary to understand the basic CSS syntax. A CSS code looks like this...
Unlike HTML, CSS doesn't consider the white space in the codes, so the above code will work same as this one..
The curly braces, colons and semi-colon signs should be added carefully since they can cause an error. There are basically 3 ways to add style to a web page :
Inline Style : As the name suggests, the inline style sheet is added in the 'line' itself It is added to the HTML element itself inside the 'style' attribute. Here are few examples...
Here, style is added by adding the style="" attribute to the element to which we want to add style. You can try adding background colors to <h1>, <div> or <p> tags in a test page. Internal Style Sheet : Internal style sheet goes inside the HTML page. It can be put inside the <style></style> tags. Remember that the <style></style> tags always go inside the <head></head> tags. Internal style sheet is much more flexible as compared to the inline style sheet. Here are examples...
External Style Sheet : External style sheets are the most flexible because they allow you to assign the same styles to multiple Web pages. Here, you create an external CSS file (it is nothing more than a simple text file filled with CSS codes) having extension .css and save it to your PC. Now, you link this file to your HTML page using a simple code...
You can add the URL of your style sheet in the href="" attribute. This tag always goes inside the <head></head> tags of your page. Example...
Using this method, you can attach a single CSS file to multiple HTML pages and save you time You can practice the inline and internal styles using the Webartz Online Code Editor! I hope this tutorial helps you learn more about CSS. Thank You |
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by ankillien on Thu May 27, 2010 10:08 am; edited 1 time in total