With all of the various tutorials I post on CSS, HTML, and website design, I often get emails from readers that resemble something like this:
“This looks awesome, but I have no idea where to start. Do you have anything that talks about the basics of [css/html/jQuery/etc]”
It’s worth going back to the very beginning to set a great foundation for the other tutorials on the site. So, over the next few days, we’re going “back to the basics” with HTML, jQuery, and CSS. We’re going to start with CSS instead of HTML because, in all honesty, most people want to modify things that’s already written rather than write something from scratch. By going over the CSS basics first, we can start with the “tinkerers” and bring the “builders” up to speed all at once, finally going into jQuery for the “polish” that all websites could use.
What is CSS?
CSS stands for “Cascading Stylesheets”, and serves as the “design” language of the web. It was created in the mid 90s as a logical response to a problem: that content and design were fused together, which made syndication of content (through the now standard of RSS) impossible. By splitting off the content from the design, the content could then be repurposed on other sites or applications. These sites would be the precursor for modern day blogs, so you might even say that CSS’ creation and adoption loosely brought about the web as we know it today.
The CSS Hierarchy
CSS is “cascading” because there is a defined hierarchy as to how styles are interpreted and displayed by the browser. In order, from least important to most important
- Browser Specific Styles
- Imported Stylesheets (via @import)
- Linked / External Stylesheets (via <link rel=”stylesheet” type=”text/css” href=”…”>
- Embedded / Internal Styles (<style type=”text/css”> … </style> in the <head> tag
- Inline Styles (<p style=”…”>Text</p>)
As you travel down this list, the styles of the browser are overwritten by imported stylesheets, which are overwritten by linked stylesheets, and so forth.
Utilizing CSS
First off, you need to decide if you want your styles in the page itself or organized into a separate stylesheet. Typically, I recommend using a single file that you link to that contains all of the styles for your application. My sites actually contain 3 files: one for the layout and columns, one for the basic styles, and one for any site-specific font and color styles.
Once you’ve created your CSS file (name it style.css, if you want to follow true naming convention), you can link to it in the <head> of your file:
<link rel="stylesheet" type="text/css" href="style.css" />
Yours will vary depending on where you’ve placed the file, of course. This code tells the browser:
- That it’s a specific type of file (a stylesheet)
- That it’s CSS, and should interpret it as such
- Where the file is located.
Writing CSS
CSS is organized into three parts:
The selector is the element we are changing. There are ways to target specific elements that we’ll talk about further down. The property is what we are changing about the element. This could be its height, weight, font, color, or any other number of items. The value is what we’re setting the property to. If we’re setting color, then the value could be ‘red’, ‘rgb(0,255,0) [green]’, or even #000 [black]. A selector can have multiple properties set, so you can change multiple parts of an element.
Targeting Elements
There are five ways to target a particular element with CSS: HTML tags, IDs, classes, pseudo-classes, and attributes.
HTML Tag Selector
By just using an HTML tag, you can target all of the particular elements that utilize that certain tag. For example, if you want to change all of the hyperlinks to a red color:
a{ color: red }
This changes all hyperlinks (the <a> tag) to whatever color you specify.
ID Selectors
HTML elements can be given IDs in order to be targeted specifically with CSS. There can only be one ID of any given name on a page at a time, so IDs are considered unique on a per-page basis.
a#login{ color: red }
The # symbol specifies that we’re looking at the hyperlink with the ‘login’ ID. In HTML, that tag would look like this:
<a id="login" href="#">Login</a>
Class Selectors
Classes, unlike IDs, can be reused infinitely over the course of a document. Classes are great for items that are repetitive or numerous on a page (buttons, structured items, and “looping” containers such as blog posts may contain class elements).
Unlike IDs, an HTML tag can contain more than one element, separated by spaces.
So, a link, styled to look like a grey button, may look like this:
<a class="button grey-button">Click Me!</a>
This HTML element would take on both the ‘button’ style and the ‘grey-button’ style. If the styles contradict, the one that’s further down the stylesheet would take precedence.
a.button{ display: inline-block; background: black; padding: 12px; color: white}
a.grey-button {background: #666; }
In this example, both the ‘button’ and ‘grey-button’ classes have background colors defined. Since ‘grey-button’ is defined last, it takes precedence.
Pseudo-Classes
A pseudo-class is a class that is applied to an element only in special circumstances. The post popularly used pseudo-class is the “:hover” class, applied when a cursor is directly over the boundary of an element.
a.button:hover{ background: #09f; }
We can add to our example above by specifying a “hover” state for the button – when someone hovers over the button, it turns blue.
Attribute Selectors
Attribute selectors change the style based on the attributes of the link. Attributes can be the source url, the input type, or any number of other selectors.
a[href="https://mitchcanter.me"]:hover{ background: #0F0; }
Notice how you can stack selectors – we’ve used an attribute selector and a pseudo-class together. This turns any link that links to the base url of this site green when you hover over it.
For some extra learning, feel free to reference a blog post I did a few weeks ago on the advanced selectors – ones that go beyond what’s shown above. You can see it here: “Advanced CSS Selectors“