CSS Class Question

H

Hudsonjd

New Member
Hey everyone. My name's Jade and I'm rather new to web design.

I've been reading this more generic book on making web pages.
While it explains how to apply a class to paragraph elements AND other elements, Dreamweaver CS5 (the program I'm using for my XHTML) apparently only lets me apply a class name to a paragraph element.

It would save me quite a bit of time and energy if a web guru could tell me how to create custom classes for ANY element in Dreamweaver CS5 (or at least direct me to a page where it's explained in noob terms :)).

Thanks a million.

Jade H.
 
JakClark

JakClark

New Member
First thing is first, open up the code view tab in Dreamweaver. If you aren't using an external CSS file (from what I can gather, you're probably not) then you'll need to locate the <style></style> tag(s) in Dreamweaver. These will contain CSS, so you won't be able to search directly for '<style></style>'. Instead, search for either '<style>' or '</style>'.

Once you have done so, you'll see several generated CSS rules that follow this format:
.myRule {
background:red;
color:blue;
font-size:12px;
}
Click to expand...

During which you'll have probably seen something that looks a little like the rule below (considering you stated you can style 'p' tags (paragraphs).

p {
margin:0;
padding:0;
}
Click to expand...

Now, although you may have to look at a CSS documentation or somewhere on the net, you'll be able to write your own rules here, with flexibility. You can also apply each class to any element via source/ code view by finding the element you wish and defining the class like so.

<div class="myRule"></div>
Click to expand...

You can add classes for elements without a class too, by defining the element tag name:

div {
color:red;
}
Click to expand...

If you'd like to do the above, but not all divs are required to have red text colour, you can try nested elements (specifying a 'path' to the element'), like so:

/* This will target any 'p' tags within any div within the body. */
body > div > p {
background:black;
}

<body>
<div>
<p>
</p>
</div>
</body>
Click to expand...

Or, if you wish to be more accurate but less specific, you can try descending elements:

/* This will target any 'p' tags within anything within a div tag. */
div p {
background:black;
}

<!-- For example, the following <p></p> tag will still be targeted because it descends from a <div></div> tag. -->
<div>
<ul>
<li>
<span>
<p>
</p>
</span>
</li>
</ul>
</div>
Click to expand...

I'm not sure how familiar you are with HTML/ CSS, however I don't intend to sound patronising at all.

Also, apologies for the lack of indentation - I had included tabbed code, but vBulletin doesn't display it very nicely. :(
 
H

Hudsonjd

New Member
Thanks a lot Jak :)

This clears things up a bit better, but I think I need to clarify my problem a bit more.

First off, I'm using an external, single, CSS. How is creating an external CSS different (in the code I mean)?

I know how to create a class for div and p, but why won't a class rule apply to something like h1 or h2 elements within CS5? Is it because it has to be contained in a div or p element? Or is it because there's a different class assignment code in an external CS5 sheet?

If there is a code, how is it different?

I really appreciate your help BTW. And I don't feel patronized either.
I'm a self proclaimed noob with an utterly open mind at this point :)

Jade H.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
@jade,

I believe jak got your question right.
there is nothing stopping you from adding a class to anything in DW (of any version) to anything, and you should always use code view over design view. always.

external css is even better.
 
JakClark

JakClark

New Member
Hudsonjd said:
Thanks a lot Jak :)

This clears things up a bit better, but I think I need to clarify my problem a bit more.

First off, I'm using an external, single, CSS. How is creating an external CSS different (in the code I mean)?

I know how to create a class for div and p, but why won't a class rule apply to something like h1 or h2 elements within CS5? Is it because it has to be contained in a div or p element? Or is it because there's a different class assignment code in an external CS5 sheet?

If there is a code, how is it different?

I really appreciate your help BTW. And I don't feel patronized either.
I'm a self proclaimed noob with an utterly open mind at this point :)

Jade H.
Click to expand...

Not a problem.

As Phreaddee said, there is absolutely nothing wrong with external CSS - it's better as it keeps your HTML document less bloated (and smaller).

There is no difference in the code, too. In a HTML document where the CSS code is not externally linked to, it would look something like:

<style>
body {
color: black;
background-color: white;
margin: 0;
padding: 0;
}

.exampleClass {
width: 40px;
height: 11px;
line-height: 11px;
color: blue;
}

div {
width: 100%;
}
</style>
Click to expand...

Where as in an external document, there is no need for the <style></style> tags to surround the rules, and it ensure it is correctly called via the HTML page like so:

<link rel="stylesheet" href="path/to/your.css" />
Click to expand...

If it's because you're unsure as how to target elements such as h5 or span, then you can do so like this:

span {
color: red;
display: block;
}

h5 {
margin-top: 1px;
}
Click to expand...

A little heads up by the way. If your limitation occurs as a result of CS5, it could be that you're a little unfamiliar with where the option to add a class to a different element is located - or that the program is not clear enough. Either way, don't even bother learning to apply classes via the software - instead, jump over to code view and stay there :).

If you can't or don't wish to target the h5 via nesting or descending rules, then you can always add a class to it like so:

<h5 class="myClass">Header Text Here</h5>
Click to expand...

If you're further unsure it'd be easier to help if you could show us a picture of the Dreamweaver environment you're working in. ;D

Jak
 
S

simbob

New Member
Taken so long to write this what with work and all, you’ve probably got what you need now, but as someone still fairly new to the wonderful world of web design and a Dreamweaver user, my advice would be; Don’t be limited by what Dreamweaver can do, it only gives you the tip of the Iceberg and it only does what you tell it to do. You can do so much more manually – I don’t think most CSS3 rules are even available from the menus in CS5. I still use it although I hand code most things now with split screen.

You can add classes/ID’s to most things in the same way you are doing with your <p> elements

Take the following for examples (not my code), some is ‘inline’ styling and some is referencing an external style sheet. Although you should try to keep it external, depends on what you’re doing. You can put CSS inside <style> tags in the head section too which is what the others are referring to – sometime useful for applying document wide rules.

The CSS is the same wherever it resides, just applied differently.

<div id="topnav" style="clear:both;width:960px;height:25px;">
<div style="float:left;width:400px;word-spacing:12px;font-size:90%;padding-left:15px;padding-top:6px;white-space:nowrap;text-align:left;">
<a class="topnav" href="/default.asp" target="_top">HOME </a>
</div>

Hope it helps.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
The CSS is the same wherever it resides, just applied differently.
Click to expand...
to clarify cause this is a little ambiguous
lets look at the following simple css styles

external
p {color:red;}

head
<style>
p {color:blue;}
</style>

inline
<p style="color:green;">paragraph</p>


the inline style (green) will take preference always. if this is not present then the style within the head takes preference, finally then the external style.

inline are to be avoided unless absolutely necessary (which is not very often) as they are a nightmare to control. head styles are better but still need to be assigned on each and every page, external styles are the preferred option, as they can be assigned once to every page.

however then it comes down to order of the rule, with the latest taking preference, although specifity always wins out.

so with that previous example
p {color:red}
p {color:blue}
p {color:green}

p will always be green.

however
p.alert {color:red}
p {color:green;}

will product all paragraphs green unless it has the class name of .alert

probably with this its even worth simply just having .alert as then you can then assign it to any element
<p class="alert">
<span class="alert">
<div class="alert">
etc etc

hope that helps
 
JakClark

JakClark

New Member
simbob said:
You can put CSS inside <style> tags in the head section too which is what the others are referring to – sometime useful for applying document wide rules.
Click to expand...

Just to clarify you can still use document-specific CSS externally by adding an extra sheet for those rules.
 
You must log in or register to reply here.
Top