Before you master CSS, you need to understand the different ways in which you can apply the CSS to your HTML. There are three basic ways to include style in your code: inline styling, internal stylesheets, and external stylesheets.
Inline styling is probably the least efficient and least use methods of applying CSS to your HTML code. Inline styling is when you add styles to your HTML elements right within the HTML tags, like this:
- <p style="color: #333;">This text will be dark gray</p>
As you can see, the format of the CSS remains constant no matter where it’s inserted (property: value;), but in this case the color property will only apply to this particular HTML element. This type of styling doesn’t really make sense 99% of the time. It’s not dynamic, it’s not mobile-friendly, and it’s time consuming to implement, as each HTML element would have to have its own style rules applied to it.
Internal (or in-document, or embedded) stylesheets are CSS styles that are added to the <head> section of your document within <style> tags, like so:
- <style>
- p{
- color: #333;
- }
- </style>
In these cases, the styles aren’t just applied to each individual element like with inline styling, but every element of the selector’s type that is present on that page. So, in this example, every p tag on this particular page would have the color #333. This type of styling is useful when you’re working with a particular page where something needs to be styled differently than any of the other pages on your site, but it’s not recommended to do all your styling this way, because it’s a lot harder to make universal changes to all your pages if you do (plus, it makes your pages look kind of messy).
The final and most widely used type of styling is external CSS stylesheets. These stylesheets are their own file, usually located in a CSS directory of some sort. They’re often lined to in a universal header or in the <head> section of and HTML file. The format of the CSS is the same as the format of the CSS in the internal or embedded styling, but the CSS rules of an external stylesheet will apply to every HTML page that links to the stylesheet, which makes it very easy and convenient to uniformly style many elements across many different pages, and to make changes to your CSS to optimize your site for mobile and different sized viewports.
The link to your external CSS file should be placed in the <head> of your document, and look something like this:
- <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css">
Understanding all the different ways to apply CSS to your HTML is important in learning the basics of style and design, but if you’re new to CSS and aren’t already using external stylesheets, it’s time to start experimenting with them. Without them, it’s a lot more difficult to get creative and use CSS to its full potential.