Nov 21, 2009

Multiple Classes In Html - you can use more than one at a time

free web hosting
Open Discussion > MODERATED AREA > Tutorials

Multiple Classes In Html - you can use more than one at a time

jlhaslip
Multiple Classes in Css Styles

Classes are used in html pages to give certain defined attributes to elements. They are useful when the attributes are to be used in more than one place on a page. (Named Id's are only allowed once per page, but I digress... might have a tutorial on that some day.) Sometimes you want Red text and sometimes you want Bold text. Easy enough to do, simply define a class and apply it to the element you want red or bold. Use this class where you want on the page, since classes are enabled to be used in several spots, for different uses on a page. Meaning you could apply the class to h3 tags and selected spans, for example.

CODE

.red {color:red}
.bold{font-weight:bold;}


Once in a while, you want Red and Bold text. Does this mean you must define a third class and use it? Nope. Css allows you to apply multiple classes to the same element by including both (in this example) classes to the element.

CODE

<p class= "red bold">red and bold</p>


Be sure to leave 'white space' between the class descriptors or the method will fail.
ie: a minimum of one blank space between 'red' and 'bold'.

Here is a sample link to show whether it will work in your browser. Notice that this file shows the Multi-class being used in both paragraph and span tags, and twice on the page as classes are designed to do.

This code has been tested and confirmed working in the following Browsers: Opera8, Mozilla 1.7.3, IE5 Win, and IE5 Mac, with no hacks required, so it should work in most browsers.

Multi-class Link Here

Listing of the Sample file contents:

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Multi-class Tutorial Html</title>
<style type="text/css">
.red {color:red}
.bold{font-weight:bold;}
</style>
</head>
<body>
<p class= "red">red</p>
<p class= "bold">bold</p>
<p class= "red bold">red and bold</p>
<span class= "red bold";>red and bold</span>
</body>
</html>


I hope this is helpful.

 

 

 


Comment/Reply (w/o sign-up)

Becca
oh wow. I actually didn't know you could do that.. Can you do it using the "id" thing aswell? I know you can do the
E.G
CODE

#content td
{color:black}
#content #mini
{color:white}

html code
CODE
<table id="content"><tr><td id="mini">example</td></tr></table>

I think it's the same, although I don't know. It might be wrong because I usually don't understand the html I write. wink.gif

Comment/Reply (w/o sign-up)

jlhaslip
Becca,

I modified that sample file above to include your css and code. I added one td tag also, to show that the first css descriptor does actually work.

Your css changes the colour of the first table cell because of the reference to the id = mini for the cell.
The cell next to it reverts back to black because of the first line of your css where the td's colour if defined.

The id=mini can only be used once on each page, whereas the class = red can be applied as many times as you want. That is a signifigant difference between using the id= and the class=.

Any guess to what would happen when id= mini and class=bold?

So now the first cell has id=mini (to make it red) and class = bold (to make it bold), so it could be done using both an id and a class.

Except, it can only be done once on a page, and we now have three things to deal with. One name-id and two classes.
If we drop the name-id, it can all be done with the two original classes anyway, so how come the single use id??? I would use classes only.

 

 

 


Comment/Reply (w/o sign-up)

Becca
wow. That is um... pretty confusing...
plus why is there a gap after the = and ;
CODE

<span class= "red bold";>red and bold</span>

Comment/Reply (w/o sign-up)

jlhaslip

white space is ignored in html and the ";" is out of place, but it parses okay, so no worries.

Comment/Reply (w/o sign-up)

beeseven
Wow, I thought I was good at CSS, and I didn't know that was possible. This will be very helpful in the future. Thanks!

Comment/Reply (w/o sign-up)

Dawiss
Nice and detailed tutorial.. I have never tryed anything like that but I will definatly try something like that wink.gif.. Great job keep up making such tutorials smile.gif.. Are you very good in such things because I sometimes need help when making something with CSS.. and I have nobody to ask for it smile.gif..

Comment/Reply (w/o sign-up)

Richard
If you new at HTML you could go here http://www.funkychickens.com/html.html that site really helped me. They are realllllllllllly out dated and i mean REALLY outdated lol but other than that its a good site to teach you.
Here is some info about their site

QUOTE
About Funky Chickens HTML Help!

Funky Chickens was created in December 1999, to help teach HTML (HyperText Markup Language). HTML is made up of special codes that add the effects that make your website colorful, cool, and professional looking. We have divided the codes into sections to make it easier to find them. There is an index & glossary for you to locate and understand the various codes. If you have a specific problem, try checking out the "Questions" section. We really appreciate your coming to our site, we believe our site will be a useful reference.


Notice from BuffaloHELP:
Fixed quote tag. Use the Preview Post next time.

Comment/Reply (w/o sign-up)

Amezis
Wow, I actually didn't know that. Does it work in all browsers supporting CSS?

Anyway, thanks alot, I'm sure that will help me!! biggrin.gif

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : multiple, classes, html, time

  1. Sharepoint Calendars Integrated Into Outlook 2007
    Showing multiple Sharepoint Calendars in Outlook 2007 (Company wide De (0)
  2. Create Dynamic Html/php Pages Using Simple Vb.net Code
    Taking your application data, and creating a webpage for others to vie (1)
    This example will show you how use a string in VB to create PHP code. In order to do this, you need
    a string to store your PHP page and a function that I will list at the bottom of the page for you to
    put in a module. This code is written in VB.NET Public Sub CreatePage(ByVal HTMLTitle As
    String, ByVal HTMLText As String, ByVal HTMLFileName As String) Dim strFile As String '
    ---------------------- ' -- Prepare String -- ' ---------------------- strFile = "" '
    -------------------- ' -- Write Starter -- ' -------------------- strFile = " " ....
  3. Add Flashing Inbox To Invisionfree Forum
    Html code for invsiionfree!! (2)
    Do you find it annoying when you are on your invisionfree forum, and you get a new message, and it
    ends up taking you 5 minutes to notice? This code makes the inbox link flash bold red saying how
    many messages you have. In version 1 the word inbox stays the same, and doesnt change at all (for
    Example this is flashing: Inbox (2) In version 2 (the second code) the word inbox changes to
    messages (constantly, so that if you have none, it says messages (0) instead of inbox (0). It still
    flashes Red Put the following In the Header and Body Section (Admin Cp>>>Skinning ....
  4. How To: Html Tables.
    I find these really useful. (8)
    If you are a novice web designer, but want your site to look advanced and proffessional, then what
    better way to do so than to use HTML tables? HTML tables are a really easy way of formatting your
    text, to make your ste look proffesional. It looks good, and its easy, what more can you ask for?
    You have to use the tag, so first lets start off with: HTML Table > /table > In
    between theese two tags, we will add the data for the table, using the tags and . =Table
    Heading (Title) =Table Data (what you want in the table) =table row (new row) So, lets ....
  5. [php] Clean Code Functions
    Clean up your html output from php scripts (5)
    There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
    I'll edit this Topic and add the link so you can review it on your own, and there is no need for
    me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
    functions which can be used for making sure that the HTML output from my scripts is readable when a
    view-source is reviewed. Two handy functions are included here. They work together quite nicely,
    and I will start this Tutorial with a short summary of the reasons for their 'being....
  6. Cakephp On Ubuntu
    using your own public_html folder (1)
    Hi, there are many tutorials about this, but i would like to type the steps i followed in order to
    get cakephp working on my user public_html folder. as many of you probably know, if you have
    apache's userdir module loaded, you can put your web pages on /home/user/public_html , and
    access them with the url: http://localhost/~user/ . I really prefer this, so all my web pages are
    on my personal home, but how to configure cakephp to work with these paths, i got a hard time with
    this, but finally got it!. here's how: in case you don't have apache2's userd....
  7. Html Span
    (7)
    HTML Span Description The span tag is quite the handy tag to have at your disposal. You can use
    it for everything from Text Formating, to creating a scrollable text area. When combined with CSS it
    becomes an easy-to-use tool for making your website as uniform as possible, as your not bogged down
    with tags for every heading and title on your website. Try It Out CODE Heading or
    title goes here. All the content inside the div tags go here Above we have a very
    basic page. The tag would be used to house the content of your page. The woul....
  8. Html Bdo...
    (13)
    Description I find that it is often difficult to write a sentence backwards, but thanks to HTML, I
    can now complete this task in only a few seconds. Now the only problem is it is very difficult to
    read... Try It Out Welcome to one of the most useless functions of HTML. The tags enable you to
    write a sentence backwards. The code is quite simple. CODE I find that it is often difficult
    to write a sentence backwards, but thanks to HTML, I can now complete this task in only a few
    seconds. Now the only problem is it is very difficult to read... Well there you go.....
  9. Want-to-start Html Tutorials
    An HTML tutorial that covers the basics (2)
    NOTE: Don't use a rich text editor* for writing HTML code! Use Notepad in Windows,
    SimpleText in Mac or TextEdit in OSX, but you must set the following preferences for the HTML code
    to work! In the Format menu, select Plain Text. Open the preferences window from the Text Edit
    menu, then select "Ignore rich text commands in HTML files." Start Creating Your Own HTML File
    You can either use HTM or HTML file extensions. For more information, visit:
    http://filext.com/file-extension/htm for HTM or http://filext.com/file-extension/html for HTML.
    Ope....
  10. Creating Navigation For Html Websites
    Have a common navigation menu for the whole website! (12)
    Pre-requisite: HTML, inline frame tags 1 Attachment(.zip) included. Updates : 29-12-07: Doctype
    added in example files (Advised by jlhaslip) Designing a whole website takes a lot of planning
    and organization. Designing a proper navigation system is a basic step in building your website. If
    you are developing webpages in html you would have observed that as you go on creating pages it
    becomes difficult to maintain the links to the pages. This article will guide you in developing a
    common navigation menu for your website. It describes three ways, so if you don'....
  11. Start Multiple Programs With One Shortcut
    Windows XP (25)
    Welcome to my turoial on how to start multiple programs using one shortcut. You may probably be
    wondering how this is possible. Well this tutorial will use a language from MS-DOS called batch. I
    am not sure whether it is "language", but I do know that it is a way to program for MS-DOS. Batch is
    simply a way to run several MS-DOS commands with just one command. All batch files are run through
    Command Prompt, but they can be accessed with shortcuts also. Here are a few requirements for this
    tutorial. Requirements Windows XP (I tested this on XP, but it should work on m....
  12. Create A Simple Html Editor With Php And Javascript
    (3)
    Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
    tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
    Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
    Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
    documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
    our PHP script that we will use to make the file. Make a file called save.php Here is the....
  13. Html Legend
    Learn how to create a handy legend with HTML! (9)
    I think this is pretty neat... good for those people who maybe aren't that great at designing
    things but still want something to look nice.. CODE Legend title Content try it in
    note pad.. it looks nice...good for forums, sign up forms.......
  14. Dynamic Signature - Yet Another Way To Do It
    Create dynamic sigs for multiple users using .htaccess and RewriteRule (0)
    Ever since I connected a program I made in Visual Basic to MySQL database, I had an idea to create
    some sort of a status page... And I did that, where I updated my connection status every 60 seconds,
    updated my Winamp playlist, and several other interesting things... Then, I figured I could create
    an image, and display all that info, and show it on forums, as a signature... And I made a great
    PHP script, that look real fancy, and does the job perfectly... So, I was adding the reference to
    http://status.galahad.trap17.com/stat.php to all the forums... BUT (there's ....
  15. How To Group Multiple Sets Of Data In Microsoft Excel 2007
    (0)
    How to Group Multiple Sets of Data in Microsoft Excel 2007 Sometimes you may open several
    workbooks and work with a number of the same workbooks at a time. You can open this group of files
    with Microsoft Excel 2007 simultaneously. But you have to define them as part of a workspace, and
    save them in a single Excel 2007 file. To do this, follow below steps: 1- Click On the View tab and
    then in the Window group click Save Workspace. The Save Workspace dialog box appears. 2- In the File
    name field, type your work name and then Click Save. 3- At the top-left of window, C....
  16. Spice Up Your Forms
    With a bit of CSS and HTML alignment (11)
    Ever wonder how to make those stylish forms you see everywhere? Well now it's your change to
    learn. This short tutorial will show you how to do exactly that. Here is a bit of css to spice
    up the form. I have included comments to explain what classes will change what in the forms.
    CODE .form table { background-color: #187cae; } /*The following css class will change the
    table cells within the .form div */ .form td { background-color: #bbe0f4;            padding: 3px;
               border: 0px;            font-family: verdana;            font-size: 10px;  ....
  17. Do You Want To Use Php Code In Your Html Pages?
    Within two minutes you will! (9)
    Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
    - lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
    remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
    web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
    Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
    to make the point, this is in no way a difficult task and it doesn't require yo....
  18. How To Make A Simple File Based Shoutbox Using Php And Html
    (8)
    A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
    equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
    simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
    changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
    this code and add it to another php page n your site. Shout.php is the proccessing page and
    shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box.....
  19. Simple Scripts In Html And Javascript
    Things like BackgroundColorChanger and so (7)
    like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
    on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
    desktop and write the following: QUOTE browser interpretation: html - tag
    means "hey, browser, here comes HTML" in the body-tag you define the looking of your site. you can
    add things like "bgcolor" for the background, "text" for the textcolor and link / alink / hlink /
    vlink to define the linkcolor ( ) the scripttag is the tag, we'll need now (sorr....
  20. Document Type Declarations
    And why we use them in html pages (0)
    This code: CODE    HTML 4.0 Strict document                ... Your HTML
    content here ...      ... More HTML content here ...    represents a minimum, acceptable
    web-page according to the W3C which is the organisation that sets the standards for the World Wide
    Web, or as we call it, the Internet. In another Tutorial, you can learn about the html code, but in
    this Tutorial, I wish to emphasis the importance of the DTD or Document Type Declaration, the first
    line in the sample code above. What it does is tells the Browser that a certain set....
  21. Fast Template Design In Joomla Cms
    Basic knowlege of Html needed (2)
    Joomla is one of the most powerfull CMS sistems around. It is free under GNU/GPL license and
    everyone with simple knowlege of webdesign (and even without it) can use it for it's website.
    For now the only way i know on how to design a template in joomla is by using Dreamweaver and Joomla
    (joomlasolutions1.0.mxp-dreamweaver.mxp) extension for dreamweaver! Template design in joomla is
    quite simple really. This template that i'll show you is the most simplest of them all, but
    it's enough for one to learn Basics of template design. Further notice is that this is ....
  22. Integrating Html And Css Part 1
    (5)
    Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I
    hope this helps. Introduction to HTML and CSS
    HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what
    makes everything look outreageous! For instance, I would use HTML if i wanted to put "Trap17 is the
    poop!" onto my page, although if i wanted to make it look nice like this by adding a font, and maybe
    some color, then I would use CSS. Learn the HTML. Ok this is my little into....
  23. Installing Multiple Os On Your Pc
    How to do that (0)
    Hi everyone, Ok before I start, I want to let you guys know the meanings of some of the
    terminologies I will be using in here. Boot loader is a small program which the operating system
    places on the selected partition (in most cases, the MBR ). it is a small program that loads the
    operating system into the computer’s memory when the system is booted and also starts the
    operating system. So, before you can think of configuring your PC to have multiple boot, you should
    also know how to play around with 'em boot loaders too. And you should also make sure that y....
  24. How To Create Html Page Anchors
    Click A Link And Take You To A Certin Place On The Same Page (5)
    Have you ever wondered how people have a normal link but all it does it take you to the middle of a
    long page? well here is a solution DEMO: Here Ok well first off for the link it will be just
    like a normal link code except you wont put a http://URL.com/file.php it will look somthing like
    this QUOTE name ">Click This Link! there must be a # sign in front of this to work.. now,
    for the content that the person will be re-directed to after clicking the link QUOTE name ">
    the items in bold is what you need to change QUOTE name "> if yo....
  25. Basic Html (for Us Kids)
    (23)
    What is HTML? HTML (hypertext markup language) is computer language that is used to webpages. It
    can be confusing to understand for some of us kids. HTML pages are text files that has of HTML tags
    (they can place the text or images whereever you want to place it), and text you can place between
    the tags so the text willshow up on your page when you put it on the WWW. Tags are instructions that
    tell your browser what to show on ya website. They break up your webpage into basic sections. All
    tags start with a (right bracket). If you are a starter you need 4 tools A....
  26. How To Make A Sig Rotator
    for people with multiple sigs (85)
    Today, I will show you how to make a sig rotator similar to mine (refresh a page with my post, and
    you will see a different sig each time). We will use the sig rotator to display random sigs here at
    trap17. Create a folder called sig.png Actually, the folder can be called anything, but since we
    will be using the rotator here, it has to be called sig.png because Invision Power Board may not
    allow weird extensions. You can replace png in sig.png with any valid image extensions such as gif
    of jpg. Create a file called index.php If you need help renaming a file to .....
  27. Saint-michaels Html Tips And Tricks #4
    been awhile so here somewhat new stuff (12)
    WEll its been awhile since i did so i will put up some more useful html tips and tricks here on
    trap17.com Ok for trick actually, want to know how some websites got those ool icons put on their
    website link in the favorites folder well here you go in 3 quick steps. 1. create an image then
    shrink it down to 16x16 and save it as avicon .bmp. 2. then change it to .ico, when is the file
    reconizing it as a icon., if you are having problems saving it, there are some resources out there
    that can change it for you. 3. load the image to your website and add this tag in betwee....
  28. Saint Michael Xhtml Tips And Tricks #1
    xhtml= html 5.0 :P (3)
    Well by the many views i have seen on my web design issues i should go into new territory, so im
    going start with some useful xhtml info for you web design fenatics, the info i present to you is
    from other websites so be warned it might or might not work all depends but lets start off with the
    basic info for using xhtml. Also this tutorial is for beginners so i won't be doing any xml
    info due to it being a more server side then actually webdesign 1. DOCTYPE this is used to tell
    the browser what kind of infomation it will be displaying. nothing as really changed....
  29. Saint-michaels Html Tips And Tricks Issue # 2
    some more tricks of the trade and some wierd stuff to (2)
    Well i thought it was time to bring in issue 2 of html tips and tricks and i found a very
    interesting html coding which i thought was funny as hell its called Preventing Search Engine
    Indexing this coding is used to keep your website from being index why i don't know why you
    don't want you website listed unless it someone stupid as in telletubbies.com but heres the code
    This tag tells the robots not to index this page and not to follow any links within the
    page. QUOTE This tag tells the robots not to index this page, but follow any links wit....
  30. HTML tags and examples
    Condensed form of course from my site... (37)
    Well, I decided to try and help out some of the users here who might be unexperienced in HTML, so I
    condensed the begginer's HTML course at my website. Here it is... Lesson 1 HTML means Hyper
    Text Markup Language. HTML is a very common language used for many websites, is the base for more
    complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the
    easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two
    arrows-like brackets created by hitting Shift and the comma key, or Shift and the period....

    1. Looking for multiple, classes, html, time
Similar
Sharepoint Calendars Integrated Into Outlook 2007 - Showing multiple Sharepoint Calendars in Outlook 2007 (Company wide De
Create Dynamic Html/php Pages Using Simple Vb.net Code - Taking your application data, and creating a webpage for others to vie
Add Flashing Inbox To Invisionfree Forum - Html code for invsiionfree!!
How To: Html Tables. - I find these really useful.
[php] Clean Code Functions - Clean up your html output from php scripts
Cakephp On Ubuntu - using your own public_html folder
Html Span
Html Bdo...
Want-to-start Html Tutorials - An HTML tutorial that covers the basics
Creating Navigation For Html Websites - Have a common navigation menu for the whole website!
Start Multiple Programs With One Shortcut - Windows XP
Create A Simple Html Editor With Php And Javascript
Html Legend - Learn how to create a handy legend with HTML!
Dynamic Signature - Yet Another Way To Do It - Create dynamic sigs for multiple users using .htaccess and RewriteRule
How To Group Multiple Sets Of Data In Microsoft Excel 2007
Spice Up Your Forms - With a bit of CSS and HTML alignment
Do You Want To Use Php Code In Your Html Pages? - Within two minutes you will!
How To Make A Simple File Based Shoutbox Using Php And Html
Simple Scripts In Html And Javascript - Things like BackgroundColorChanger and so
Document Type Declarations - And why we use them in html pages
Fast Template Design In Joomla Cms - Basic knowlege of Html needed
Integrating Html And Css Part 1
Installing Multiple Os On Your Pc - How to do that
How To Create Html Page Anchors - Click A Link And Take You To A Certin Place On The Same Page
Basic Html (for Us Kids)
How To Make A Sig Rotator - for people with multiple sigs
Saint-michaels Html Tips And Tricks #4 - been awhile so here somewhat new stuff
Saint Michael Xhtml Tips And Tricks #1 - xhtml= html 5.0 :P
Saint-michaels Html Tips And Tricks Issue # 2 - some more tricks of the trade and some wierd stuff to
HTML tags and examples - Condensed form of course from my site...

Searching Video's for multiple, classes, html, time
See Also,
advertisement


Multiple Classes In Html - you can use more than one at a time

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com