Overriding CSS styles is fairly straighforward. That is today’s tip of the day for website designers.
In the previous post, I posted this bit of code that is taken directly from one of my CSS stylesheet files:
As mentioned in the previous web design post, the CSS coding above is what is responsble for creating the box that encloses the above CSS style. It is simply done by putting the above line in a divider that starts with <div id=”code”> and ends with </div>
So, if this style is already set – but you want to say – change the background color from #9CB0D1 to something else, how is that done? Simple! You can still call the main CSS style in the stylesheet file, but you then will specify an additional attribute in the divider markup so the website will display the changes you want.
For example – I want the line to be solid instead of dotted for the border around the section on the web page. I would simply change my code to this:
See how doing that overrode the dotted line as the border?
Now, maybe I want to change the background color from #9CB0D1 AND also keep the border style as solid. Well, here is how you do that:
Notice that you use the attribute – such as “background-color” and then it contains a colon (:) after it – then the actual setting for that attribute follows – which then has a semi-colon (;). You can then plug in additional stylesheet attributes right after that in sequence – just like above.
So, that is how you can override stylesheet styles in order to do web design. It is handy because there is no reason to make additional styles in the CSS file when you can simply override small settings like that.