New to CSS. Some advice please

I read that the CSS debate has been going on for ten years and I believe it. Googling how to use it just brings up lots of redundant information. Maybe asking here, someone can point me in the right direction.

I haven’t programmed for years, so this code is probably stone age to most. How would you set this up in a styles.css file?


  <!doctype html public "-//w3c//dtd html 4.01 transitional//en"
                       "http://www.w3.org/tr/html4/loose.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en">
   <head>
    <title>MyPage.com</title>
      <link rel="stylesheet" type="text/css" href="../styles/admin.css">
  </head>
  <body>
    <p>Admin Login</p>
      <table align="center">
        <form method="POST" action="admin.php">
          <tr><td colspan="2"><hr width="200"></td></tr>
          <tr><td>Username</td><td><input size="15" maxlength="15" type="text" name="admin"></td></tr>
          <tr><td>Password</td><td><input size="15" maxlength="15" type="password" name="password"></td></tr>
          <tr><td colspan="2"><hr width="200"></td></tr>
          <tr><td colspan="2" align="center"><input type="submit" name="submit" value="Log in"></td></tr>
        </form>
      </table>
    <p><a href="mailto:webmaster@MyPage.com">Webmaster@MyPage.com</a></p>
  </body>
  </html>

</DIV>
Then I have this CSS file. Just wondering if anyone could give me a little guidance.


body {
text-align:center; /* for IE */
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
div#wrapper {
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}
a:link {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:visited {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:hover {
color: #f00;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:active {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
 

</DIV>

The body and div#wrapper I don’t have a clue about. I just wanted to center ALL of my pages and found it on some page.

Thanks for any help, and please don’t throw stones at me. I live in a glass house.

This is a really quick example of what you could do with CSS:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
body {
text-align:center; /* for IE */
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
div#wrapper {
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
background: #f2f2f2;
padding: 10px;
}
a:link {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:visited {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:hover {
color: #f00;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}
a:active {
color: #000;
text-decoration: none;
font-family: verdana, helvetica, courier;
font-size: 12px;
}

form {
width: 250px;
border: solid #ccc;
border-width: 2px 0;
padding: 5px 0;
}

label {width: 80px; float: left;}
</style>
	
</head>


<body>
[COLOR="Red"]<div id="wrapper">[/COLOR]
    <p>Admin Login</p>
      
        <form method="POST" action="admin.php">
          
          <label>Username</label> <input size="15" maxlength="15" type="text" name="admin"><br>
          <label>Password</label> <input size="15" maxlength="15" type="password" name="password"><br>
          
          <input type="submit" name="submit" value="Log in">
        </form>
      
    <p><a href="mailto:webmaster@MyPage.com">Webmaster@MyPage.com</a></p>
[COLOR="Red"]</div>[/COLOR]
  </body>
  </html>

I’ve highlighted the #wrapper div in red.

Even using CSS, you still need: <p> and <br /> ??

and the style looks a little different being on the same page as the code and not a separate .css include.

I will try and tinker with it.

I was being a bit lazy with the <br> (I normally wouldn’t use that) but the main thing here was the CSS.

CSS and HTML are two different things. HTML is for marking up various bits of content, so yes, <p> is common web page fodder.

CSS is just for styling those elements.

and the style looks a little different being on the same page as the code and not a separate .css include.

Yes, I just put it there for convenience. Normally you’d put it in an external file on a live site. You can just cut that CSS and paste it into an external file instead. The CSS itself doesn’t change, just the way it’s linked to the page.

My main aim was to show how the #wrapper code in the CSS would relate to the page’s HTML. DIVs are a major component of layout out pages with CSS—an alternative to tables, if you like.

EDIT:
Please feel free to ask lots more questions if you have them.

Okay. This is what I noticed from the changes.

#1 - You added lines at the bottom and top without using <HR>.

#2 - The <br>'s seemed to have no effect on my browser, with or without them it stayed the same

#3 - It left justified the form when I like it centered. I tried putting an ALIGN: center; in the CSS form { statement. It had no effect.

That’s just a few of the things I saw that are major changes.

I was being a bit lazy with the <br> (I normally wouldn’t use that) but the main thing here was the CSS.
Actually I would consider that an appropriate use of the <br> tag. That is what it’s for, forcing line breaks. The abuse comes in when people use them as a substitute for margins. With CSS turned off you still get new lines with the <br> in the mark up.

Though I would be using inline-block instead of float to allow for setting widths. That naturally gives the option to take advantage of vertical-align for the labels and inputs. (IE6/7 would need a helping hand w/ inline-block though)

Inline-blocks are also capable of taking on vertical margins so you can use that for spacing as well.

@gregs

One other thing I would point out is that you do not have to redefine the font styles and text-decoration on all the different pseudo states of your anchors. The only ones that need to be declared are the ones that change.

<!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=utf-8">
<title>Test Page</title>
    
<style type="text/css" media="all">
#wrap {
    width: 748px;
    margin: 0 auto;
    padding: 10px;
    background: #f2f2f2;
    font: 12px/1.2 verdana, helvetica, courier;
    text-align:center;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #f00;
}
form {
    width: 250px;
    margin: 0 auto;
    border: solid #ccc;
    border-width: 2px 0;
    padding: 5px 0;
    text-align:left;
}
label, input {
    display:inline-block;
    vertical-align:middle;
    margin:4px 0;
}
label {
    width:6em;
}
</style>
    
</head>
<body>

<div id="wrap">
    <p>Admin Login</p>
    <form method="POST" action="admin.php">
        <div>
            <label for="admin">Username</label>
            <input size="15" maxlength="15" type="text" name="admin" id="admin">
            <br>
            <label for="password">Password</label>
            <input size="15" maxlength="15" type="password" name="password" id="password">
            <br>
            <input type="submit" name="submit" value="Log in">
        </div>
    </form>
    <p><a href="mailto:webmaster@MyPage.com">Webmaster@MyPage.com</a></p>
</div>

</body>
</html>

Where did the body tag go to? Could I just make a body and place the font within it. Wouldn’t that make everything the same UNLESS it is over-ridden within another style?

Would the change below be acceptable?
( I moved the font from #wrap to body )


body {
    font: 12px/1.2 verdana, helvetica, courier;

}
#wrap {
    width: 748px;
    margin: 0 auto;
    padding: 10px;
    background: #f2f2f2;
    text-align:center;
}
a {
    color: #000;
    text-decoration: none;
}

Yes, absolutely. By placing it on the body element, all other text in the page (well, almost*) will follow that font family, unless you specify otherwise on any particular element.

  • I think sometimes form elements (like textarea) use some other default unless specified. Have to check that … can’t remember exactly, but I have had issues with that.

I should have said “Element” instead of style. Just shows how “programming illiterate” I am.

What about highlighting things like the Admin Login at the top. In the last CSS, a


label {
width:6em;
}

was placed within it. I don’t see what effect that has. Should it make it BOLD.

I know label applied to things within the form, but how would I go about making this text larger?


    <p>Admin Login</p>

Honestly, learning HTML and PhP has been easier than trying to figure out CSS. I may just be too old to learn any new tricks.

No, for a bold LABEL you could have used: label { font-weight : bold; } (for making it bold) the above was a label with a width of 6 em units.

For the paragraph you might use something like: p { font-size: 200%; } to increase the font size. Obviously I have oversimplified these samples but you get the general gist.

The key to using CSS… and HTML properly is the HTML – the point of HTML in MODERN coding practice (and for HTML PRIOR to HTML 3.2) was to say what things ARE. What is the element. Is that a paragraph? Yes, it goes in P, no it doesn’t! Is that table tabular data? No, then don’t use a table… (your form was SO incorrect even old-school – you can’t put FORM between <table> and <tr>) … if it’s a heading, like “admin Long” use a heading-type tag – that’s your numbered headings like h1, h2, h3, a table heading like TH, a table CAPTION, or a form LEGEND.In this case, that’s a LEGEND for a FIELDSET.

Though tags like LEGEND and FIELDSET have problems with styling, you SHOULD be using them around the appropriate elements so you have SEMANTIC markup. This may result in needing to resort to an extra DIV or SPAN in the HTML to take care of that. This is done not just for things like screen readers and search engines, but also for the people who still use browsers like LYNX or intentionally turn off CSS when a website’s styling is particularly… offensive or useless for their needs. (see EVERY MALFING TIME SOMEONE USES PX FOR CONTENT FONT SIZES!!!)

Basically, CSS is only as good as the HTML it’s applied to.

Rayzur lightly touched upon the other big mistake many beginners make in CSS - the entire point of CSS is to say values once and have them ‘cascade’ down to like/child elements. As such your restating the different anchor states over and over and over again is just a pointless waste of code. Notice in his how he only sets the values once on A, and then targets just the ones that are DIFFERENT.

My approach ends up a hair more code because I use FIELDSET and LEGEND, which don’t accept CSS styling the same way across all browsers – so I add a wrapping DIV around the fieldset and a span inside the legend to let me do all my styling.

So the HTML ends up something like this:

<!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"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	MyPage.com
</title>

</head><body>

<form method="post" action="admin.php">

	<div class="fieldsetWrapper"><fieldset>
		<legend><span>Admin Login</span></legend>

  	<label for="adminName">Username</label>
  	<input
  		size="15"
  		maxlength="15"
  		type="text"
  		name="admin"
  		id="adminName"
  	/><br />
  	<label for="adminPassword">Password</label>
  	<input
  		size="15"
  		maxlength="15"
  		type="password"
  		name="password"
  		id="adminPassword"
  	/><br />
  </fieldset></div>

  <div class="submitsAndHiddens">
		<input
			type="submit"
			name="submit"
			value="Log in"
		/>
		<a href="mailto:webmaster@MyPage.com">Webmaster@MyPage.com</a>
	</div>

</form>

</body></html>

Which got rid of the paragraphs because NOTHING there qualifies as a paragraph. That’s NOT to say you shouldn’t use paragraphs or we aren’t using them because of CSS – it’s because nothing on that page IS a paragraph… and it’s just as bad to wrap tags with the wrong meaning around text as it is to omit them altogether.

The div.submitsAndHiddens is something I generally do on all my forms as a styling hook – since usually when you have a full form there will be other data (like a form verification/session hash) along with it, and it’s nice to keep them all organized. It also gives us a block-level container to wrap that anchor around – submits to me really do not belong in fieldsets as they are an action, not a form field. I do this because you can’t put A directly under FORM or BODY since it’s inline-level… at least not in a MODERN doctype.

My CSS ends up something like this:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	text-align:center; /* center #form IE 5.x */
	font:normal 85%/140% verdana,helvetica,sans-serif;
}

form {
	width:16em;
	padding-top:0.5em;
	margin:0 auto;
}

/*
	LEGEND is unreliable for positioning but are good semantics
	Solution? Use the legend, but position a span. Sucks since
	it's extra code, but reliable and semantically correct.
*/
legend span {
	position:absolute;
	top:-2em;
	left:0;
	width:100%;
	text-align:center;
}

.fieldsetWrapper {
	position:relative; /* so we can position the legend's span */
	padding:0.5em 0;
	margin:2em 0 0.5em;
	white-space:nowrap; /* prevent drop */
	border:solid #000;
	border-width:2px 0;
}

.fieldsetWrapper input {
	width:10em;
	margin-bottom:0.25em;
}

input {
	font:normal 100%/140% verdana,helvetica,sans-serif;
}

label {
	display:inline-block;
	width:5.2em;
}

.submitsAndHiddens a {
	display:block;
	padding-top:0.5em;
}

a {
	color:#000;
	text-decoration:none;
}

a:active,
a:focus,
a:hover {
	color:#F00;
}

Look Ralphy, no floats! :stuck_out_tongue:

You’ll notice it ends up a bit heavy, but that’s the price of semantics… for every byte you save through things like caching models and the increased speed of loading over a table, much less the VALID markup – you have the tradeoff that YES, some things WILL end up larger… and not quite the same.

An example of not the same is the fixed width. That table could size the HR to the width of the content area… Non-table elements cannot do auto-shrinking dynamic width while centered. It just doesn’t happen.

Also, TRY to avoid using PX metric fonts, they are a miserable accessibility /FAIL/ that have no place on such a simple set of elements. You can see I did pretty much everything except the border-widths in EM’s – it’s what the WCAG says to use, so I use them whenever possible. Likewise you should only be stating font sizes that are DIFFERENT – you said 12px on body, on anchor, etc, etc… just say it once, and then only restate it for when they are DIFFERENT.

Some more advice – NEVER trust the default line-height. I’m seeing four different heights in four different browsers, so set that too on the font property. I use 140% because I like a hair more spacing than the default. One should also always set the input font as some browsers inherit that from body, others do not.

Though small pages like this one are NOT where CSS shines. The more stuff that’s on a page that’s getting the same styling over and over again, the more CSS gains an advantage on code size.

But again, much of the increase is because I’m using the semantically correct elements even if they don’t accept CSS quite how we’d like.

Really though the best advice I can give is that you go to:

… and read up on all the HTML tags and WHAT THEY ACTUALLY MEAN. HTML is for saying what things ARE, not how they are going to appear. Anything appearance related, that’s CSS’ job.

Though the HTML 5 folks seem to want to piss all over that :frowning:

Deathshadow,

I feel completely talked down to with your reply. I mentioned at the beginning I haven’t programmed in years, and your reply just seemed to rub it all in my face ( your form was SO incorrect even old-school – you can’t put FORM between <table> and <tr> ).

That is the reason I find it hard to ask anything, knowing people are just going to slam me like I felt you did. I won’t ask anything else here.

Thanks

you can use a table to hold a form for layout, but it is not the preferred way because it is old school. It is a bit annoying for people using screen readers, but if you use <label>s correctly it is ok.

That was certainly not my intent and I’m sorry if you felt that way. I know it can seem a little harsh, but in many ways I wish that someone had taken me aside and been harsh with me some twelve or so years ago when I started out… I could have avoided six or so years of difficult to maintain HTML 3.2 with a tranny doctype on it.

I know it’s a lot to take in, and can feel overwhelming – but trust me you get the basics of it down it’s actually SIMPLER than the old way of doing things because you actually are able to start following the RULES of using HTML, instead of the “slap the tags in there any old way” people practiced in the 90’s – which again, wasn’t even valid/proper THEN but people went ahead and did it anyways… Mostly because browsers are too stupid to throw an error when they encounter one, and instead do their darnedest to display the page contents no matter what; which with no two browsers handling that the same way (why the Acid2 test mattered since it showed not just proper behavior, but error handling behavior too) – net result is that almost all pre-2002ish pages are broken horribly across browsers. It literally became a “and you’re surprised this is broken cross browser WHY?” On the whole the web would be a lot nicer a place if browsers just stopped parsing a page when they hit an error and said “NO!” – though that would break 90% of the internet given how even today a lot of people sleaze out their code any old way and there’s a lot of web rot.

… and never be afraid to ask and don’t take it so personally. The only stupid question is one you already know the answer to.

No, no it isn’t. It is NOT tabular data and as such has NO business being inside a TABLE. That is applying an incorrect semantic meaning to elements that already HAVE a meaning. The same goes for DL/DD/DT abuse on forms, which also does NOT make sense – EVER. Tables can often make more sense in a form when they are tabular rows of related data (like a multi-product order form) than some of the idiocy I’ve seen of late using DL’s.

… and yes, that IS meant to be a slap. See the difference? :smiley:

Oh, and so you know, the smileys means I’m doing a gentle poke to the ribs – it is meant with a bit of humor to it.

:SIGH: Really deathShadow? Really? Read my comment again. I said using a table wasn’t preferred. I could have gone off on a rant as to why you shouldn’t use a table, I only had that conversation at work 4 times this week. Seeing that the OP doesn’t know CSS [well], making a form layout pretty should be held off. It is called baby steps, calm down. That is why I included the bit about labels. Includin labels makes the form accessible and doesn’t make the table so ugly to navigate. Not sure at all why you included the DL bit, since it is irrelavant this thread…

“baby steps” should at least be led down the right path, instead of starting the user off with bad practices and rubbish coding techniques at the start. You don’t just slap the rose-coloured glasses on their head and lead them down the garden path … as that’s how you end up running off the cliff like a lemming.

It’s a common literary devices called a simile. They typically start with the phrase “It’s like” or “the same goes for” and then draws parallels.