Text and Boxes

A

autopost

Guest
I need to do two things...

1. I really want to be able to define two or more text styles in the style.css page that will allow me to vary the look of texts in my page...When I try to do this, the second one always comes back with a default (black, Times New Roman)...Anyone know what I am doing wrong.

2. I would like to frame the entire page (and all other pages) with a slim border (silver) at 768 X 95% centered...

I am new to this so please be descriptive! Thanks so much...these forums are great.I'd have to see the code for the 1st problem, but it's most likely a syntax error or invalid font.

For the silver border you could do this...


body{
border:2px solid silver;
margin:0; padding:0}This is all I have in the Style.css right now:
the "p" is what I want certain text to be and the "p2 is what I want others to be...

In addition, in the "body tag" how can I now center this in page?

Thanks for the help.

body {
border:1px solid silver;
margin:5; padding:5; width:768px;
}

h1 {
color:#000080;
font-size:25px;
font-family: Tahoma, Arial;
}

p {
color:#808080;
font-size:12px;
font-family: Tahoma, Arial;
}

p2 {
color:#000000;
font-size:12px;
font-family: Tahoma, Arial;
}p2 wont work.

when you are writing things like p{} and h1{} you are defining the styles for the <p> and <h1> tags.

what you need to do is define two classes like this:


p{font-size:12px; font-family: Tahoma, Arial;}
.text1{color:#808080;}
.text2{color:#000000;}


What this does is applies a 12px font size and that font family to all <p> tags. When you want the black text you would use this...

Code: 
<p class="text2">Text goes here.</p>
[CODE]

You would use the other class on another tag to get the silver text. You can use those classes on any HTML tag, but only the <p> tags will have the font size and family with this code.

I suggest not using px to define you font size. People cannot resize the text in IE when you use px font sizes, and sometimes people wont be able to read the text on your page for whatever reason.Thanks...I will move away from defining px size...

That was easy enough!Just to take it a step further, if we suppose that, for example, all paras will have same font family, most will be displayed in black, but some will be in different sizes/colors; you can use the "cascading" part of CSS along this line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
p {
  font-family: arial, helvetica, sans-serif;
  font-size: medium;
  color: black;
}
.bigblue {
  font-size: large;
  color: blue;
}
.smallmaroon {
  font-size: small;
  color: maroon;
}
-->
</style>
</head>
<body>
<h1 class=top>Lorem Ipsum</h1>
<p>This is a normal paragraph.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p class=bigblue>This is a "bigblue" paragraph.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p class=smallmaroon>This is a "smallmaroon" paragraph.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Back to normal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>Thanks for all the help.

You can see what little progress I have made over the past couple of hours in day one of CSS.

Temporary Site (<!-- m --><a class="postlink" href="http://www.lpwv.org/hosted/wilson">http://www.lpwv.org/hosted/wilson</a><!-- m -->) 

Next phase: I want to move this box to be centered up in the top of the screen...I also would like to add a bit of padding in between the border and the text all the way around...and finally, I want to put a dashed box for an image or some set off text in the box on the right about half way down...

Sorry to be such a burden, but I am not getting anything from the tutorials and you all are guiding me through flawlessly...

Thank again...I really do appreciate it...Originally posted by michaelswilson 

Next phase: I want to move this box to be centered up in the top of the screen...I also would like to add a bit of padding in between the border and the text all the way around...and finally, I want to put a dashed box for an image or some set off text in the box on the right about half way down...
  
To center the box, give it a width and set the left and right margins to "auto". Padding is easy, you can set them all with one value, or top-right-bottom-left values. And dashed borders are...you guessed it: dashed. :)

div.box {
  width: 500px;
  margin: 5px auto;
  padding: 1em;
  border: dashed 2px gray;
}Okay...I got those changes made.

Temporary Site: Updated (<!-- m --><a class="postlink" href="http://www.lpwv.org/hosted/wilson">http://www.lpwv.org/hosted/wilson</a><!-- m -->) 

Now...I have one more thing and I think I can take it from there...all of the basic elements will be in place.

Here is an image of what I am wanting to do...it is easier than explaining... Image (<!-- m --><a class="postlink" href="http://www.lpwv.org/hosted/wilson/test.gif">http://www.lpwv.org/hosted/wilson/test.gif</a><!-- m -->) 

Thanks...Sorry to be such a burden!Something like this?Thanks....That is exactly what I was wanting...

You are Master Cricket I am mere grasshopper.

Sorry it took so long to get back with the reply, crazy day...I plugged it in...it looks great...

I am gonna stare at this for a day or two and think of where I want it to go next...May be back in touch with you...

Thanks for all the help!
 
You must log in or register to reply here.
Back
Top