CSS Basics - Styling Things
CSS is all about making elements pretty, or ‘styling’ them. Standing for ‘Cascading Style Sheets’, this method of styling ‘cascades’, or reads top-to-bottom, through the ‘stylesheet’ - your list of styles. Now that we have gone through the basics of HTML, we can use CSS to make it all look good.
If you haven’t read my article on linking documents, go back and read it. Without understanding how HTML handles linking documents, we can’t correctly connect our CSS styles to our HTML document.
I say correctly because, while it is possible to use inline or internal styling, it is best practice to keep your CSS separate (‘external’) and not bog up a document written in one language with another document’s worth of code written in another.
Once we have our linked documents set up, we can write whatever we want; however, that doesn’t mean any of it will apply…
Applying Styles, to anything
Styles can be connected to their HTML counterparts using a number of selectors. The most common of which are…
Classes
By adding a class to any element, we have a direct route to style it. Simply do this by adding the class call and the name of choice to the element’s tag like this -
<div class=”container”>We can then call it in our stylesheet by placing a . before the name and some curly brackets after for the styling content like so -
.container {}
Any styles that are added between the brackets will be applied to any element with that class name, meaning they are reusable. We can take advantage of this by making generic classes for styles we want duplicated, like a container class that adds a standard font size or background color.
The above general method of adding styles to an element apply to all
IDs
These work exactly the same as classes in HTML and the stylesheet with the exception that rather than a period, IDs use a hash (#) before their names -
<div id=”container”>#container {}
IDs, like classes, are technically reusable, but typically the use is specific to a single instance. IDs also have the highest specificity, which I will be covering in my next article.
Element Types
Remember how styles applied to a class apply to any element with that class? Similarly, we can use the element type itself to style every element of the same type. Want to make every button blue? Simply use the element name in the stylesheet in place of a class or id tag and all the elements of that type will have those styles applied to it.
<button>Click Here for a Free iPhone</button>button {}
Lastly, The ‘Everything’ Selector
Using a * before the style brackets applies the contained styles to everything in the HTML document.
* {}
But why would you want to do that?
