WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Adding CSS stylesheet to HTML Page

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Adding CSS stylesheet to HTML Page Wed May 26, 2010 7:28 pm

ankillien

ankillien
Administrator
Administrator
Adding CSS To Web Pages
3 ways to add style sheet to your web pages

Hello Everyone Very Happy

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...

Code:
<html>
<head>
<title>Learning CSS - WebArtz Forum</title>
</head>
<body>
<h1>This is my HTML Page</h1>
<p>I am a member of WebArtzForum.com. I am learning CSS right now. I am sure that I know basic HTML coding and I can work with the commonly used HTML tags. I am going to learn how to add style to my web pages. This is the first page to which I am going to apply style.</p>
</body>
</html>

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...

Code:
selector {
property : value;
}

Unlike HTML, CSS doesn't consider the white space in the codes, so the above code will work same as this one..

Code:
selector { property : value; }

or this

selector{property:value;}

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
  • Internal Style sheet
  • External Style sheet


Inline Style :

As the name suggests, the inline style sheet is added in the 'line' itself Razz It is added to the HTML element itself inside the 'style' attribute. Here are few examples...

  • Code:
    <p style="background-color : blue;">
    This is a paragraph that has a blue background color.
    </p>

  • Code:
    <img src="image.gif" style="border-width : 3px;" />
    The above is an image having a border as wide as 3px.


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...

  • Code:
    <html>
    <head>
    <title>Test File</title>
    <style>
    body { background-color : pink; }

    p { color : green; }

    h1 { text-decoration : underline; }
    </style>
    </head>
    <body>

    <h1>This is a title</h1>
    <p>Here is a test paragraph that has green text inside. The title above has an underline that we added via an internal stylesheet.</p>
    <p>Oh yes, the document has a pink background color. It is added via internal style sheet as well.</p>
    </body>
    </html>

  • Try adding this CSS codes in the page you created. The code should added inside <style</style> tags only.

    Code:
    <style>
    body {
    background-color : yellow;
    }
    p {
    color : red;
    font-weight : bold;
    font-size : 20px;
    }
    h1 {
    border : 1px solid red;
    text-align : center;
    text-decoration : underline;
    }
    </style>

    You'll see many different styles added to different elements.



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...

Code:
<link rel="stylesheet" type="text/css" href="URL OF YOUR STYLE SHEET.CSS" />

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...

  • Code:
    <html>
    <head>
    <title>Test File</title>
    <link rel="stylesheet" type="text/css" href="myfirststyle.css" />
    </head>
    <body>
    [i]<!-- html tags go here -->[/i]
    </body></html>


Using this method, you can attach a single CSS file to multiple HTML pages and save you time Very Happy


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 Very Happy
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

2Accespted Re: Adding CSS stylesheet to HTML Page Thu May 27, 2010 8:53 am

Fred100

Fred100
Registered Member
Registered Member
Wow , Thanks for the tutorial , I'm a really BIG fan of your tutorials because they explain everything soo clearly , and yeah in the starting part , you had a typo at "I am going to learn hot to add style to my web pages." maybe its "how" at there right? Very Happy
And I have some questions ,
1. Does the CSS works alright even if I use <h1>, <div> or <p> ?
I mean do they work as same? or Is there any difference?

2. When I used the code editor , to test a code which I did seeing your tutorial , and hitted the preview button in the code editor , it din't do anything except showing it all blank , BUT when I used the same code and used it on another Html Editor (Which Sanket provided in one of his tutorials) , It showed it clearly there.

And yeah , I go through your tutorials extremely carefully because all of your tuts helped me understand anything easily and they're really descriptive , and it's easy to understand them Smile

http://www.art-castle.biz/forum.htm

3Accespted Re: Adding CSS stylesheet to HTML Page Thu May 27, 2010 10:19 am

ankillien

ankillien
Administrator
Administrator
Hey Fred,
Glad this tuts help you Very Happy

1) CSS rules are same for all tags whether you use <p>, <div> or <h1> etc. You just need to select an element to which you want to apply style. Suppose it is <h1>, so your CSS will be...

Code:
h1 {
background-color : red;
}

and if it is for <p> tag the code will look like this..

Code:
p {
background-color : red;
}

2) If you are using the WebArtz HTML Editor, you should write the codes in "Code" mode not in "Design" mode. In addition, you need to put the CSS codes between <style></style> tags and the HTML codes should go below it.

Hope I made it clear Very Happy

4Accespted Re: Adding CSS stylesheet to HTML Page Thu May 27, 2010 11:25 am

Fred100

Fred100
Registered Member
Registered Member
Oh , alright , haha , that makes sense now , Thanks Very Happy

http://www.art-castle.biz/forum.htm

5Accespted Re: Adding CSS stylesheet to HTML Page Sat Jun 12, 2010 8:54 pm

50Cent


Registered Member
Registered Member
So i have a question.

The CSS code and the HTML code is the same? If i use either one.

Code:
p {
color : red;
font-weight : bold;
font-size : 20px;
}

Code:
<p style="font-family:arial; color:red; font-size:12;">TEXT</p>

6Accespted Re: Adding CSS stylesheet to HTML Page Sat Jun 12, 2010 11:12 pm

ankillien

ankillien
Administrator
Administrator
Yes, both those codes same same.

7Accespted Re: Adding CSS stylesheet to HTML Page Sun Jun 13, 2010 12:19 am

50Cent


Registered Member
Registered Member
Can i add font-weight:bold; to the html? Or only CSS can?

8Accespted Re: Adding CSS stylesheet to HTML Page Sun Jun 13, 2010 9:30 am

ankillien

ankillien
Administrator
Administrator
You can add any CSS to HTML elements as style='' attribute.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Adding CSS stylesheet to HTML Page

Permissions in this forum:
You cannot reply to topics in this forum