Today, I started a new course called CSS Fundamentals on lynda.com. This course was less hands on than my previous one, but it was a good intro course to understanding the importance and use of CSS.
CSS stands for Cascading Style Sheets, which is a style sheet language developed to control the presentation of markup language documents like HTML. HTML controls the structure of the web, while CSS controls the presentation of it.
A good visual example of this is you can think of HTML as the structure of a new building. You can see the structure as it’s being built, but you don’t really know what the building is going to look like.
CSS, on the other hand, serves as the king of the building and determines what the outside of the building will look like.
Websites cane be controlled and constructed by five main elements.
A website might use all of these elements, while other it might only use HTML and CSS. This modular approach means that you can change each of these elements independently of each other. In terms of CSS, you can change the entire layout and design of a page without ever chaining its content or structure. This can also speed development and site maintenance by controlling the formatting for an entire site through a small number of CSS files.
All browsers have a default style sheet that is applied to HTML. By some this is considered “unstyled.”
While it certainly looks unstyled, that’s not entirely accurate. Before authors were allowed to control HTML pages through CSS, browsers had to have some way of displaying HTML content visually. Although the approaches among early browser manufacture differed, essentially they all developed default style sheets that told the browsers how to display specific elements.
When you write CSS, one of the things you’re actually doing is overwriting those default browser styles, and replacing them with how you want the page to look.
Now, let’s get into some of the syntax of CSS and how to read the language. CSS style sheets are made up of two parts: the selector and the declaration. The selector, here “p” for paragraph, tells the browser which elements or elements in the document style.
The above selector, targets all paragraphs within a style document to be formatted. While this element selector is pretty simple, selectors can be very complex depending upon which elements on the page you’re trying to target. Selectors can be grouped together or even combined to allow for more precise element targeting.
The declaration, which is enclosed in these curly braces, uses the formatting instructions for the style. Here, there are two rules: one telling the browser which font to use and another defining the size of the font.
The rules themselves are made of two parts: the property and the value. These are separated by colons and use a semicolon to tell the browser to stop evaluating and move on to the next rule.
While this syntax is simple, you will need to learn the myriad of selectors and selector combinations which make it possible to exercise a greater amount of control over page elements. You’ll also need to learn the various properties you can set for each of the elements and the values that are allowed for that property.
For the most part, the use of whitespace doesn’t matter. For example, the image below shows that both these CSS rules will give you the exact same results.
However, sometimes, whitespace does matter, so it’s important to be familiar with when whitespace is important and when it’s not.
Now that I’ve went over a little bit of CSS syntax, I’m going to focus on selectors in a bit more detail. Selectors allow us to tell the browser which elements on the page we want to style. In some cases you want to apply styles broadly all across the site. In other situations, you’r going to want to target a smaller number of elements or even a single element. Understand how selectors work will allow you to do just that.
We’ll start with the Element Selector which are global in nature, meaning they’re going to affect every element of that type in a styled document. You simply need to know what the tag is for a given element in order to style it.
Unlike HTML, we don’t need angled brackets around the tag name, just the tag itself. For example, to style a paragraph you’ll use “p”, for h1 headings you’d use “h1”, for unordered lists you’d use an “ul” and so on. While these selectors are efficient, they’re also very broad, which is why they’re mostly used to set global, site-wide styles.
Another basic selector type is the Class Selector. Classes are HTML attributes that can be seton any HTML element. You can name a class anything you want and you can use it on as many elements and as many times on the page as you need. In the image below, for example, the browser would look through all the elements on the page and apply styling to any elements with the class attribute of “subheading.”
Note that classes are identified in CSS by the period in front of their name.
Next, ID Selectors are similar to Class Selectors in that they represent an HTML attribute. They differ from classes in one very important aspect: IDs must be unique to the page. Meaning that if you assign an ID to a page element, no other element on that page may have that specific ID. In this example, the browser would find the element on the page that has the ID attribute of “sidebar” and then apply styling.
IDs are identified by the octothorps, or as is more commonly known, the pound symbol, in front of the ID name. For those more Twitter oriented, you could also call it the hashtag symbol.
You can also make a Class and ID Selectors element-specific by adding an element to the front of the selector. This limits the styling to only elements with the specific class or specific ID applied to it. For example, below, styling will only be applied to h2 headings with a class of subheading, or divs with an ID of sidebar.
This allows you write a single general class or ID style and then follow that with a more focused element-specific style, if necessary. Also, here are three important things to remember:
Another type of selector is the Descendent Selector. These selectors allow you to target an element based on where it’s found within another element. You simply string the selectors together, separating them with white space. The parent selectors are added first, followed by each successive nested selectors.
For example, in the above image, the browser would find any span elements inside of paragraphs elements which were also inside of div elements.
Below, are a couple of examples of how this would work. In the first example, the browser would locate any paragraph found within a div tag, and then apply the styling. In the second one, it would find any span element inside of the paragraph, which is also inside of a div and then apply the styling.
You can also group selectors together by using commas between the selectors themselves. This can make writing styles more efficient; by grouping selectors together, they don’t need the same styling. Instead of writing three separate selectors like on the left, you can simply write one Group Selector on the right.
Previously, we talked about being consistent with the CSS rules that you create when applying styles. The same could also be said when structuring your website with HTML. New authors often structure the same content in different ways on different pages. This makes it considerably harder to write global styles for the entire site. Below is an example.
On page one it’s structured with a div tag, on page two with a block quote and on page three with simple paragraph tag. To style this consistently across the site, you’d need several different rules that are essentially doing exactly the same thing. By establishing a guideline for how content should be structured , and then making sure that you’re consistent in following those guidelines, you can mean the process of writing styles much easier for yourself.