CSS Help

denis.brzozowski · Nov 14, 2012

This isn't Web hosting as much as web creation. I know a lot of HTML but I wanted to get some CSS into it to create a website with a style. I'm still in the process of learning CSS reading books, help guides, tutorials etc and even trying it out myself. There are still some things that I need to learn and that are bugging me and I was hoping you guys could help. If I'm setting a style for my font e.g. h1 { font-color: red; } etc etc...how many styles can I create...it allows me to do h1, h2, and p but when i create one for p2 or p3 or p4 it doesn't apply the style...can anyone explain this to me un human terms?
Many Thanks ahead

wytas · Nov 15, 2012

HTML example:

<html>
<title>Opa opa</title>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p id="my_uber_css_style_name">wytas is Goodlike</p>
</body>
</html>

CSS example (CSS file name: mystyle.css):

#my_uber_css_style_name
{
text-align:center;
color:red;
}

How about that, try use ID or Class. Tell if it works

denis.brzozowski · Nov 15, 2012

Cheers Wytas

A few days ago I was reading a book on CSS and the ID and Class tags came up in there i just didn't read it carefully enough to understand how to use them. Cheers for this tip!

Baez · Nov 15, 2012

Moved to WG&D

Remember that IDs should only be used once per HTML file. Classes are used to apply styles to more than one element.

Veraster · Nov 15, 2012

I used codeacademy.com to learn how to use css. It's free. That might be something to look into.

Peter.Cort · Nov 20, 2012

codeacademy and w3schools are both great tutorials for using css and html!

Labtec · Dec 25, 2012

denis.brzozowski said:
If I'm setting a style for my font e.g. h1 { font-color: red; } etc etc...how many styles can I create...it allows me to do h1, h2, and p but when i create one for p2 or p3 or p4 it doesn't apply the style...can anyone explain this to me un human terms?
Many Thanks ahead

The reason nothing happens when trying to apply styles to p1,p2,p3,p4 is because you are attempting to apply styles to html elements which do not exist.

For example if you want so set some styles up for different elements you can do:

Code:

[FONT=Courier New]<html>
<title>Opa opa</title>
<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Your heading</h1>
<p>First paragraph</p>

<h2>Second heading</h2>
<p>Second paragraph</p>
</body>
</html>[/FONT]

Code:

h1,h2,h3,h4,h5,h6
{
      color: #ff0000;
}

p
{
     color: #0000ff;
}

Styling this way is what is known as global styles, which in easy terms basically means that you are styling each and every <h#> and <p> on the page.

You could also give them a class, to target those specific elements for example:

Code:

[FONT=Courier New]<html>
<title>Opa opa</title>
<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Your heading</h1>
<p class="para">First paragraph</p>

<h2>Second heading</h2>
<p class="para">Second paragraph</p>
</body>
</html>[/FONT]

You would then style it like so:

Code:

p.para
{
     color: #ff0000;
}

You use classes and not ID's because on any given page, you can only declare the same ID once. For example, you cannot do this:

Code:

<p id="para"> bla bla</p>
<p id="para"> bla bla</p>

But you can do this:

Code:

<p class="para">bla bla </p>
<p class="para"> bla bla </p>

I hope this helps your understanding a little.

Kind regards,

Lab.

CSS Help

denis.brzozowski

Beta member

wytas

Baseband Member

denis.brzozowski

Beta member

Baez

Admin / Dev

Veraster

In Runtime

Peter.Cort

TF's First Dry Ice User!

Labtec

Baseband Member

Similar threads