16 replies [Last post]
clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

<link href="home_page_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>

Please can someone tell me the correct syntax of defining a class.
I am new to css.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

correct syntax for defining class in html

You're best off checking out some of the css tutorials.

e.g.

www.w3schools.com
www.htmldog.com

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

Chris..S wrote:
You're best off checking out some of the css tutorials.

e.g.

www.w3schools.com
www.htmldog.com

checked wc3 , that is where l got syntx from!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct syntax for defining class in html

it's correct. is that what you wanted? you can use either link, or style, or import within style, or inline style, or a combination of any or all.

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

wolfcry911 wrote:
it's correct. is that what you wanted? you can use either link, or style, or import within style, or inline style, or a combination of any or all.

Yes, but for some reason it is not working, see coding:

<style type="text/css">
p.leftmargin {margin-left: 5cm}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navcontainer">
<ul>
<li> <a href="index.htm">Home</a> </li>
<li> <a href="faq.htm">FAQ's</a> </li>
<li> <a href="links.htm">Links</a> </li>
<li> <a href="feb.html">Calendar</a></li>
<li> <a href="contact.html" id="last">Contact</A>
</ul>
</div>
<div id="content">
<div id="rightcol">
<h1>Introduction</h1>
<p class="leftmargin">This is a paragraph with a specified left margin</p>[img][/img]

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct syntax for defining class in html

what is it doing?

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

wolfcry911 wrote:
what is it doing?

For some reason the text is not being indented.
see screenshot for what l mean.

[/img]

Anonymous
Anonymous's picture
Guru

correct syntax for defining class in html

It works for me. Show a link.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

correct syntax for defining class in html

Show us a link to the site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		p.leftmargin {margin-left: 5cm; background: pink;}
	</style>
</head>

<body>
	<div id="wrapper">
		<div id="header"></div>

<div id="navcontainer">
<ul>
<li> <a href="index.htm">Home</a> </li>
<li> <a href="faq.htm">FAQ's</a> </li>
<li> <a href="links.htm">Links</a> </li>
<li> <a href="feb.html">Calendar</a></li>
<li> <a href="contact.html" id="last">Contact</A>
</ul>
</div>

<div id="content">
<div id="rightcol">
<h1>Introduction</h1>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
</div>
</div>

</body>
</html>

works fine for me.

Verschwindende wrote:
  • CSS doesn't make pies

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

thepineapplehead wrote:
Show us a link to the site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		p.leftmargin {margin-left: 5cm; background: pink;}
	</style>
</head>

<body>
	<div id="wrapper">
		<div id="header"></div>

<div id="navcontainer">
<ul>
<li> <a href="index.htm">Home</a> </li>
<li> <a href="faq.htm">FAQ's</a> </li>
<li> <a href="links.htm">Links</a> </li>
<li> <a href="feb.html">Calendar</a></li>
<li> <a href="contact.html" id="last">Contact</A>
</ul>
</div>

<div id="content">
<div id="rightcol">
<h1>Introduction</h1>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
</div>
</div>

</body>
</html>

works fine for me.

The text is not indenting from the left still though, any ideas?
Can you show me a screenshot of it working please.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

correct syntax for defining class in html

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

correct syntax for defining class in html

Clubamigos, it sounds like there may be other style rules with higher specificity impacting on that part of your html.

Get FF, Web developer. Use CSS / View Style Information and click on the paragraph in question. That'll show you all the style rules that are firing. You can then see if there is another overriding your .leftmargin class.

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

thepineapplehead wrote:

This is the CSs l am currently using:

I think the problem is due to the fact that you pointed in that l have 2 style sheets and it is using the first style sheet.I would like to use the first style sheet but only the p.leftmargin formatting of the second style sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A social club for people to go and have a good time and try new activities</title>
<meta name="keywords" content="social clubs southampton,clubs southampton,single events hampshire,new friends hampshire,new friends southampton,looking new friends,meeting new people,social clubs south coast,looking friendship uk,social clubs UK">
<meta name="description" content="A social club for people to go out enjoy themselves and try new activites">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="home_page_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p.leftmargin {margin-left: 25%}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navcontainer">
<ul>
<li> <a href="index.htm">Home</a> </li>
<li> <a href="faq.htm">FAQ's</a> </li>
<li> <a href="links.htm">Links</a> </li>
<li> <a href="feb.html">Calendar</a></li>
<li> <a href="contact.html" id="last">Contact</A>
</ul>
</div>
<div id="content">
<div id="rightcol">
<h1>Introduction</h1>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
<p><font face="Verdana, Arial, Helvetica, sans-serif">Looking to meet new people and go out and have a good time?</font><br/>
<p><font face="Verdana, Arial, Helvetica, sans-serif">Then why not try Club Amigos?</font><br/>
<p>&nbsp;</p>
<table width="64%" border="0" align="center">
<tr>
<td width="41%"><img src="frontpage_members1.jpg" width="165" height="110" border="0" /></td>
<td width="39%"><img src="frontpage_members2.gif" width="164" height="110" border="0" /></td>
<td width="39%"><img src="frontpage_members3.gif" width="108" height="110" border="0" /></td>
<td width="20%"><img src="frontpage_members4.jpg" border="0" /></td>
</tr>
</table>
<p>&nbsp;</p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">A social club based in Southampton, UK which welcomes anyone from the ages of 20 to 40.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The club was formed in late 2005 and has even numbers of men and women.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The idea of the club came about as a way for people to go out and enjoy themselves.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">We meet every Thursday at Bar Risa in Above Bar Street, Southampton at around 8.30pm.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">See full <a href="map_details.html" TARGET="_self">map details</a></font>.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="footer">Site designed by JJR , Email </div>
</div>
</div>
</body>
</html>

Anonymous
Anonymous's picture
Guru

correct syntax for defining class in html

clubamigos wrote:
This is the CSs l am currently using:
So where's the CSS?

Show. A. Link.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct syntax for defining class in html

please tell me those aren't font tags I see Evil
and nonbreaking spaces used for positioning Evil

the code you just posted works fine here in Safari and Firefox 1.5. What browser are you using?

clubamigos
Offline
Enthusiast
Last seen: 14 years 38 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

correct syntax for defining class in html

wolfcry911 wrote:
please tell me those aren't font tags I see Evil
and nonbreaking spaces used for positioning Evil

the code you just posted works fine here in Safari and Firefox 1.5. What browser are you using?

yes they are!

Whoops!

I managed to resolve this issue by validating my code.

Anonymous
Anonymous's picture
Guru

correct syntax for defining class in html

clubamigos wrote:
I managed to resolve this issue by validating my code.
Will miracles never cease? Surprise, surprise!

We could have told you that a long time ago had you presented a link at the first request.