CODEWITHSUNDEEP
css
Bob
Bob

Reputation: 11

CSS selector declarations

This is such a simple issue but I can't seem to find an exact answer anywhere...

Simply, can I declare attributes on a selector in two different places without overwriting the first attribute declaration?

For example, say I declare an attribute to an element within a CSS file loaded into a page:

.x {margin:2px;}

I then want to declare another attribute within the page dynamically: 

.x {padding:2px;}

while keeping the CSS file attributes.

While I appreciate that there are plenty of other ways of doing this, is it correct to do it this way ?

Upvotes: 1

Views: 430

Answers (8)

techspeque
techspeque

Reputation: 26

If you want to make it to do it dynamically you can do something like that:

NOTE: This is a PHP example.

<?php $back = 'image.jpg'; 
**something else can be executed ie conditionals and 
more variables can be added**)
?>

<html>
<head>
<style type="text/css">
btn{
margin:0;
padding:0;
background-image: <?php $back; ?>
height:100px;
width:200px;
display:block;
}
</style>
</head>
<body>
 <div>
     <div class="btn">Test text</div>
</div>
</body>
</html>

You can add the predeclared variables or sets of the variables into CSS code using PHP. Note that CSS needs to be included in the HTML/PHP file you are working on. Lets say you want to randomly generate the background colour. PHP array (of ie '#CCC') > select values from the array randomly > add the variable into the CSS code. #

In your case you can specify two classes and then select one according to the condition in your dynamic code

Upvotes: 0

Jan Daniel
Jan Daniel

Reputation: 131

I think the best way to do it is separate CSS declarations by logic.. layout together, colors together and specific medias (like screen, print) together.

Upvotes: 0

Daniel K
Daniel K

Reputation: 7083

Cascading Style Sheets will inherit the styles and what you are doing is totally fine from a specification point of view but might not be considered best practice. Also be aware of, that if you start overriding other styles the css hierarchy may apply: External > Internal > Inline.

for more information see http://nzwhost.com/article/understanding-css-hierarchy

Upvotes: 0

Milan Jaric
Milan Jaric

Reputation: 5646

THAT IS BAD PRACTICE!!! I would sugest you to create "switch" class which will change some css attributes, rather than dinamicaly inject it later on the page. So later use it by adding it to element or remove

<style>
  .p { margin:2px; }
  .addition { padding: 2px; }
</style>

<p class="p">.....</p>

to switch to new style either with jquery on some ajax call or what ever you need. 

<p class="p addition">....</p>

to switch off padding just remove "addition" class or "p" class if you want to switch off maring.

Upvotes: 0

bradenkeith
bradenkeith

Reputation: 2423

First, to declare a paragraph tag, you wouldn't put a period before it. It should be:

p {padding:2px;}

Secondly, CSS is a cascading style sheet, therefore you can open an element declaration however many times you want. The style properties within it will take the last stated object. IE:

p {padding:2px; border:1px solid #000;}

and then later

p {padding:5px;}

Padding is now 5 px but it retains it's 1px border.

Upvotes: 0

Seth
Seth

Reputation: 6260

That will work. Since CSS cascades it will inherit the styles as they go and add them to that class. That's why some sites change as the page loads.

Upvotes: 0

FarligOpptreden
FarligOpptreden

Reputation: 5043

You can, yes. First off, the styles declared in the CSS file included on the page will be applied, then any other styles specified ad-hoc on the page will be applied on top of that.

Upvotes: 0

awm
awm

Reputation: 6570

This is fine. You can put declarations is as many different places as you like.

Upvotes: 1

Related Questions