Forum Moderators: mack

Message Too Old, No Replies

Newbie CSS question

         

Dino_M

2:27 pm on Nov 22, 2002 (gmt 0)

10+ Year Member



I'm setting up my first site using CSS.

I have only just started and am using an internal style sheet.

Thing is I want to use <H1> of different color and font but seems that once you depict there style they are all the same.

I must be tired but P is all text in paragraphs? I want this in many different fonts colors postions how I define each different paragraph a different style?

BlobFisk

2:40 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Use classes. In your css:

.myClass {color: #000 }
.myOtherClass {color: #039 }

Then in the HTML:

<p class="myClass">...</p>

<p class="myOtherClass">...</p>

This will apply the color styling that you wish to each paragraph.

Dino_M

2:42 pm on Nov 22, 2002 (gmt 0)

10+ Year Member



cheers I presume the same thing can be done with the headers!

Nick_W

2:47 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Of course ;)

and it's not only colors. Borders, background-images, fonts, positions etc etc....

[w3.org ]

Have fun!

Nick

Birdman

3:15 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Or use pseudo classes to make all elements within a particular element display the same.

For instance, on one site I did I used a class for all of the <p>'s in the main content <div>. Then it dawned on me that this was not efficient. every paragraph was like this:

<p class="main">
content
</p>

Instead you could use this in your style sheet:

.content p{your styles here}

where .main is the containing div:

<div class="content">

So now all <p>'s in the div named "content" will display how you want them and <p> not in the div "content" will display to the default setting for p.

I hope I made some sense here;)

Nick_W

3:29 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A nice point Birdman.

They're not pseudo classes though. That's just a neat way of selecting elements.

There are four types of pseudo class

  • First child pseudo class
  • Link pseudo classes
  • Dynamic pseudo classes and
  • Language pseudo classes
You can read more here... [w3.org] though I'd suggest getting to grips with Birdmans suggestion before tackling them ;)

Nick

Reflect

8:31 pm on Nov 22, 2002 (gmt 0)

10+ Year Member



I have only just started and am using an internal style sheet.

I would heavily suggest using an external CSS file as it will save you pain when making site wide changes in the furture.

Brian

Birdman

2:17 am on Nov 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nick, I thought I might have used the wrong name;)

From me:

I hope I made some sense here

After looking again, I see I didn't!

I really do love that CSS feature, though. External CSS is a very powerful tool when it comes to efficiency. Boy do I remember when I had to change 100 pages, one by one. Not fun:(

These days I'm always trying to think ahead. I'm experimentint with dynamic menus now so I can add a link sitewide in a few minutes. Awesome!

Dino, good luck with CSS! You will never look back once you get through the initial learning stage. I personally like W3 Schools' [w3schools.com] resource.

Birdman