Tuesday, 28 June, 2022

webmastertools4u

Webmaster Tools

single post

  • Home
  • Cascading Style Sheets tutorial
CSS

Cascading Style Sheets tutorial

Cascading Style Sheets tutorial

Short introduction to CSS

 


 

Your name: 

Well, do you like the above form and our scrollbar? Or would you like to easily handle your website text, paragraphs and so on the way you want? If your answer is yes, then keep on reading. We are going to talk here about Cascading Style Sheets (CSS).

CSS are supported by Explorer 3 or Netscape 4 and above. There are several ways that you can use to implement the Style Sheet on your pages.

First, let’s learn how to place a Style Sheet right onto your HTML page. You will need to place <STYLE TYPE=”text/css”></STYLE> tags within the <HEAD></HEAD> and the comment – <!– and –> commands like this:

<HEAD>
<STYLE TYPE=”text/css”>
<!–

Here you will place your Style Sheet commands. See below.

–>
</STYLE>
</HEAD>

Well, now you can define any HTML tag the way you want like this:

H2 {font-size: 20pt; color: red} or
P {font: 10pt “Arial”} and so on.

There are lots of different Style Sheet definition commands:

font-family, font-style, font-size, color, background-color, position and so on.

You can also define several Style Sheet commands for one tag. For example:

H1.Normal {font-size: 12pt; font-family: arial;}
H1.Fancy {font-size: 14pt; font-family: courier; font-style: italic; color: red}

Now use the CLASS command in your HTML document and specify a style you want:

<H1 CLASS=”Fancy”>This is “Fancy” style</H1>

If you want one style for several HTML tags, do like this:

H1 H2 H3 {font-family: arial}

Now let’s learn how to create a CSS file and use it for all of your HTML pages. First, you will need to create a simple text file with a *.css suffix. Give the file a name. Let’s say, we’ll name it mystyle.css. Now type Style Sheet commands that you will be using in your CSS file. Enter as many commands as you want. Remember – no <HEAD> or comment tags are required in your CSS file!

All you need to do now is – place <LINK> tag within the <HEAD>…</HEAD> tags in all your HTML pages where you want to use the Style Sheet commands from your CSS file like this:

<LINK REL=STYLESHEET HREF=”mystyle.css” TYPE=”text/css”>

HREF – specifies the URL to your style sheet (can be http://path_to_your_css/mystyle.css).

One more way to specify a style for your HTML tags is to simply denoting a style inside any of your HTML tags with the STYLE command like this:

<FONT STYLE=”font-size: 20pt; color: red”>Welcome!</FONT>

Note that the STYLE command affects only the tag – not the entire page!

Well, now we’ll learn how to set up and use the CSS classes. In fact, we’ve already done this, see the above example (the CLASS command). You can set up a class of any style for any HTML tag (see the above example for H1 tag) or like this:

.stylename = {font-style: bold; color: green}

Give your class any name (We named it “stylename”. Note a period before the class name).

Well, now just place the CLASS command whenever you want to call your class:

<H1 CLASS=”stylename”>This is “stylename” style for a heading</H1> or
<P CLASS=”stylename”>This is “stylename” style for a paragraph</P>

Well, do you still want to have a scrollbar like ours? The scrollbar style commands are:

BODY
{
scrollbar-base-color: green;
scrollbar-arrow-color: yellow;
scrollbar- DarkShadow-color: blue;
}

You can also specify any scrollbar for form elements or IFRAME tags with the STYLE attribute, for example:

<TEXTAREA STYLE=”scrollbar-base-color:red;…” …>…</TEXTAREA>

As for our above form, now that you are a real CSS expert, check the web page source and try to figure out how we created it.

Recent Comments

No comments to show.

Archives

Categories