Solved

What's good CSS etiquette?

Posted on 2006-11-05
17
518 Views
Last Modified: 2008-03-17
Hi,

I presume h1, h2... define different types headings.  Am I right?  If not, what does the "h" stand for?

I need to know what initials I should use in my style CSS file for simple text fonts.  I presume it's up to me, like t1, t2...
for example. But what is customary?  I'd like to ask first versus tripping myself up later.


Thanks,
Bob
0
Comment
Question by:ba272
  • 5
  • 4
  • 4
  • +1
17 Comments
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 200 total points
ID: 17878941
It sounds like you're mixing up HTML tags with classes you can apply to tags.

<h1> and <h2> (et cetera) are indeed heading tags, and should only ever be used to display headings in your document.

There is no such thing as a <t1> tag in HTML, though; it doesn't exist.  You're basically trying to invent your own description for some OTHER type of tag.  That's what a class is for:

<p class="t1">Blah</p>

In this case the "class" can be anything you want -- something that describes the CONTENT, though, not how you want it to look.  "Bold" is a really dumb class name, 'cause then later if you decide you don't want that paragraph to look bold it's gonna confuse the heck out of you and everybody else.

<p class="introduction">Here is some introductory text</p>

... makes more sense.


In fact, a longer, descriptive name, is always preferable to a short name like "t1".  I've seen plenty of CSS documents with selectors like

p#hhg76e.xyz8 { ... }  

I quickly develop a really strong impulse to whack that designer in the head with a blunt object.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17878947
You should check out http://www.w3schools.com/tags/default.asp for a list of all valid HTML and XHTML tags.  Don't use anything marked "deprecated," obviously, but everything else is fair game.
0
 

Author Comment

by:ba272
ID: 17878978
okay.  so the tags <h1>, <h2> are headers. What if I want to just define customer text fonts in the CSS file?

I'm just learning now about the concept of a "class" in your reply.  Sounds interesting...as a C++ and C# developer, could be fun.

What can I do with a class?

Meanwhile, how do I define a text font in the CSS file?
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17878994
If you want the entire document to use the same font (or, at least, as a default) then apply that font to the body itself:

body {
    font-family: Arial, Helvetica, sans-serif;
}

If you then want <h1> tags to look different you might add:
h1 {
    font-family: Times New Roman;
    font-size: 2em; /* 2 means twice the height of other fonts on your page */
    margin-top: 1em; /* leave a blank line above the heading */
}


I'd suggest searching for "CSS tutorial"  The top result is http://www.w3schools.com/css/default.asp which comes from a pretty good site (the same one I cited earlier), but there are hundreds out there covering the topic.

If you'd prefer something in print, I'd recommend Eric Meyer on CSS, which has a companion website here: http://www.ericmeyeroncss.com/ (though I've never actually looked at that, come to think of it).
0
 
LVL 17

Assisted Solution

by:BogoJoker
BogoJoker earned 100 total points
ID: 17878998
Votey has given you a great answer.  I want to expand on it with a little example.

CSS properties apply to existing HTML (and XHTML) tags.  The basic CSS properties can be attributed to ANY html tag simply by writing the tag name and the styles to be applied to it in curly braces.  If you wanted to make the text of all <p> paragraph tags a red color you would use this css:
p { color: red; }

To extend the usability of CSS you may apply CSS properties only to certain portions of your page.  If you wanted a certain paragraph to be red or blue you would provide a class for each paragraph: <p class="red"> and <p class="blue">.  Then write the CSS accordingly:
p.red { color: red; } /* notice the . after the p, that signifies that this applies to a <p> tag with class="red" */
p.blue { color: blue; }

Lastly there is the id.  XHTML specifies that no id should be repeated in a page.  So id's are common for sections of the page that are expected to appear once and only once (example: menu, header, footer).  Lets say you had a <div> that you wanted centered at the top of the page.  You want only div to have special styles, give that div an id: <div id="header"> and code the CSS accordingly:
div#header { margin: 0 auto; text-align: center; } /* this time the # means look for a <div> with id="header" */


Those are the 3 rules.  They can be generalized even further but I hope this example helped you out a little.  I really need to brush up on my terminology and I apologize if I used some of it incorrectly.  I know I probably should have used the word "selector" somewhere like Votey mentioned.

Feel free to ask if you need clarification on anything.  Also you might want to post in the CSS topic area.

Joe P
0
 

Author Comment

by:ba272
ID: 17879036
Bogo, Thanks for the tips.  Didn't know there was a CSS TA.

Votey, I see in the w3schools tags area that <h1> to <h6> are headings.  What are the non-heading correct tags for test formats?

I wrongly guessed <t1> to <t6>, but can't find them.  Am I looking at this the wrong way?
Bob
0
 
LVL 11

Assisted Solution

by:ethoths
ethoths earned 200 total points
ID: 17880306
There is no standard for defing your own text tag in the way that you can headings. What I tend to do is create classes that reflect the context of the text such as heading, headed etc... Then I use this in the approproate places like this...

<style type="text/css">
.heading
{
    font-weight:bold;
    font-size:12px;
}

.headed
{
    font-weight:normal;
    font-size:12px;
}
</style>

<p class="heading">
    This is the heading
</p>
<p class="headed">
    And here is some text under a heading
</p>



That's it realy - it's uop to you what you call them and there are no established rules or 'best practices' as far as I'm aware.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17880388
That's not quite true; there are a ton of tags used for marking up chunks of text.  Any time there's a tag that fits your purpose, definitely use the tag instead of your own class.  The most basic, of course, is <p> for paragraph -- any block of text that's kinda paragraph-like should use that.

Looking through that list you'll see tags for marking up <abbr> (abbreviations), <em> (putting emphasis on text), <q> for defining short quotations, <blockquote> for longer quotations, et cetera.

ALL HTML tags are designed for marking up text, really.  Some are more sopisticated than others -- <table>, <td>, <th>, <tr>, <col>, <tbody>, and <thead> are all involved in buildnig tables on a page, for example -- but that's still just one more way of organizing text on the page.


The set of tags defined, however, certainly doesn't cover every possible use of text on a page you can imagine.  That's where classes show up.  I suggested before, for example, if you wanted the introductory paragraph to look different, and noticed there's no <introduction> tag in HTML, you might conclude that the closest real tag to what you want is <p> and mark it up as <p class="paragraph">


Inventing a new class for "heading", as ethoths suggested, is strongly discouraged, when there are genuine HTML tags to cover those meanings.  It's always better to use the real tags when you can.

Of course, that's not to say I haven't forgotten a really useful but obscure tag from time to time.  (-:
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 11

Expert Comment

by:ethoths
ID: 17880694
VoteyDisciple answer is technically correct but in practice I find that I rarely want all my <p>'s and <a>'s the same. I might want them the same as each other though and this is where classes allow you to factor out the commonality and prevent you from having to repeat styles over and over.  VoteyDisciple is right that my heading was a bad example as there are already suitable <h> tag for this purpose and I apologise for that.  A more relaistic example might be where the headed paragraph has a reduced top margin so that it fits sungly up against the heading. You would not want this behaviour for subsequent paragraphs (and yes I know about psuedo classes but thay don't work well in many of the browsers commonly in use).

The reality of it is that good CSS design is about a balance of html tags and classes. Hopefully now that 2.1 is being adopted by the major browsers, we wil start to see some 'best practices' emerging. In the meantime find a scheme that you're happy with and be consistent. It's all about ease of maintenance and the best aide to that is consistency.
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 17883445
I sadly did not see anyone mention the <span>.
<span> adds no formatting itself
unlike a <p> which has "display: block" and therefore a line break before and after it.

So if you have a sentance like so:
<p>This sentance is blue, except for <span class="red">me</span></p>

You could style that like so:
p { color: blue; }
span.red { color: red; }

Notice you can go directly to that span because you gave that span a class.
For more general sections use a <div> instead of a <span>.

Some other tags are: <strong> and <b> which you can customize to your liking if you use them often they are a little nicer then <span class="...">

Joe P
0
 
LVL 11

Expert Comment

by:ethoths
ID: 17884706
<span> is a good idea but its an in-line box rather than a block mode box. This makes it ideal for small bits of mark-up but is not really a suitable replacement for <p> if what you want is a <p> (you'll need to use both). <strong> and <b> are ok but you are effectivley embedding formatting code within your markup and that's top be avoided - however, thay may be better for some accessibility reasons.

Like I said, there are not established 'best practices' (jkust leave this thread open and see how many different opinions you get) so choose a style and be cosnistent.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17884768
What emerged early on in use of CSS was a lot of overuse of <div> and <span> when other elements might suffice.  My biggest pet peeve is seeing site menus marked up this way:
<div class="menu">
    <div class="menu-item">Item 1</div>
    <div class="menu-item">Item 2</div>
    <div class="menu-item">Item 3</div>
</div>

What difference can there possiblly be between that and...
<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

There's no difference at all.  Sure, it LOOKS different, but that's the whole point of CSS: make it look however you want.  Still, start from the structure that best describes the CONTENT you have, and then apply styles on top of that.


ethoths has the right basic point: you can get a ton of opinions on what's best.  Some things are just plain right, some things are just plain wrong, and there's a whole vast, vast territory in between where you'll either get conflicting opinions, or everyone will look and say, "Sure, not how I would've done it, but it looks fine."
0
 

Author Comment

by:ba272
ID: 17886903
sorry ethos.  you were suposed to get points.  my bad.
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 17886915
You can ask to redistribute the points.  Post in the Community Support  Topic Area.
http://www.experts-exchange.com/Community_Support/

Posting there is free.  Be sure to point them to this question here:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_22049955.html

And tell them you want to redistribute the points, they can read the last few comments!

Joe P
0
 

Author Comment

by:ba272
ID: 17886931
Joe,

Sorry.  I don't get it.

I don't see where at this link to go.

http://www.experts-exchange.com/Community_Support/
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 17886947
Oh, that is a topic area, ask a question just like you asked this question here.

Go to "Page Options"
And Click "Ask A Question"

Title it something like: "Redistribute Points"
And in the body make sure to point back to here.

Joe P

0
 
LVL 11

Expert Comment

by:ethoths
ID: 17887799
Thanks for helping bs272 out Joe P. I'm new here and I do appreciate the points.

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now