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

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.

1333 Views 24 Replies Latest reply: osgood_, Aug 6, 2012 7:27 AM

Replies

Currently Being Moderated

1. MurraySummers,

Aug 6, 2012 5:18 AM in reply to Suzie8484

Report

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

2. Suzie8484,

Aug 6, 2012 5:24 AM in reply to Suzie8484

Report

Hi Murray! Thank you for explaining the different rules so nicely. Yes it helps... but can you explain why HTML tags aren't used in external css documents and where I should put them? Do they go on each page? I can't understand if my H1 tag is used throughout my website why it doesn't go in the external style sheet?

|
Mark as:
Currently Being Moderated

3. osgood_,

Aug 6, 2012 5:30 AM in reply to Suzie8484

Report

<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

4. Suzie8484,

Aug 6, 2012 5:42 AM in reply to osgood_

Report

thanks osgood... hopefully you can clear this up for me, this is what I have in my external style sheet:

@charset "UTF-8";
/* CSS Document */

<style type="text/css">
title {
    font-family: "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: italic;
    color: #000;
}
h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: italic;
    color: #000;
}
h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #666;
}
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #666;
}
small {
    font-family: "Times New Roman", Times, serif;
    font-size: 10px;
    font-style: italic;
    color: #000;
}
</style>

and then this bit of code is for text in a table on my index page:

</table>
<table width="1142" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="82" class="small">Home</td>
    <td width="123" class="small">How it works</td>
    <td width="119" class="small">About us</td>
    <td width="136" class="small">Testimonials</td>
    <td width="165" class="small">Contact us</td>
    <td width="354"> </td>
    <td width="163">Our Privacy Policy</td>
</tr>
</table>

Why is this text not showing the design of what was established in my external style sheet? I really appreciate any help! Thank you so much!

|
Mark as:
Currently Being Moderated

5. Suzie8484,

Aug 6, 2012 5:51 AM in reply to MurraySummers

Report

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.

|
Mark as:
Currently Being Moderated

6. osgood_,

Aug 6, 2012 5:56 AM in reply to Suzie8484

Report

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

7. osgood_,

Aug 6, 2012 5:55 AM in reply to Suzie8484

Report

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

8. Suzie8484,

Aug 6, 2012 5:57 AM in reply to osgood_

Report

Soooooo helpful! Thank you. So that period before the class name makes it a css rule, not an html tag. 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!

|
Mark as:
Currently Being Moderated

9. osgood_,

Aug 6, 2012 6:00 AM in reply to Suzie8484

Report

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

10. Suzie8484,

Aug 6, 2012 6:29 AM in reply to osgood_

Report

So, where do I define what my h1 text looks like if I can't put it in my external style sheet?

|
Mark as:
Currently Being Moderated

11. MurraySummers,

Aug 6, 2012 6:31 AM in reply to Suzie8484

Report

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

12. Suzie8484,

Aug 6, 2012 6:36 AM in reply to MurraySummers

Report

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!

|
Mark as:
Currently Being Moderated

13. Jon Fritz II,

Aug 6, 2012 6:47 AM in reply to Suzie8484

Report

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

14. osgood_,

Aug 6, 2012 6:47 AM in reply to Suzie8484

Report

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

15. MurraySummers,

Aug 6, 2012 6:48 AM in reply to Suzie8484

Report

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

16. Suzie8484,

Aug 6, 2012 6:51 AM in reply to osgood_

Report

Ahhhhhhh!!! Got it! Thank you!

|
Mark as:
Currently Being Moderated

17. osgood_,

Aug 6, 2012 6:57 AM in reply to MurraySummers

Report

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

18. Suzie8484,

Aug 6, 2012 7:04 AM in reply to osgood_

Report

Many thanks indeed. Now, for some reason, in my CSS styles panel, it isn't showing the first style that is on my external sheet. ie. h1 is first, but on the list of my CSS panel when i go to my page, it just isn't displaying and will not recognise <h1> in the code. I've tried changing the order - same thing, whatever is at the top is not listed in the panel? Why, oh why...!!

|
Mark as:
Currently Being Moderated

19. MurraySummers,

Aug 6, 2012 7:07 AM in reply to Suzie8484

Report

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

20. Suzie8484,

Aug 6, 2012 7:15 AM in reply to MurraySummers

Report

My external style sheet:

@charset "UTF-8";
/* CSS Document */

<style type="text/css">

h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: italic;
    color: #000;
    text-align: left;
}
h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #666;
}
title {
    font-family: "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: italic;
    color: #000;
}
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #666;
}
small {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-style: italic;
    color: #000;
    font-weight: bold;
}
.toptable {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    color: #FFF;
    background-color: #000;
    text-align: right;
}
.maintable {
    border: medium solid #FFF;
}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    color: #FFF;
    text-decoration: none;
}
a:hover {
    color: #999;
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
</style>

In the CSS styles panel for my page it shows:

h2
title
p
small
.toptable
.maintable
a:link
a:visited
a:hover
a:active

and if I change the order on my external style sheet, whatever is first seems to be omitted and not recognised at all - all the others work fine. Hope this helps.

|
Mark as:
Currently Being Moderated

21. Jon Fritz II,

Aug 6, 2012 7:22 AM in reply to Suzie8484

Report

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

22. MurraySummers,

Aug 6, 2012 7:23 AM in reply to Jon Fritz II

Report

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

|
Mark as:
Currently Being Moderated

23. Suzie8484,

Aug 6, 2012 7:26 AM in reply to Jon Fritz II

Report

Ta! Most helpful!

|
Mark as:
Currently Being Moderated

24. osgood_,

Aug 6, 2012 7:27 AM in reply to Suzie8484

Report

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:

Forum guidelines

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

Dreamweaver

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

Aug 6, 2012 4:59 AM

More Like This

Bookmarked By (0)

Answers + Points = Status