Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to use CSS in your webpage

This article will tell you, how you may use css in your webpage in 3 different ways (inline css, page css and external css). All the 3 ways have been discussed here in detail.

CSS stands for Cascading style sheet. It has a variety for uses on a web page like styling of html tags.

With Css you may make image transparent, Repeat image pattern on background, make your site look beautiful etc.

CSS is really easy to learn.

Before continue I suggest you to have some idea about CSS .There are several books available for same.Just refer a simple one first. You will find lots of interesting things, this article will tell you, how you may use css in your webpage in 3 different way.

You may choose any one of the style according to the scenario.

The 3 ways are:

  1. Inline css: You define css with tag definition. Here Css is only works for the tag where it is defined. So, use it where you want unique style for an element on a webpage
  2. Page css : You define css in head section of webpage so that the Css is effective for whole page.
  3. External css : You write your css style in an external css file and then include it in your webpage.Use it when you have a common Css and want to use that in multiple pages.

Now we will discuss all these styles one by one.First we discuss about inline css where definition is provided on tag itself:

Listing 1: Inline CSS

<html>
<head>
<title>csanuragjain</title>
</head>
<body>
<p style="color:blue">Hello</p>
</body>
</html>

Here,

  1. You may define any title you like in the title tag.I just wrote my name in title tag

  2. we have applied the css on the tag itself
  3. We applied the css on p tag by defining the style attribute for this tag
  4. We set the color as blue for p tag so that the text inside this will be colored in blue.

Now we will discuss about Internal css

Listing2: Internal CSS

<html>
<head>
<title>csanuragjain</title>
<style type="text/css">
p
  {
  color:blue;
  }
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>

Here,

  1. You may define any title you like in the title tag.I just wrote my name in title tag
  2. We have used internal css that is we defined the css inside script tag which is placed inside head tag.
  3. We set the color of all p tags to be blue.
  4. The difference in this css style and previous one is that this css will work on all p tag but in the previous the css work only for that particular tag

Now, we discuss about External CSS

Listing 3: External CSS(HTML FILE)

<html>
<head>
<title>csanuragjain</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Hello</p>
</body>
</html>

Style.css

Listing 4: External CSS(STYLE.css)

P
{
Color:blue;
}

Here

  1. You may define any title you like in the title tag.I just wrote my name in title tag
  2. We use external css.This is helpful where we want to apply same css to multiple pages.
  3. We made a file named style.css which contain the styles to be used for tag.
  4. We call the css using the link tag.This tag define the position from where the css will be extracted.

Always use the styles carefully and remember sometimes the styles may have different appearance on different browser.

Commonly when you make a website you will require external css since this can be used to include the header and footer information on multiple pages with a single line which reduce a lots of coding work and is also very effective and easy.

Use inline css only when you know that changes need to be applies for that tag only.

Use Internal CSS only when you know that this styling is only need to be applied.

Note:It is the best practice to make use of external css instead of other two in most of cases. This is because if there is even a slightest change required in the styling of webpages then it would be very difficult to make changes via internal or inline css but it would be very easy with external css since you only need to apply changes at one place and the changes are reflected in all webpages.

With this I would end the article, hoping that liked it. See you next time.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login