|
| |
|
|
BeTheBall
Posts: 6352
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
Cascading - 4/13/2007 15:34:53
Seems to be the cascading part I just don't get. I have a form with a class of frm. Here is part of my stylesheet that deals with form labels:
.frm label, .frm input, .frm select {
display: inline-block;
margin-bottom: 10px;
}
.frm label {
float:left;
margin-right:5px;
text-align:right;
font-weight:bold;
width:200px;
}
I am trying to overwrite the width and text align values in just one label. So I inserted into that label a class attribute of "wider" and put this in my stylesheet:
.wider {width:400px;text-align:left;}
However, it still inherits the values from the frm class. 
Also, can someone give a quick summary of why some attributes are coded as html element . class name and others are . class name html element? For example, I have a form button in my stylesheet that looks like this:
input.submit {
background: #E0691A url(../images/submit.gif) no-repeat;
border: 0;
padding: 4px 0;
width: 65px;
margin: 0 15px 1px 0;
color: #FFF;
font: bold 1em Arial, Sans-Serif;
}
Other items are like this:
.bar li {
margin: 0;
padding: 7px 12px 5px 12px;
color: #FFEADC;
background: #FF9148;
float: left;
}
What determines where the "." goes?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
markhawker
Posts: 511
Joined: 5/31/2004
From: Leeds, UK
Status: offline
|
RE: Cascading - 4/13/2007 19:57:58
OK, so CSS...
There are 5 main types of selectors:
- Simple selectors are just an element name e.g. h1{}
- Class selectors allow different styles for the same element e.g. p.wide{} or p.narrow{}
- Generic selectors apply to content of more than one element e.g. .wide{} could apply to a p or h1 etc.
- ID selectors apply to one specific element e.g. #wide with <p id="wide">Foo</p>
- Pseudo class selectors add special effects to some selectors e.g. a:hover{} or see more at http://www.w3schools.com/css/css_pseudo_classes.asp
CSS interprets those from top to bottom and so a simple selector would be overridden by the latter ones. In your example you are applying your style to EVERY label element, to apply to just one you should use an ID selector such as <label id="foo" ...>Bar</label> .frm label#foo. Technically, you should have form.frm as the CSS class.
Does that clear things up? By not prefixing classes you are applying them to ANY element. I always use class or simple selectors, and use generic selectors a lot less.
It's not that hard really once you take in those selectors I mentioned.
_____________________________
Mark Hawker
my business - http://www.thebubblejungle.com/
facebook - http://www.thebubblejungle.com/facebook/
web hosting - http://www.crucialp.com/
| |
|
|
|
BeTheBall
Posts: 6352
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: Cascading - 4/13/2007 22:59:47
I threw the size and alignment attributes inline and that works. I will work on the stylesheet as I go. I just thought that if I had a class in a form and another class in an element inside the form that the class in the element would take priority in any conflict. Obviously I misunderstood the full meaning of cascading.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
