CSS Colour Query

I am obviously doing something not quite right here.

I am trying to colour a sentence with a shade of red.

If I have in the syle sheet

 h1 {color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
 p2 {color:#cd0000; font-size: 15px;font-weight:bold;} 
 h2 {color:#cd0000; font-size: 15px;text-decoration:underline;font-weight:bold;} 
 p3 {color:#000080; text-decoration:none;}

And this in the HTML <p2>C5D: (Certificates in 5 Days)</p2>

It all works fine.

If on the other hand I use p.2 etc
and <P class=“2”>C5D: (Certificates in 5 Days)</p>

It doesn’t work

What am I doing wrong ?

The stylesheet is www.c5d.co.uk/c5dstyle.css and the web page is www.c5d.co.uk/scotland.php

Thanks

Antony

Hi,

You would have to do this:

.two{color:#cd0000; font-size: 15px;font-weight:bold;}
<p class="two">C5D: (Certificates in 5 Days)</p>

The reason being that a CSS class name may only begin with an underscore (_), a dash (-), or a letter(a–z).
These may be followed by any number of dashes, underscores, letters, or numbers.

Please also note that the following is not valid mark-up and won’t work in older browsers, such as IE7 or IE8:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>This will work in modern browsers, but isn't valid markup</title>
    <style>p2 {color:#cd0000; font-size: 15px;font-weight:bold;} </style>
  </head>
  
  <body>
    <p2>C5D: (Certificates in 5 Days)</p2>
  </body>
</html>

In addition to what Pullo said:

classes in a stylesheet MUST begin with a “.”


 failclass{ color: pink;}
.realclass{ color: pink;}

you wont be able to apply “failclass” to an element as the parser considers it an element ( albeit undefined, and I’ll touch on that in a minute), but “realcass” will apply to any element that has that string n the class attribute <div class=" hey realclass">…</div>.

H1 -H6, of course are Headings… not classes. but P1, p2,etc do not actually exist in HTML. UAs go ahead an create the tags anyway and some even allow the tags to be styled via CSS. This doesnt mean that it is valid markup!!! So no creating tags willy-nilly.

Takeaway:
In a stylesheet:

begins IDs, eg.: #myId, #branding

. begins classes , eg.: .myClass, .clear, .story
not having either will make the parser assume you are targeting a tag, eg.: h1,h2,p,div
you CANNOT start classes, IDs or tag names with numbers !!

Hope that helps

Thanks for the two replies, I shall give them a shot.

In all the web tutorials, I have never seen that the classes can’t begin with a number !

If I knew what UAs were, that bit might help me more

Antony

[font=verdana]Some browsers would still work if you used numbers, although it’s against the spec.

If I knew what UAs were, that bit might help me more

UA = user-agent. That’s just another way of saying “browser or equivalent”, which also encompasses robots (like Googlebot) and accessibility technology.[/font]

This is working fine apart from one thing.

As p.three is a link, the stylesheet colour for links overrides the colour in the p.three element.

How do I make p.three stay blue.

This doesn’t seem to work

p.three:link {color:#000080;}
p.three:visited {color:#000080;}
p.three:hover {color:#ffffff;}
p.three:active {color:#000080;}

With this HTML

<a href=“http://form.jotformeu.com/form/20563312173343” class=“p.three”>Order Censuses</a></p>

The link stays black

Thanks

Antony

Hi,

p.three will only style a <p> element with a class of “.three”
Try:

p.three a:link {color:red;}
<p class="three"><a href="http://form.jotformeu.com/form/20563312173343">Order Censuses</a><p>

instead, which will style all links found with a <p> element with the class of “.three”

I did think that this had worked but what has happened is that all of the links turn blue.

Have I done it wrong ?

body { background: #708090; font color: black; font-weight: bold; font-style: italic; font-size: 15px; font-family: New Century Schoolbook", Times, serif;
}
table,th,td
{
font-weight:bold;
}
h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
p.two {color:#cd0000; font-size: 15px;font-weight:bold;}
h2 {color:#cd0000; font-size: 15px;text-decoration:underline;font-weight:bold;}
p.three {color:#000080; text-decoration:none;a:link {color:#000080}
a {
color: #000000;
text-decoration: none;
}

The web page is at www.c5d.co.uk/homepage.php

Thanks

Antony

A small typo in your CSS.

Change this:

body {background: #708090; font color: black; font-weight: bold; font-style: italic; font-size: 15px; font-family: New Century Schoolbook", Times, serif;}

To this:

body {background: #708090; color: black; font-weight: bold; font-style: italic; font-size: 15px; font-family: "New Century Schoolbook", Times, serif;}

HTH

Thanks.

I have tried that. I copied and pasted your CSS but still all the links are blue and not just the order form which is like this in the html

<a href=“https://secure.jotformeu.com/form/13060046206” class=“p.three”>Secure Order Form</a>

Other links are like this <a href=“http://www.c5d.co.uk/ninthfield.php”>Ninth Field Services</a>

There do seem to have been two other unintended changes effected as well.

  1. The navigation bar has been lost and the drop dow menus are like islands on their own and

  2. the copyright years have disappeared.

In the CSS I have

p.copy:after {
content: " 1999-2012"
}

And the html reads

Apr 1/2 <p class=“copy”>©C5D-Certificates</p>

Thanks

Antony

Hi there,

Can you tell me what you are using to create your site?
I notice that it is in PHP.
Are you hand coding it, or are you using a CMS?

I just ran your site through the W3C Validator, which finds 286 errors in your code.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.c5d.co.uk%2Fhomepage.php&charset=(detect+automatically)&doctype=Inline&group=0

We really need to make sure that the HTML is ok first, then we can sort out the CSS.

So, my question is: what are you using to create your site and how much of it can you change?

Edit: I can help you fix all of this, but it’s no good if you then cannot use my changes because half of the code is being automatically generated.

It is all hand done.

If we can solve the CSS. I can do most of the rest

If you look at www.c5d.co.uk/censusentries.php there are no mark up errors, but the link to sterling payment service remains blue, not black

CSS:

body {background: #708090; font-weight: bold; font-style: italic; font-size: 15px; font-family: "New Century Schoolbook", Times, serif;}

table,th,td
{
font-weight:bold;
}
     h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
     p.two {color:#cd0000; font-size: 15px;font-weight:bold;a:link {color:#cd0000;}}
     h2 {color:#cd0000; font-size: 15px;text-decoration:underline;font-weight:bold;}
     p.three {color:#000080; text-decoration:none; a:link {color:#000080;}


a:hover {
	color: #ffffff;  /* Colour of Links when hovering */
    text-decoration: none;
	}

HTML starts

<!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" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Certificates in 5 Days C5D Census Entries</title>
    <link rel="stylesheet" href="http://www.c5d.co.uk/clubscreen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5dstyle.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5ddropdownmenu.css" type="text/css" media="screen" />
    <link rel='stylesheet' id='easy-fancybox.css-css' href='http://www.c5d.co.uk/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4' type='text/css' media='screen' />
    <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

<div id="wrapper">
    <div id="container" class="container">

<!-- BEGIN menu.php INCLUDE -->
<?php include $_SERVER["DOCUMENT_ROOT"] . "/c5dincludes/c5dmenu.php"; ?>
<!-- END menu.php INCLUDE -->
      <a href="http://form.jotformeu.com/form/20563312173343" class="p.three">Secure Order Form Now Available</a>												   						
<h1>A Personal Service not
just a Certificate Supplier.</h1>
<a href="http://www.c5d.co.uk/sterlingpayments.htm" class="p.two">Sterling Payment Service</a>
<br />

Thanks

Hi,

You have added invalid classnames to those links.


<a href="http://www.c5d.co.uk/sterlingpayments.htm" [B]class="p.two"[/B]>Sterling Payment Service</a>

It should be class=“two”.

and you target it in the css with:

.two{color:#000}

p.two is CSS not html and would look for a class on a p element. It is not valid to have class=“p.two” as already mentioned by the others as certain characters are not allowed.

there are no mark up errors

My browsers tells me there are 36 errors :wink:

As an aside try not to use breaks to space things out and avoid deprecated presentational tags and attributes (eg. <center>). Us paragraphs for text content and where extra space is needed use margins or padding and not another break.

That’s it ! the solution. You have put it so simply and straightforwardly. It is now working,

Thanks very much.

With regards to this

<As an aside try not to use breaks to space things out and avoid deprecated presentational tags and attributes (eg. <center>). Us paragraphs for text content and where extra space is needed use margins or padding and not another break. >

it’s what I am trying to do. The site was originally still in frames !

However, I need to sort two other bits out.

  1. why the css copyright won’t work.

CSS

p.copy:after {
content: " 1999-2012"
}

HTML

Apr 1/2 <p class=“copy”>©C5D-Certificates</p>

And why the navigation bar is showing as transparent or not there at all

Kind regards

Antony

Hi,

You have errors in the CSS which are corrupting the rules and styles are not being applied.

I have highlighted them below so see if you can spot what’s wrong with them.


.two {
	color:#cd0000;
	font-size: 15px;
	font-weight:bold;
[B]a:link {
color:#cd0000;[/B]
}
h2 {
	color:#cd0000;
	font-size: 15px;
	text-decoration:underline;
	font-weight:bold;
}
.three {
	color:#000080;
	text-decoration:none;
[B]a:link {
color:#000080;[/B]
}
.four {
	color:#cd0000;
	font-size: 15px;
	font-weight:bold;
[B]a:link {
color:#cd0000;[/B]
}
a:hover {
	color: #ffffff;  /* Colour of Links when hovering */
	text-decoration: none;
}
/* NAVIGATION MENUS */ 

#pagemenucontainer {  /* controls poition of top right hand boxes */
	height: 36px;
	float: right;
	padding: 0;
	margin-top: 12px;
 #background: #ffffff;
}
#pagemenu, #pagemenu ul { /* controls top right hand boxes */
	padding: 0;
	margin: 0[B];/*[/B]
	[B]Theme Name: Permanent
	Theme URL: http://newwpthemes.com/wordpress-theme/permanent/
	Descriptio[/B]
	list-style: none;
	line-height: 1;
    background-color:#708090;}

#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	background-color: #708090;}
	
#pagemenu li a, #pagemenu li a:link {     /* controls top right hand boxes */
[B] color: #000000 display: block;[/B]
	margin: 0 0 0 6px;
	padding: 8px 16px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
 [B]border: 0px solid -moz-border-radius: 10px;[/B]
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#pagemenu li a:hover, #pagemenu li a:active {
[B] color: #ffffff display: block;[/B]
	margin: 0 0 0 6px;
	padding: 8px 16px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
 [B]border: 0px solid -moz-border-radius: 10px;[/B]
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}


If you can’t spot them then paste the code into the css validator and it will highlight the errors for you. :slight_smile:

I have done that and it tells me there are 18 errors.

It doesn’t tell me though why there are errors.

For example these

2 .two attempt to find a semi-colon before the property name. add it

0 .two Property a doesn’t exist : link

23 .three attempt to find a semi-colon before the property name. add it

0.three Property a doesn’t exist : link

24.four attempt to find a semi-colon before the property name. add it

0 .four Property a doesn’t exist : link

Hi

When you see ths:

22	 p.two	 Property a doesn't exist : link

this should tell you that something is not ok with “p.two”

If we search your CSS file, we find:

p.two {color:#cd0000; font-size: 15px;font-weight:bold;a:link {color:#cd0000;} 

Here, you have not closed the curly brace.
It should be:

p.two {
  color:#cd0000; 
  font-size: 15px;
  font-weight:bold;
}
a:link {color:#cd0000;}

Or something similar, (e.g. p.two a:link{ ... })depending on what you want to achieve.

Thanks for explaining.

I have gone through all of the errors and am left with 4. I’m afraid that I don’t know what to do about these.

if anything because theu relate to a radius that is not available in CSS2 but is in CSS 3.

Also this does not seem to work p.four {color:#000000; font-size: 15px;font-weight:bold;}a:link {color:#000000;}

What I am trying to do is turn the link to black colour This is the HTML which know is in a table

<td><a href=“http://www.c5d.co.uk/parishrecords.php” class=“four”>Click here</a></td> but the same happens if it is not in a table.

You have really helped me loads this evening. Thanks very much, I hope you can just tidy this one uo for me,

Thanks very much

Antony

Well done! That’s a good start.
When I ran your style sheets through the validator I could only find two errors, both caused by this:

http://www.c5d.co.uk/clubscreen.css
Line 58:

table {
  #margin-bottom:1.4em;
  width:100%;
}

You should remove the hash symbol from in front of the margin declaration.

What are you trying to achieve.
Do you just want to output “©C5D-Certificates 1999 - current year”?
You can do this with PHP:

<p class="copy">&copy; C5D-Certificates 1999-<?php echo date("Y"); ?></p>

This has the added bonus that you don’t have to touch this again. PHP will always add the current year for you.

Does that help?

P.S. In future, when you post code examples, could you wrap them in code tags, please? You can do this by clicking “Go Advanced” and selecting the appropriate language from the “syntax” drop down.

The class belongs to the anchor so it would be a.four and not p.four (although you don’t really need the “a” as .four will do just fine).


.four,.four:visited {color:#000}

p.four would assume that the class was on a p element and then to target a nested anchor you would need to say p.four a{styles etc…}

Rather than use vague classnames like .two or .three you should try and create classnames that give some meanng to the css. If you look in a stylesheet and all you see is .four,.five,.six then you won;t hgave a clue to what they refer to.

You should use classes that have some meaning for the context they are being used.

e.g.
.warning{color:red}
.highlight{color:yellow}
.maintitle{color:blue}
.subtitle{color:green}

Don’t be tempted to use things like .red(color:red} becaues if you decide to change the colour at a later date you will have to change the html as well which could be in hundreds of pages.