I’ve not always been a fan of CSS (Cascading Style Sheets). When I first learned about their existence many years ago, browsers, computers and the internet were not quite ready to handle them, in my opinion. I guess that’s the way it is for many new technological breakthroughs. CSS seemed to make my pages slower and certainly added a new level of complexity to my job. Today, I appreciate the degree of flexibility and beauty that they bring to the entire online world.
There are three ways to add style to your web pages with CSS. Inline, embedded style sheets and external style sheets.
Most tags have a ‘style’ attribute. You can add CSS declarations inside those style attributes like this:
<p style="color: red; padding: 10px">This is my text</p>
This is useful if I have just one line or one section of my page that needs to look different from all the rest of my site.
To embed a style sheet inside my web page, I add the <style> tags to my page, usually in the <head> section.
<style>
p { color: red; padding: 10px }
</style>
This indicates that all <p> tags should be red and have a padding of 10 pixels. The ‘p’ in this case is the ‘selector’ and the color: and padding: are the properties. The ‘red’ and the ’10px’ are the values. This <style> tag is useful if you have a whole page on your website that needs to look different from other pages on your site.
The last way to include CSS in your web pages is to use an external style sheet. In this case, you create a file on your website named ‘something.css’. Of course, the ‘something’ part could be anything you want to name the file. The important part is the .css. Usually these files are stored in a folder named ‘css’ on your site, but that’s not necessary. It just helps to organize your site a little better.
This .css file should have your css declarations just as you would have it embedded in your site in the ‘<style>’ tags. Something like this:
p { color:red; padding: 5px; }
h1 { font-size: 20px; padding: 10px; }
To apply this style sheet to my current web page, I add this to the ‘head’ section of my document:
<link rel="stlyesheet" type="text/css" href="something.css">
Of course, change the ‘something.css’ to the name of your stylesheet.
I can have more than one style sheet applied to my web page. In that case, I just add another link tag like this:
<link rel="stylesheet" type="text/css" href="something.css">
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
Remember that any CSS definitions in the second style sheet will override anything in the first style sheet. Anything in a ‘style’ tag in the document will override anything in a stylesheet (assuming the stylesheet is included in the page BEFORE the style tag). And anything in a ‘style’ attribute will override anything in a <style> tag or a style sheet.
For instance, let’s say I have the style sheet from above, where the h1 selector is defined with the font-size of 20px, included in my web page. And then I also have a <stlye> tag defined after the <link> tag which defines my h1 selector with a font-size of 14px. But, on the <h1> tag itself I have the style attribute set to font-size: 24px;. In this case, my font-size for the <h1> tag will be 24px. But, the padding will still be 10px since it was defined in the external style sheet. Only the properties that are redefined are changed.
In other words, a new selector definition does not replace any previous definitions, it just adds to it. Certain properties for the selector may be replaced, but any properties that were not redefined will stay.
External style sheets make it much easier for me to apply the same style to my whole website. I create the style sheet and then I include it in each of my web pages with the <link> tag.
—
If you have a question or would like to see me discuss a certain web tip topic, please leave me a comment. And as always, I appreciate any feedback, suggestions or constructive criticism!