So, you are sold on using CSS to style your HTML elements? First, we need to figure out how to tell the browser we are using CSS. We can do this by referencing the CSS as a separate file or we can place it inside our HTML document.
Referencing a Cascading Style Sheet
There are three ways to define CSS.
- Inline/element Styling (Not so great)
- Internal Style Sheet (Not bad)
- External Style Sheet (The best way)
Inline or Element Styling
Inline/element styles are the worst because if you ever want to change a style later, you will have to drill down through your HTML to find the element and change its style tag. Please don’t do this unless you never want to change that element later.
Internal Style Sheet
The reason I am not too fond of this way to utilize CSS is that it doesn’t permit other HTML files to use it. Yes, it still does permit you to change multiple items in a class, but why not just make it to where all HTML pages can use that class? However, if you argue that it might crowd your external style sheets, I completely understand. Just make sure that your internal styles aren’t going to be repeated somewhere else.
External Style Sheets
Take everything from the p.special_p to the } and put it into its own separate file with an extension of .css to declare it as a CSS file. We can reference this file to do exactly what happened above, but now we can use the class=”special_p” in every new HTML document we create. All of those new files with a paragraph tag that has that specific class will be colored red. Linking to the file is really easy. Somewhere toward the bottom of your HTML head tag, put the following:
A few of these are standard for referencing a style sheet. The rel attribute will always be set to “stylesheet” and type will always be set to “text/css”. The href will be the set to the path to your stylesheet. Finally, the media tag is the most complicated. It is most often set to screen because that is a reference to the computer’s screen. However, there a couple other references, such as “print” for whenever users try to print your page, “handheld” for phones, etc. Can we finally learn some CSS? Of course!
References
I think you should teach them the rgb(); color picker.
Great css the external style sheet is a magic tool 🙂
The same thing, like when you use separated CSS file: I developed an MVC in PHP and the first view file, that is always included is HeaderView.php, so if I declare the CSS "rules" there, it will applied in all pages on the output, because HeaderView will be displayed automatically… Sry 4 bad grammar, My mother language is not english…:)
There is something I didn’t like in this tutorial: Your opinion is that CSS should be used in a CSS file and the HTML files refer to that one.
Making inline styles is a good way to change the style of ONLY THAT object. We can use ids as well, but when we have over a hundred ids, it can become difficult to remember each styles. The same thing with the internal stylesheets too.
Though, if we use a good IDE that can enease the handling of them, our problem can be solved…