Skip navigation
Currently Being Moderated

Can someone please explain HTML tags and CSS styles and how to use them with External Stylesheets?

Aug 6, 2012 4:59 AM

I've never used an external style sheet before and I know I need to learn, so trying it now. I've linked my page etc, but I don't understand why the html tags aren't working... can I only put CSS styles in there? Can someone just explain the best practices here? Many thanks indeed.

 
Replies
  • Currently Being Moderated
    Aug 6, 2012 5:18 AM   in reply to Suzie8484

    CSS can be used in three ways:

     

    1.  Inline

    2.  Embedded

    3.  Linked as an external stylesheet

     

    An example of inline styling would be - <p style="color:red;">This text is red</p>.  It is the least desirable method of the three since it has embedded presentational information within your content (which is counter to the mantra currently important in web development to separate presentation from content).  This example would result in ONLY that one paragraph's content being styled red.

     

    An example of embedded styling would be -

     

    <!doctype html>

    <html>

    <head>

    <title>Embedded Styling</title>

    <style type="text-css">

    p { color:red; }

    </style>

    </head>

    <body>

    <p>This text is red</p>

    <p>So is this</p>

    </body>

    </html>

     

    This usage is very common. It's a better approach than inline styling since the presentational information is now separate from the content, but it's still not ideal since this style information can only affect this document and no others in your site.

     

    An example of an externally linked stylesheet would be -

     

    <!doctype html>

    <html>

    <head>

    <title>External Styling</title>

    <link rel="stylesheet" href="path_to_CSS_file.css" type="text/css">

    </head>

    <body>

    <p>This text is red</p>

    <p>So is this</p>

    </body>

    </html>

     

    The externally linked CSS file would be this (it can contain any number of CSS rules, but must not contain any HTML) -

     

    p { color:red; }

     

    It's ideal since any page in your site can then link to the file and immediately get the styling benefit of all of the CSS rules within that file.

     

    Does that help?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 5:30 AM   in reply to Suzie8484

    <h1> is an html heading tag. It doesnt go in the external css stylesheet, that contains css NOT html.

     

    The css is used to position/style html elements.

     

     

    As an example you would have the following in your stylesheet

     

    h1 {

    color: red;

    margin: 0;

    padding: 20px 0 0 20px;

    }

     

    and the following in your html:

     

    <h1>This is a heading</h1>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 5:56 AM   in reply to Suzie8484

    You need a period '.' infront of class names

     

     

    .small {

        font-family: "Times New Roman", Times, serif;

        font-size: 10px;

        font-style: italic;

        color: #000;

    }

     

     

    But rather than keep applying the class name over and over again in your html, which can become bloated you could give the table an id like:

     

     

    <table id="myTable" width="1142" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td width="82">Home</td>

        <td width="123">How it works</td>

        <td width="119">About us</td>

        <td width="136">Testimonials</td>

        <td width="165">Contact us</td>

        <td width="354"> </td>

        <td width="163">Our Privacy Policy</td>

      </tr>

    </table>

     

    Then use the below css

     

    #myTable td {

    font-family: "Times New Roman", Times, serif;

        font-size: 10px;

        font-style: italic;

        color: #000;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 5:55 AM   in reply to Suzie8484

    Suzie8484 wrote:

     

    Also, do css rules not have a dot before them? so why is it not .p { color:red; } in the external style sheet? Thanks again for explaining, there really isn't much help on so many 'help' websites, they just say "don't do this" but fail to explain to the beginner why or how it should be done.

     

    p doesnt have a dot infront of it because its part of the html structure like <table> <div> <ul> <li>

     

    you only need to use the . when a class is applied to the html structure like:

     

    <table class="myTable">

     

    <p class="myStyle">

     

    <ul class="navigation">

     

    etc etc.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:00 AM   in reply to Suzie8484

    Suzie8484 wrote:

     

    Soooooo helpful! Thank you. So that period before the class name makes it a css rule, not an html tag.

     

    Its known as a css selector:

     

    .small {

     

    }

     

     

     

    Suzie8484 wrote:

     

    What if I want google to recognise my h1 tags for important text in my site? Do I just use css like .h1? Does that still work? Thank you again! Really helping!

     

    h1, h2, h3, h4 etc are part of the html so nothing is required infront of them

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:31 AM   in reply to Suzie8484

    You define how it looks with an -

     

    h1 { ... }

     

    rule in your stylesheet.

     

    You define its contents on each page.  You are having trouble distinguishing presentation from content.  Presentation is CSS.  Content is HTML.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:47 AM   in reply to Suzie8484

    If you have

     

    h1 {...}

     

    in your style sheet, and your .html page is linked to it, all <h1> tags in your .html page will automatically take up the CSS style defined by h1 {...}. You can't select it, because it's automatically added.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:47 AM   in reply to Suzie8484

    Suzie8484 wrote:

     

    Ok, but when I put

     

    h1 { ... }

     

    rule in my stylesheet, dreamweaver won't let me select this as a style on my page unless i put a period infront of it. Thank you for your patience! Not sure what I would do without this forum and helpful people like you!

     

    You dont need to select the h1 on your page for the styles to take effect if you define it in the css stylesheet. You only select an element on your page when you want to apply a class to it.

     

    The two css selectors below will have the same results BUT you would have to select the h1 tag on your page and apply the .myHeading class to it whereas in the first example you don't.

     

    h1 {

    font-size: 20px;

    color: #666;

    }

     

    <h1>A heading</h1>

     

    and this

     

    .myHeading {

    font-size: 20px;

    color: #666;

    }

     

    <h1 class="myHeading">A heading</h1>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:48 AM   in reply to Suzie8484

    That rule will select EACH <h1> tag on every page that uses this stylesheet.  If you only want it to select a particular <h1> tag on the page (a page really should only have one <h1> tag), then you would have to qualify it somehow.  For example -

     

    Using a compound selector

    CSS

    h1.this { color:red; }

     

    HTML

    <body>

    <h1>This text is black</h1>

    ...

    <h1 class="this">This text is red</h1>

     

    ...or alternatively...

     

    Using a descendent selector

    body h1 + h1 { color:red; }

     

    (this selector applies to any h1 tag that is next to an h1 tag that is within the body)

    (see the above HTML)

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:57 AM   in reply to MurraySummers

    Not to confuse it too much you should only use h1 once on the page whereas you can use h2-h7 multiple times.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 7:07 AM   in reply to Suzie8484

    By now you should have gotten the message that we need to see your code to give substantive answers to your questions.  Can you show us?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 7:22 AM   in reply to Suzie8484

    Remove

     

    <style type="text/css">

     

    and any other <yourtaghere> from your .css file. The .css file does not, and cannot use actual HTML coded tags.

     

    in .html you have: <body>

     

    in .css it is defined as: body {...}

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 7:23 AM   in reply to Jon Fritz II

    @Suzie Jon has the ticket.  Read the earlier posts that say that a CSS file CANNOT CONTAIN HTML.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 7:27 AM   in reply to Suzie8484

    These following tags should'nt be in the stylesheet. Are they in there by any chance?

     

    <style type="text/css">

     

    </style>

     

     

    You only need to use the above <style> tags if you write the css directly into the page itself.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points