CODEWITHSUNDEEP
csshtml
Ryan
Ryan

Reputation: 37

Overwriting CSS value in different pages

I have the following CSS which is used for horizontal scrolling of images placed side by side in a div. As advised by @Moob I am using 

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

from the following css

#scroll {
width:665px;
height:550px;
margin:0px auto;
background:#ffffff;
overflow-y:hidden

}
#scroll ul {
margin:0; 
padding:0;
display:table;
list-style:none;
}
#scroll li {
padding:10px 100px;
text-align:center;
display:table-cell;
vertical-align:middle;
border:1px solid #fff;
}

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

#scroll img {
border:0;
display:block;
margin:0px auto;
}

#scroll span {
padding:10px 0 0;
display:block;

}

In order to control the left padding of the first image and the right padding of the last image since the images are of varying length/height not great than 665 by 550 px. and I am showing the images in a frame type box with horizontal scrolling enabled. My question is if I want to use the same CSS on 5 different pages to show different types of images, how can I individually set the 

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

for each page, since the padding would be different on different pages for the first and last images? Do I just add it in the head style of that page under my css file link? will it overwrite the file value?

Thanks, Ryan

Upvotes: 1

Views: 75

Answers (2)

JaanRaadik
JaanRaadik

Reputation: 571

As long as your in-page styling code comes after the inclusion of your css file, it will take priority. Simply import your css file, then following this include adjustments in a tag, as CSS prioritized on the last rule mentioned.

Upvotes: 1

Turnip
Turnip

Reputation: 36732

Don't add page specific CSS to your page headers, it is a nightmare to maintain.

Add a unique id to your body tag on each page:

<body id="page1">

Then use that id as a selector in your CSS to overide your original settings:

#page1 #scroll li:first-child {
   padding-left:30px;
}
#page1 #scroll li:last-child {
   padding-right:50px;
}

#page2 #scroll li:first-child {
   padding-left:40px;
}
#page2 #scroll li:last-child {
   padding-right:60px;
}

...

#page9 #scroll li:first-child {
   padding-left:50px;
}
#page9 #scroll li:last-child {
   padding-right:70px;
}

This way you keep all of your CSS in one file.

Upvotes: 2

Related Questions