bare Basic how two CSS color/font?

**PSG1JOHN** · 03-12-2009, 12:04 AM

I have 3 P elements how do i give two of them different font-family property
and the last one text-decoration. I know the code i just don't know how make the code pick the 3 different p elements and give them all the different code. I am trying to learn with my HTML book but i just don't understand. I look online but they keep showing my how to change h1 h2 h3 color

**Nile** · 03-12-2009, 12:09 AM

Give them classes, for example:

Code:

<style type="text/css">
p.one {
  font-family: arial;
}
p.two {
  font-family: georgia;
}
p.three {
  font-family: "Trebuchet MS";
}
</style>
<p class="one">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum sodales risus. Phasellus at purus et est molestie ullamcorper. Vestibulum posuere varius nibh. Cras eu metus. Donec suscipit. Aenean in mauris vitae leo malesuada volutpat. Suspendisse dolor. Aliquam euismod augue eget felis. Suspendisse dolor nunc, commodo sed, interdum non, hendrerit eget, metus. Aenean sed mi. Aenean dolor augue, lobortis sit amet, mattis eu, interdum at, quam. Phasellus ultricies, felis nec adipiscing pretium, diam dolor faucibus turpis, vel consectetur nulla dui id mauris.
</p>

<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum sodales risus. Phasellus at purus et est molestie ullamcorper. Vestibulum posuere varius nibh. Cras eu metus. Donec suscipit. Aenean in mauris vitae leo malesuada volutpat. Suspendisse dolor. Aliquam euismod augue eget felis. Suspendisse dolor nunc, commodo sed, interdum non, hendrerit eget, metus. Aenean sed mi. Aenean dolor augue, lobortis sit amet, mattis eu, interdum at, quam. Phasellus ultricies, felis nec adipiscing pretium, diam dolor faucibus turpis, vel consectetur nulla dui id mauris.
</p>

<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum sodales risus. Phasellus at purus et est molestie ullamcorper. Vestibulum posuere varius nibh. Cras eu metus. Donec suscipit. Aenean in mauris vitae leo malesuada volutpat. Suspendisse dolor. Aliquam euismod augue eget felis. Suspendisse dolor nunc, commodo sed, interdum non, hendrerit eget, metus. Aenean sed mi. Aenean dolor augue, lobortis sit amet, mattis eu, interdum at, quam. Phasellus ultricies, felis nec adipiscing pretium, diam dolor faucibus turpis, vel consectetur nulla dui id mauris.
</p>

Edit:
Haha! Second time.

**bluewalrus** · 03-12-2009, 12:10 AM

use classes

.classname {
styles;
}
.otherclassname{
styles;
}





Niles wins the race again hah

**PSG1JOHN** · 03-12-2009, 04:41 AM

This is what I am working on to learn CSS and my code. Color green is my HTML color red is my code. Just seeing what you think and did i complete all my goals in my code here the list of thing i needed inside in it.

1.Use the font-family property to make it so that two p elements on the practice page

2.Use the font-size property to make it so that at least 3 different font sizes are used on the page

3.Use the font-weight property to make it so that all q elements appear bold and all h1 elements appear normal (not bold)

4.Use the font-style property to make it so that all list items appear in italics.

5.Add a text-decoration of your choice to the paragraph

6.Use the color property to make it so that at least three different colors of text appear on the page. Use only hex codes, not the predefined color names

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" xml:lang="EN"> <head>
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
<title>Assignment 7 Page</title>
<link type = "text/css" rel = "stylesheet" href = "a7code.css" />
</head>
<body>

 Here is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. is a paragraph that displays in one font. 


Here is a paragraph that displays in a second font. Here is a paragraph that displays in a second font. Here is a paragraph that displays in a second font. Here is a paragraph that displays in a second font. Here is a paragraph that displays in a second font. Here is a paragraph that displays in a second font.

<h1>Here's an h1 element that isn't bold.</h1>

<q>Here's a q element that appears bolder than normal text.</q>

<ol>
<li>Make sure that this list is in italics.</li>
<li>Make sure that this list is in italics.</li>
<li>Make sure that this list is in italics.</li>

</ol>

<ul>

<li>Make sure that this list is in italics.</li>
<li>Make sure that this list is in italics.</li>
<li>Make sure that this list is in italics.</li>
</ul>

Use some text decoration in this paragraph. Use some text decoration in this paragraph. Use some text decoration in this paragraph. Use some text decoration in this paragraph. Use some text decoration in this paragraph. Use some text decoration in this paragraph. Use some text decoration in this paragraph.

Note: You will have to use your own ingenuity to complete the assignment with regard to displaying font size and font color.


<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />

</a>


</body>
</html>

body {
font-family: sans-serif, "Impact", "Andale Mono", Arial black;
font-size: small;
}

p.one {
font-family: "Arial black";
color: #99ffff;
font-size: xx-small
}

p.two {
font-family: "Impact";
color: #ccccff;
font-size: XX-large
}

p.three {
text-decoration: underline;
color: #33ff00;
font-size 140%
}

q {
font-weight: bold;
}

ol, li {
font-style: italic;
}

h1 {
font-weight: normal;

}

**Snookerman** · 03-12-2009, 06:39 AM

You've completed #2-#6 but #1 I don't get, I think you cut it off. Just some small mistakes:

Code:

body {
font-family: "Impact", "Andale Mono", "Arial black", sans-serif;
font-size: small;
}

p.one {
font-family: "Arial black";
color: #99ffff;
font-size: xx-small;
}

p.two {
font-family: "Impact";
color: #ccccff;
font-size: XX-large;
}

p.three {
text-decoration: underline;
color: #33ff00;
font-size: 140%;
}

q {
font-weight: bold;
}

ol, li {
font-style: italic;
}

h1 {
font-weight: normal;

}

**PSG1JOHN** · 03-12-2009, 01:32 PM

1.Use the font-family property to make it so that two p elements on the practice page have different fonts. Be sure to include several font options in your rules. I think i did this i have both of them with different fonts, the Be sure to include several font options in your rules i don't know.