SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 45
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Last edited by certificates; Dec 4, 2012 at 09:46. Reason: error in typing

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    You would have to do this:

    Code CSS:
    .two{color:#cd0000; font-size: 15px;font-weight:bold;}
    HTML Code:
    <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:
    HTML Code:
    <!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>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    In addition to what Pullo said:


    classes in a stylesheet MUST begin with a "."

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

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by certificates View Post
    In all the web tutorials, I have never seen that the classes can't begin with a number !
    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.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

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

    Code CSS:
    p.three a:link {color:red;}
    Code HTML4Strict:
    <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"

  8. #8
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    A small typo in your CSS.

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

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

    HTH

  10. #10
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">&copy;C5D-Certificates</p>

    Thanks

    Antony

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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=ht...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.

  12. #12
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code 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

    Code HTML4Strict:
    <!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
    Last edited by TechnoBear; Dec 5, 2012 at 11:02. Reason: Code tags added

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You have added invalid classnames to those links.

    Code:
    <a href="http://www.c5d.co.uk/sterlingpayments.htm" class="p.two">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

    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.

  14. #14
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">&copy;C5D-Certificates</p>


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

    Kind regards

    Antony

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    .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;
    }
    .three {
    	color:#000080;
    	text-decoration:none;
    a:link {
    color:#000080;
    }
    .four {
    	color:#cd0000;
    	font-size: 15px;
    	font-weight:bold;
    a:link {
    color:#cd0000;
    }
    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;/*
    	Theme Name: Permanent
    	Theme URL: http://newwpthemes.com/wordpress-theme/permanent/
    	Descriptio
    	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 */
     color: #000000 display: block;
    	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;
     border: 0px solid -moz-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    }
    #pagemenu li a:hover, #pagemenu li a:active {
     color: #ffffff display: block;
    	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;
     border: 0px solid -moz-border-radius: 10px;
    	-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.

  16. #16
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi

    When you see ths:
    Code CSS:
    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:

    Code CSS:
    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:

    Code CSS:
    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.

  18. #18
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by certificates View Post
    I have gone through all of the errors and am left with 5.
    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:
    Code CSS:
    table {
      #margin-bottom:1.4em;
      width:100%;
    }
    You should remove the hash symbol from in front of the margin declaration.

    Quote Originally Posted by certificates View Post
    The most improtant one to me is that this doesn't work
    Code CSS:
    p.copy:after { 
    content: "1999-2012" 
    }
    with this html <p class="copy">C5D-Certificates</p>
    What are you trying to achieve.
    Do you just want to output "C5D-Certificates 1999 - current year"?
    You can do this with PHP:

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

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by certificates View Post
    .

    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.
    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).
    Code:
    .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.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by certificates View Post
    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.
    These rules target a <p> element with the class of "four" and don't have anything to do with styling the link.

    Code CSS:
    p.four {color:#000000; font-size: 15px;font-weight:bold;}
    The following rule will hit any <a> tag that doesn't have more specific styling applied to it.

    Code CSS:
    a:link {color:#000000;}
    You only really need to do this once in your style sheet.

    The way to style your link is like this

    Code CSS:
    a.four:link{color:#000000;}

    Edit: Paul seems to have beaten me to it!

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,
    Edit: Paul seems to have beaten me to it!
    Sorry I saw you answered and thought you had just missed that last one

  23. #23
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So are you both saying that I need a seperate line in the CSS because I thought that I had already done what you are sugeesting

    p.four {color:#000000; font-size: 15px;font-weight:bold;}a:link {color:#000000;} my highlighting for this forum ?

    Should the stylesheet be like this ?

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

    because that doesn't work

    I just can't grasp this

    Antony

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by certificates View Post
    I just can't grasp this
    No problem. Maybe if we take a step back and look at some of the underlying principles, that will help.

    Imagine this:
    <p>Some interesting content</p>
    If you want to change the style of this, you would do p{color:red};
    This will target every p element in the whole document.

    Now suppose we have three <p> elements and you just want to target the middle one. To do that you give it a class:

    HTML Code:
    <p>Some interesting content</p>
    <p class="special">Some more interesting content</p>
    <p>Some even more interesting content</p>
    p{color:red;} will change them all red
    Then you would do .special{color:yellow;}
    That will get the one in the middle with the class applied to it.

    Now imagine this:

    HTML Code:
    <p>Some interesting content</p>
    <p class="special">Some more interesting content</p>
    <p>Some even more interesting content</p>
    <div class="special">Nothing special here</div>
    If you use .special{color:yellow;} you will target the text in both the <div> and the <p>
    If that's not what you want to do, then you can get even more specific:

    Code CSS:
    p{color:red;}
    p.special{color:yellow;}
    div.special{color:green;}
    Now imagine you have this:

    HTML Code:
    <p><a href="#">A link</a> Some interesting content</p>
    <p class="special">Some more interesting content</p>
    <p>Some even more interesting content</p>
    <div class="special">Nothing special here</div>
    What colour do you think the link will be?
    That's right, blue. It will inherit the default link colour, as there is currently no rule saying otherwise.

    If we want to style it, we could of course go: a{color:gray} and that would hit all a tags in the document. Job done!

    Now imagine this:

    HTML Code:
    <p><a href="#">A link</a> Some interesting content</p>
    <p class="special">Some more interesting content</p>
    <p>Some even more interesting content</p>
    <div class="special">Nothing special here</div>
    <a href="#">Another link</a>
    If we want to target only the link in the p tag, we could do p a{color:yellow};

    Last example:

    HTML Code:
    <p><a href="#">A link</a>Some interesting content</p>
    <p class="special"><a href="#">Link three</a>Some more interesting content</p>
    <p>Some even more interesting content</p>
    <div class="special">Nothing special here</div>
    <a href="#">Another link</a>
    How can we target only the link in the <p> tag with the class of "special"?
    p.special a{color: cyan}

    Hopefully you get the idea of drilling down to become more specific.

    Here's the whole example:

    HTML Code:
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
        <style>
          p{color:red;}
          p.special{color:yellow;}
          div.special{color:green;}
          a{color:gray}
          p.special a{color:cyan}
        </style>
      </head>
      
      <body>
        <p><a href="#">A link</a> Some interesting content</p>
        <p class="special"><a href="#">Link three</a> Some more interesting content</p>
        <p>Some even more interesting content</p>
        <div class="special">Nothing special here</div>
        <a href="#">Another link</a>
      </body>
    </html>
    So, to answer your question, this is a commented version of your style sheet.

    Code CSS:
    /* Targets all h1 tags */
    h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
     
    /* Targets all h2 tags */
    h2 {color:#cd0000; font-size: 15px; text-decoration:underline;font-weight:bold;}
     
    /* Targets all p tags with a class of two */
    p.two {color:#cd0000; font-size: 15px;font-weight:bold;}
     
    /* Targets all unvisited anchor tags (as above) */
    a:link {color:#cd0000;} 
     
    /* Targets all p tags with a class of three */
    p.three {color:#000080; text-decoration:none;} 
     
    /* Targets all unvisited anchor tags (overwrites the previous rule) */
    a:link {color:#000080;}
     
    /* Targets all p tags with a class of four*/
    p.four {color:#000000; font-size: 15px;font-weight:bold;} 
     
    /* Targets all unvisited anchor tags with a class of four */
    a.four:link{color:#000000;}

    If all of this doesn't help you solve your problem, please just post a link to the page in question.
    Tell me what you would like and how it is not working.

    I'm sure we'll get to the bottom of this soon!

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Pullo has given a great explanation above which should put you on the right track.

    I will make one observation though and it seems to me that you are thinking that this is one rule:
    Code:
    p.four {color:#000000; font-size: 15px;font-weight:bold;}a:link {color:#000000;}
    It's not. Its two separate rules and just because you put it on one line it makes no difference as it is still just this:

    Code:
    p.four {color:#000000; font-size: 15px;font-weight:bold;}
    
    a:link {color:#000000;}
    To target a descendant of the p element you would use:

    Code:
    p.four a:link {color:#000000; font-size: 15px;font-weight:bold;}
    Which would assume html like so:

    Code:
    <p class="four"><a href="#">Linky</a></p>
    But don't forget about the :visited rule as a:link only defines links that are not visited. You could just use p.four a{styles etc..} as that will style all states of the a element unless you have previously defined specific link and visited states in which case you would need to say.

    Code:
    p.four a:link,p.four a:visited {color:#000000; font-size: 15px;font-weight:bold;}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •