Join Bill Weinman for an in-depth discussion in this video Examining the three ways to apply style, part of CSS for Developers.
There are three ways to apply style to an HTML file. The first way and the simplest way is with the Style Attribute and it looks like this. Here we have a <P> tag with a style attribute and a style inside of the attribute that says that the color is going to be Red and then the text and the close of the P tag. So this is how you would apply a style to an individual tag in an HTML file. This is very simple to do.
It's not terribly flexible. It's not terribly powerful. You are not going to get a lot of mileage out of this, but it can be a great way to prototype or sandbox for an idea that you might have and you just want to quickly throw it in there, see what it's going to look on the screen and try it out. So this is using the style attribute to apply style to HTML. The second way is by using the style tag. Using the style tag, you can insert a Style Sheet in a document.
So you have an opening style tag and a closing tag and then you put your entire CSS Style Sheet in between those, and in this way, you can have a Style Sheet. you can have some of the flexibility of having a style sheet, but it only applies to one file. This is not a way that you're going to use it in a website where you're wanting to apply that style over several different pages across your site, so to speak. This is a way to apply style in an individual HTML file.
It's more powerful. It's more flexible than the style attribute, but again, this is not a solution for a site-wide Style Sheet or for anything that you're going to use really even in production. Finally, there is using External style sheets. External style sheets are applied using the <link> tag and it looks like this and you have the relationship attribute, rel, you have the type attribute, and you have the href attribute, which tells you where the style sheet is found in the file system.
This is how you apply style in and external style sheet that you can apply across a number of different pages, across an entire website, even across several different websites, if your style sheet is housed in a separate domain. So this is really the most powerful way and this is the way that you're going to apply style sheets most of the time and in fact, this is the technique that we will use through most of this course. This allows you to use one style sheet for multiple documents.
It allows you to use combinations of different style sheets for different purposes, so that you can have some pages that will include this one and that one and maybe another style sheet, other pages that will use a different combination of style sheets. So you're going to want to use external style sheets for most of your documents and for most of your websites and most the work that you do using CSS. With any of these techniques, you can use the div and span tags to apply styles either on a block or an in-line level, div for block level and span for in-line level.
Then you can either use a style attribute with div and span, or you can use selectors, ID selectors or class selectors to apply styles from an external style sheet or from even an internal style sheet using the style tag. So this is the way you're going to apply your CSS, either site-wide or to individual HTML files.
- Adding borders and backgrounds
- Choosing fonts
- Changing the color of elements
- Working with sprites
- Positioning with CSS
- Creating a menu bar
Skill Level Beginner
Q: I want to use one style sheet for a header and a menu item, one for the body, and another for the footer. Can I use a Main.css document and import header.css, body.css, and footer.css?
A: The most common way to use multiple style sheets is to use multiple <link> tags in the HTML file. If you prefer to have one <link> tag you may use CSS @import rules to import style sheets. - Keep in mind that @ rules must come before any CSS statements in your style sheet. It may be a good idea to have a .css file dedicated to @import rules only. Be aware of CSS cascading rules. Whether you are using <link> or @import, styles defined later will override earlier styles..