# formatting div paragraph tag in css



## breegeek (Jul 31, 2007)

I have an external style sheet 
and I have divs in an html file

um how do I add to my css file like a div paragraph format?
Do I make this some kind of class or whatever?
and an h1?

so that it has a seperate formatting in the div tag when I say

?


----------



## tomdkat (May 6, 2006)

breegeek said:


> so that it has a seperate formatting in the div tag when I say
> 
> ?


You can define a class or id in your CSS file that has the attributes you want applied to the paragraph. Then, you can either assign that id or class to the paragraph itself or use a syntax like:


```
.class p { [styling goes here] }
```
 to refer to the 'p' element inside the element of the specified class.

Here is an example:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>div test</title>
  <link rel="stylesheet"
 href="style.css" type="text/css">
</head>
<body>
<div class="italic-div">
<p>Here is a paragraph</p>
<h3>Here is text outside a paragraph</h3>
</div>
<div>
<p>Here is another paragraph</p>
</div>
</body>
</html>
```
External CSS file:

```
.italic-div p {
  font-style: italic;
}
```
Then, the paragraph in the "italic-div" is in italics while the H3 element is not. The paragraph outside the "italic-div" div is not in italics either.

Does that help?

Peace...


----------



## breegeek (Jul 31, 2007)

ok, so if i say ".class p" or ".class img" it will apply itself to all p and img whether or not theyre in the div tag?

do i have to tell the

that it belongs to a class?


----------



## tomdkat (May 6, 2006)

breegeek said:


> ok, so if i say ".class p" or ".class img" it will apply itself to all p and img whether or not theyre in the div tag?


Nope, the ".class p" and ".class img" will apply itself ONLY to paragraph and image elements INSIDE a div named "class", in this case. If you want to define a style to apply to ALL elements of a given type, like 'p' elements regardless of what DIV they are in, define a class or id with the style you want and assign that class or id to the element itself, like this:


```
<style type="text/css"> .italic { font-style: italic; }</style>
```
 Then your HTML looks like this:

```
<p class="italic">This is some text</p>
```
So, are you looking to define styles to apply to elements throughout your site for consistency or do you want some elements inside certain DIVs to have styling different than those same kinds of elements outside those "special" DIVs?

Peace...
do i have to tell the

that it belongs to a class?[/QUOTE]


----------



## breegeek (Jul 31, 2007)

id really like it just to apply to my divs, because all of my type, content images, links etc that I want to be formatted are in layers of DIVs. My css skills are lacking, hardcore.

I want a paragraph, link, dif images etc in divs to be just so, and since each DIV has a class already, i can't adjust the name really, cus it will mess up my array.

Whats the simplest way to get this done?

thanks by the way!


----------



## tomdkat (May 6, 2006)

breegeek said:


> Whats the simplest way to get this done?


If your site is online, post a link to it so we can see what you've got now. Then we can advise on how to proceed. 

If your site isn't online yet, send me a PM with your e-mail address and we'll work on this some offline and update this thread later.

Peace...


----------



## breegeek (Jul 31, 2007)

ok ill throw it up :

http://www.nerdcomics.com/pinksite/sitepink.html#


----------



## tomdkat (May 6, 2006)

Ok, first you need to fix the location of your CSS file.

This line needs to be changed:


```
<link href="file:///C|/Documents and Settings/breezy/My Documents/GD homework/style.css" rel="stylesheet" type="text/css">
```
to this:

```
<link href="style.css" rel="stylesheet" type="text/css">
```
On your computer, is the file "style.css" in the same folder as "sitepink.html"? If it is, the above change will work fine.

Now, let's say you wanted to make the "about about" text italic, bold, and underlined and ONLY that text, then you could code a class like this:


```
.special-text { font-style: italic; font-decoration: underline; font-weight: bold; }
```
Then in your HTML, you change the "about" paragraph to this:

```
<p class="special-text">about about</p>
```
First, fix the location of your stylesheet as I mention above and then we can go from there.

Peace...


----------



## breegeek (Jul 31, 2007)

wow hahaha i didnt even realize. 

I just started using dreamweaver, and i forgot it does some things on its own

i fixed it by the way, but I havent made any changes otherwise


----------



## tomdkat (May 6, 2006)

Great! See how your text has changed already? 

Ok, now that we've got "real" content to look at, what others kinds of styling are you looking to do?

Peace...


----------



## breegeek (Jul 31, 2007)

well, i guess mostly links and images have to be formatted, but images cannot be formatted for the entire document, because, as you see, there are many images that make up the whole table structure.... if I add padding to them, byebye table.


----------



## tomdkat (May 6, 2006)

Ok, then as has been demonstrated above you need to create classes for images with the styling you want applied to them. Then, for the images that need the styling you either assign the images the appropriate class (multiple classes can be assigned to an element).

If you identify one image that needs "special" styling, we can use that as an example.

Peace...


----------



## breegeek (Jul 31, 2007)

alright, that makes sense. I guess I was looking for a way to avoid classing my images.
CSS is magical, but I guess it can't read my mind 


Thanks a ton! Id spent 3 days working on the javascript (and about 50 different confusing issues) and I think my brain got whithered and fried.


----------



## tomdkat (May 6, 2006)

breegeek said:


> alright, that makes sense. I guess I was looking for a way to avoid classing my images.
> CSS is magical, but I guess it can't read my mind


Why do you want to avoid assigning classes to images? If all the images that need the "special" formatting/styling are in the same div, you can use the ".class img" syntax, I mentioned above, to achieve the same goal.

See, if you provide a concrete sample of a "real" style you want to apply, we can use that as an example of what your options are.

Peace...


----------



## breegeek (Jul 31, 2007)

Hey thanks for all your help. this was a project for a web design class, and I think it looks alright for now (my brain has turned to oatmeal).
Take a look at it again if youd like to see the results of all your help 

Although my web design prof had no clue how to help me, I learned some new javascript stuff and whatnot by experimenting. It's good to step out of the frame, now that theyre dead ^_^

thanks again!


----------



## tomdkat (May 6, 2006)

Well, I think you've done good work. Some will take issue with your use of tables for page layout but considering you're taking a class, I think you did a job. If nothing else, the site certainly does look good (at least to me). 

Peace...


----------

