CSS is the basics of HTML styling, but I am finding out that somehow it is missed. It’s hard to be a Web Designer without knowing how CSS style sheets work. For those who do not know, CSS is short for Cascading Style Sheets. If you can picture a waterfall, that is basically how CSS works.If you have a CSS file that contains your basics styles, you can then have another style sheet with the specific changes required for the individual page or set of pages.
Here is a quick example.
In global.css you may have the following
a.link
{
padding-left: 7px;
padding-right: 7px;
padding-top: 2px;
padding-bottom: 2px;
color: #FF0000; /* Red */
}
In detail.css you may have the following:
a.link
{
color: #0000CC; /* Blue */
}
If in your HTML file, if you include the CSS using the following
<LINK href=”global.css” rel=”stylesheet” type=”text/css”>
<LINK href=”detail.css” rel=”stylesheet” type=”text/css”>
The link colour in the HTML page will be blue, even though you have defined in the global.css it as being red. Essentially it is “Last is King”. This means that what ever is first, will set the base, but the second CSS file will override the first. If you reverse the two LINK tags above, the link will come out as being red, which may cause you to wonder why your style did not get picked up.
If the above is not confusing enough, wrap your brain around this. If you define the same style twice in the same style sheet, the second definition will override the first. This means that if you define a style at the top as being blue and you forget that you have defined it and you make the same definition later in the same file as being red, the object carrying this style will come out as being red. You may chase your tail for a while wondering why the style is red and not blue. If you turn on FireBug in the Chrome or FireFox browser, you will see the cascading style that you had created and which you defined as being first.
What I like to do is create a style sheet that defines the basic style of the website ( template ). I then implement a style sheet for sections of the website that needs the style to be overridden. As an example, on the contact page, you may want a two column display instead of a three column display. You may want a bigger font on a page of quotes. These are times you may want a second or third stylesheet that contains the changes from the template. When you override the main template, only put the differences. Do not copy the entire template and make the changes to match your desire. This is especially hand if you have mini websites within one, where you may have specific vendor branding on each site, but the layouts to be the same.
Do not style against the ID of the HTML tag. If you style against the ID, you may be tempted to give the same ID to multiple elements which will give you grief should you implement JavaScript. It is best to define classes and apply to the style to the classes. By the way, you can have more than one class to an element (<div class=”square_box large_red”></div>). Again, the order of the classes when using the multiple class technique does matter. Everything cascades top to bottom. Last is King!
The post Last is King – Back To Basics CSS appeared first on Software Developer In London.