|
CSS - What Are The Naming Rules For Css?
What are the naming rules for CSS? No numbers in class names? Any other char not OK?
Similar TutorialsHi, I'm working on a dynamically driven site with 2 links: Code: <a href="link1.html" id="Link Mine">Link 1</a> <a href="link2.html" id="Link Yours">Link 2</a> I don't have access to change the IDs on the links (get rid of the spacing in the ID names). Is there any way of styling the 2 links differently in CSS even though there is that space in the ID names? Thanks in advance Hello, In my HTML I name the Ids always with Capitalized first letter in each word: Intro, LeftContent, ... I do the same with the CSS: Intro, LeftContent, BlueParagraph, ... I see other variations like using _ between each word. Or capitalizing only the second word and forward. What do you usually do? Is there a more common way than others? Thanks, Miguel Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help I have a site www.carrie-anne.co.nz just refer to index.asp It has 3 css. I have a problem with main.css The problem is minor, but annoying. It is to do with the lhs menu called menucontainer. The menu is a list and the rules applied to it are quite specific. Below menucontainer is contactcontainer and that too has specific rules. What happens is that I am getting the menu text underlined when I state that decoration:none; On further testing by commenting out rules ( so they don't render ) I find that rules for contactcontainer are over-riding menucontainers. Can anyone shed any light? It is driving me spare.. Here is the css file. Code:
body {
background-color: black;
background-image: url(web_images/layout/carriebackground.jpg);
background-repeat: no-repeat;
background-position: left top;
padding: 0px;
margin-left: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-attachment: fixed;
}
#container {
width: 800px;
}
#taglinecontainer {
width: 410px;
padding: 0px;
margin-left: 380px;
}
h1#carrieheadingmodelling {
background-image: url(web_images/layout/modelling.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 30px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingacting {
background-image: url(web_images/layout/acting.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 32px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingpromotional {
background-image: url(web_images/layout/promotional.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 39px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingtop {
background-image: url(web_images/layout/carrie_anne_freeman.gif);
height: 0px;
background-color: transparent;
background-repeat: no-repeat;
margin: 0px;
overflow: hidden;
padding-top: 61px;
background-position: right top;
}
/*------------------------------Menu stuff----------------------------------------------------*/
#_____________________________{}
#menucontainer {
width: 220px;
margin-top: 50px;
border-right: #330099;
border-bottom: #333399;
border-left: #336699;
padding: 0px;
margin-bottom: 30px;
height: 325px;
background-image: url(web_images/layout/menubackgroundtrans.png);
text-decoration: none;
}
h1#selectacatergory {
background-image: url(web_images/layout/menu.gif);
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 38px 0px 0px;
overflow: hidden;
height: 0px;
position: absolute;
width: 222px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* if ie- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='web_images/layout/selectacatergory.png');*/
}
#container #menucontainer ul {
width: 222px;
margin: 39px 0px 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
height: 240px;
position: absolute;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
text-decoration: none;
}
#container #menucontainer li {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
display: block;
height: 20px;
background-image: url(web_images/layout/butterfly.gif);
background-repeat: no-repeat;
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
text-decoration: none;
}
#container #menucontainer ul li a:link, a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #FF6633;
font-weight: bold;
text-decoration: none;
margin-left: 3px;
}
#container #menucontainer ul li a:hover {
color: #FFFFFF;
text-decoration: none;
}
#container #menucontainer ul li a:active {
color: #FF6633;
text-decoration: none;
}
#container #menucontainer ul li#current {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
height: 20px;
background-image: url(web_images/layout/butterfly_current.gif);
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
display: block;
text-decoration: none;
}
/*Contact Section*/
#________________________________________{}
#contactcontainer {
width: 225px;
position: absolute;
margin-top: 47px;
background-image: url(web_images/layout/menubackgroundtrans.png);
padding: 0px;
}
h1#contactme {
background-image: url(web_images/layout/contactme.gif);
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 42px 0px 0px;
overflow: hidden;
height: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 225px;
}
#contactcontainer ul {
margin-top: 10px;
margin-bottom: 20px;
list-style-type: none;
padding: 0px;
width: 182px;
margin-left: 42px;
z-index: 1;
}
#contactcontainer li {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
margin: 0px;
padding: 0px;
}
#contactcontainer li a:link, a:visited {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
text-decoration: underline;
margin: 0px;
padding: 0px;
position: relative;
}
#contactcontainer li a:hover {
list-style-type: none;
color: #FFFFFF;
line-height: 2.5em;
text-decoration: none;
margin: 0px;
padding: 0px;
position: relative;
}
.photoholder {
display: block;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
width: 222px;
height: 207px;
border-top-width: 0px;
border-top-style: none;
}*/
#______________________rightcontent________________________{}
#rightcontent_holder {
width: 545px;
position: absolute;
margin-left: 250px;
margin-top: -324px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-image: url(web_images/layout/large_blackbutterfly.gif);
background-repeat: no-repeat;
background-position: right top;
}
#rightcontent_homepage {
}
#flow01, #flow02, #flow03, #flow04, #flow05, #flow06, #flow07{
float: right;
clear: right;
margin: 0 0.5em 0 0;
}
#flow01 {width:250px; height:80px;}
#flow02 {width:275px; height:60px;}
#flow03 {width:285px; height:42px;}
#flow04 {width:300px; height:80px;}
#flow05 {width:200px; height:50px;}
#flow06 {width:150px; height:45px;}
.hidecap {
display: none;
}
.homepagewelcometext {
background-image: url(web_images/layout/Welcome_w.gif);
background-repeat: no-repeat;
text-indent: 53px;
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
.signature {
background-image: url(web_images/layout/carrie_sig.gif);
height: 75px;
width: 200px;
margin-left: 21px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 50px;
background-repeat: no-repeat;
}
#-----------------------footer---------------------{}
#footer {
background-color: #00264C;
border: 1px solid #166286;
margin-bottom: 5px;
margin-top: 35px;
position: relative;
width: 550px;
}
#footer p {
color: #FF6600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .6em;
text-align: center;
margin-bottom: 8px;
margin-top: 8px;
}
#crediting {
color:#000000;
margin: 0px;
padding: 0px;
display: block;
width: 500px;
}
.footerimages {
background-color: #000000;
margin-left: 48px;
}
.credittext {
color: #E17717;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
margin: 0px;
padding: 0px;
}
.standardcopy {
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
#confirmation_holder {
width: 500px;
position: absolute;
margin-left: 275px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
div#crediting a#link, img {
text-decoration: none;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
I'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? Hey all, What are your techniques for making unique horizontal rules? At the moment I am using this code to separate content: Code:
/* CSS */
.line {
height: 5px;
background-image: url(../img/bg_3x7.gif);
background-repeat: repeat-x;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 0px;
}
Html: Code: <div class="line"></div> The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE... Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform. Cool cool cool, Thanks! Cheers Micky Hi guys and gals. Right does any one know any CSS specfic Internet Explorer 8 rules that I can run in the CSS sheet. Something like -ie- -msie- would be nice. Also for those of you who have not tried IE8 beta download it , it's really good, ok still bugs to work out fair enough but what I'm really fond of is the built in dev bar that comes as standard, if there is an add-on like Yslow I think I'm going to convert. So the basic rules a 1) Author style sheets 2) User style sheets 3) Default browser sheets Now when you get into Author style sheets... You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets. I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner. To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: green;">What am I?</p>
</body>
</html>
As expected, the inline style wins. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p>What am I?</p>
</body>
</html>
The header style information wins. (regardless of position of @import) Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>What am I?</p>
</body>
</html>
External style sheet wins (<link />). How does position influence precedence of: external style sheets (Both @import and <link />) and header style information? I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that. for example: h1, h2 {color:olive;} For some reason, it's only applying to h2. Even when I place it so that there are no parent elements. I've validated the xhtml and the css. What's the deal? I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things. I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. |
|||||||