CODEWITHSUNDEEP
css
Sandeep Choudhary
Sandeep Choudhary

Reputation: 163

Can I define my custom CSS media?

I need to override main CSS of an application with my own CSS. Is there a good way of doing it ? One way is !important tag, which I want to avoid.

I was just thinking whether I can create a custom CSS media and define my CSS for that particular media. This way I can have main app CSS defined for all but my custom media.

Upvotes: 0

Views: 611

Answers (2)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

A main "feature" of Cascading Style Sheets is its cascading effect.

An amended quote on this from a number of places on the internet:

Cascade is the special part. A style sheet is intended to cascade through a series of style rules, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in style sheets.

So as long as you specify the exact same rules but change some property values inside those rules, and you make sure they are loaded after the original rules, they will override the previously specified property values inside those rules. If you skip a property value in the new rule, the previously specified property value will remain in force for that property.

Media queries are the best answer to defining styles for a specific type of media. It lets you specify rules specifically for certain screen sizes.

If your particular target media cannot be properly identified by querying screen size but needs JavaScript to be identified. You could write some JavaScript which loads a style sheet when the document is loaded, in that case you only have to make sure it is loaded after the original style sheet, and it will then override styles with the same specificity.

Upvotes: 1

gitaarik
gitaarik

Reputation: 46300

CSS wil overwrite itself if you use the same selectors, so you won't need !important.

So:

.my-div .my-span {
    color: green;
}

will be overwritten by:

.my-div .my-span {
    color: red;
}

but not by:

.my-span {
    color: red;
}

Yea, you can use media queries to target certain screen sizes. for example like:

@media screen and (device-width: 360px) and (device-height: 640px)

Upvotes: 2

Related Questions