Is ok to have the layout.css added to head
- Thread starter junery00
- Start date
Edge
Member
As long as you don't add it to your head but to the document head section. I've seen some newbies walking around with a printout of a stylesheet stapled to their head - LOL.
The basic structure I adhere to is:
Sitewide rules -> "External" .css document
Single document or overrides to global rules -> <style> element in document head.
Single element or local rule overrides -> Inline with a style attribute. (yes, it is "allowed" and the CSS police won't hunt you down for doing it)
That way your global style sheet doesn't become bloated with rules that are only used once or twice in the entire site and make it a major task finding the right one or using identifiers such as;
Wordpress theme developers, please take special note of the last one!!!!!
Sitewide rules -> "External" .css document
Single document or overrides to global rules -> <style> element in document head.
Single element or local rule overrides -> Inline with a style attribute. (yes, it is "allowed" and the CSS police won't hunt you down for doing it)
That way your global style sheet doesn't become bloated with rules that are only used once or twice in the entire site and make it a major task finding the right one or using identifiers such as;
HTML:
#contact-page-left-side-last-block {
/* ruleset*/
}Ok I think I did attached the css file to my html file not sure if i did it right but here it is how it looks in my html
<!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>Untitled Document</title>
<link href="my_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Outline {
height: 800px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
-->
</style>
</head>
<body>
<div id="Outline">Content for id "Outline" Goes Here</div>
</body>
</html>
so the question is whatever css rule i create it goes autoamtacally to my styles.css file ?
<!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>Untitled Document</title>
<link href="my_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Outline {
height: 800px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
-->
</style>
</head>
<body>
<div id="Outline">Content for id "Outline" Goes Here</div>
</body>
</html>
so the question is whatever css rule i create it goes autoamtacally to my styles.css file ?
Edge
Member
Remove this from your head and put in external style sheet:
Code:
<style type="text/css">
<!--
#Outline {
height: 800px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
-->
</style>Without the style tags and comments of course, 
And just as a "by the way", the need to comment out the style rules "for older browsers" ceased to exist around TEN years ago.
And just as a "by the way", the need to comment out the style rules "for older browsers" ceased to exist around TEN years ago.