1. Home
  2. Forums Index
  3. Browser Side / CSS 12:27 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Coding seems different?

         

srobinson

5:38 pm on Sep 19, 2008 (gmt 0)

10+ Year Member



This may or may not be the right place for this. Please let me know.

I've just started creating my own CSS in dreamweaver. In the code previously the css code was always below my meta tags, but know its not. Does this matter?

hers is the code: ( i took out the whole body so this post is not too long)

<!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" />
<style type="text/css">
<!--
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
.lineCopy {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: thin;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
}
.lineCopy2 {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
border-top-color: #552800;
border-left-color: #552800;
}
.lineCopy3 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
border-top-color: #552800;
border-right-color: #552800;
border-bottom-color: #552800;
border-left-color: #552800;
}
.style1 {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
border-top-color: #552800;
border-left-color: #552800;
font-size: 18px;
background-color: #677547;
text-decoration: blink;
color: #FFFFFF;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #000000;
}
.help {
color: #FFFFFF;
background-color: #552800;
}
-->
</style>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<meta name="keywords" content="Mattress, Seattle, futons, platform beds, " />

<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>

</body>
</html>

swa66

8:13 pm on Sep 19, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



AFAIK the order in the <head> section is irrelevant for this. Until you have multiple sources for CSS it'll remain that way I guess.

Fotiman

8:31 pm on Sep 19, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ideally, you should put your CSS in its own file and <link> to it so that the browser can cache it (improving performance). As for meta tags, the only one that's really important is the one that specifies the Content-Type (you want this to appear as early in the document as possible) and that still appears before your style-sheets, so you should be fine.

brnm98105

9:28 pm on Sep 19, 2008 (gmt 0)

10+ Year Member



ss

srobinson

9:32 pm on Sep 19, 2008 (gmt 0)

10+ Year Member



Thank you so much. have created a style sheet called mystyles.css

It know looks like this:

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<meta name="keywords" content="Mattress, Seattle, futons, platform beds, " />
<meta name="description" content="How to get higher rankings in Google, Inktomi, and Altavista by using some simple
search engine optimization techniques, also known as SEO."/>
<meta name="dont forget robots text follow or not follow
<meta name="googlebot" content="nosnippet?">
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../mystyles.css" rel="stylesheet" type="text/css" />
</head>

<body>

</body>
</html>
_______________________________________________________________________________

mystyles.css looks like this. It has a squiggly line at the bottom under styles listed as an error "Error parsing styles [Microsoft Internet Explorer 5.0]" Should I be concerned?

_______________________________________________________________________________

h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
.lineCopy {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: thin;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
border-top-color: #552800;
border-left-color: #552800;
}
.lineCopy2 {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
border-top-color: #552800;
border-left-color: #552800;
}
.lineCopy3 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
border-top-color: #552800;
border-right-color: #552800;
border-bottom-color: #552800;
border-left-color: #552800;
}
.style1 {
border-bottom-width: medium;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
border-bottom-color: #552800;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #552800;
border-top-color: #552800;
border-left-color: #552800;
font-size: 18px;
background-color: #677547;
text-decoration: blink;
color: #FFFFFF;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #000000;
}
.help {
color: #FFFFFF;
background-color: #552800;
}

</style>

_______________________________________________________________________________

Please let me know if this is somthing I should be concerned with.

An again thanks for all your help!

D_Blackwell

4:24 am on Sep 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I would ignore IE5 completely.

You can do a lot of shorthanding on the CSS though. (Top, right, bottom, left.)

Sample:

<html>
<head>
<style>
.border {
border-color: red blue teal black;
border-width: .2em .5em .8em .9em;
border-style: solid dotted dashed double;
width: 80%;
margin: 2em;
padding: .6em;
}
</style>
</head>
<body>
<div class="border">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eu neque ut felis mollis rhoncus. Quisque mauris odio, lacinia non, lacinia ut, ultrices vitae, leo. Cras in urna non quam rhoncus egestas. Nunc non elit ac nunc pharetra accumsan. Aliquam laoreet urna ac ante. Maecenas felis turpis, auctor quis, porta quis, egestas at, nisi. Aliquam pellentesque porttitor sem. Praesent lorem nisi, pretium non, convallis vitae, ultricies ut, sem. Aenean ligula quam, facilisis sit amet, sodales eget, auctor eget, mauris. Cras est velit, luctus id, dignissim in, facilisis vel, diam. Donec ut odio.
</p>
<p>
Vestibulum vitae pede in tortor sagittis placerat. Praesent quis pede. Praesent malesuada, augue non venenatis cursus, ante risus luctus massa, id sodales nulla nulla et purus. Phasellus mauris. Proin aliquet purus vel urna. Integer varius scelerisque diam. Aliquam erat volutpat. Aenean aliquam. Proin mi odio, euismod rhoncus, egestas sed, condimentum a, quam. Etiam eleifend diam. Cras metus nulla, scelerisque sit amet, cursus nec, congue eget, eros. Donec malesuada sollicitudin ligula. Curabitur tincidunt congue tortor. Maecenas erat.
</p>
</div>
</body>
</html>

<edit> Copy/Paste error. </edit>

[edited by: D_Blackwell at 4:26 am (utc) on Sep. 20, 2008]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:27 am May 2, 2026