Solved

What's good CSS etiquette?

Posted on 2006-11-05
17
522 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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
 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 34
How to change the link of an image using md5 in php ? 3 47
alert(innerHTML); 8 32
Diminish Pop-up  in 3 seconds 7 45
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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