Introduction to CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
CSS (Cascading Style Sheets) are a collection of rules for how specific styles, such as colors, fonts, lengths, and positioning should be applied by the web browser to the HTML elements in your web page.
The basic syntax, and preferred formatting, of a CSS Rule block is shown below.
You can specify a comma-separated list of selectors.
You can specify multiple styles for each rule.
The property-name is the specific aspect of the element you want to style.
The property-name is the specific value for that property.
The first example is a single type selector for the body element with multiple styles. The second example of multiple selectors with a single style.
I've included a link to the Google CSS Style Guide below. Look specifically starting at section 4.2.2, where the more general formatting rules are.
These are the most common:
color
text color. named values, or numeric formats
background-color
background color. named values, or numeric formats
font-size
named sizes or different length units. default is 16px or 1 em.
font-family
Serif, Sans-Serif, etc...
font-weight
named weight, such as normal, bold, lighter, darker, or numeric value between 100-900 (400 is normal)
Think of each element on the page being a rectangular picture frame.
border
picture frame
margin
space outside of border (space between pictures on the wall)
padding
space inside of border (inside picture frame, around picture)
border-radius
rounding of corners
width, height
specific dimensions for content rectangle.
display
whether the element is inline, block, or inline-block.
1. Inline - styles are specified as attributes directly on the HTML elements.
2. Embedded Stylesheets - styles embedded directly in the html <style> element within the <head> section of the page.
3. External Stylesheets - styles are loaded from an external stylesheet referenced in a <link> element. The styles are no different between these two options, except for where they are located.
In addition to your own styles, the web browser provides a set of default styles.
The link below is for the default styles applied by the Chrome browser.
display to set block elements (h1-h6, p, hr)
font-size, font-weight for headings (h1-h6)
list spacing, icon type for bullets at different indentation levels
padding and margins - body has margin of 8px.
Below is a screen capture with no overrides except for colors to make it easier to see the margins and block elements. You can see that the font-size is different between the paragraph and the h1 and there is a margin around the content in the body. These are the default styles set in the user-agent stylesheet.
The web browser loads its default styles first, and then loads any styles defined by the web page author. If the the rule is repeated, the last one encountered will be used. For example, if our own stylesheet re-defined the h1 element to be an inline element instead of block, our rule would override the defined by the web browser.
The same would be true if you re-defined the same style later in the same stylesheet file or in a stylesheet file that was loaded after the initial definition. The rule is that the last definition will be used.
Inheritance is where some CSS properties are passed down the inheritance tree.
In the next screen capture, the background color and text transform have been overridden in the descendent elements.
Text-related properties are typically inherited. For example, font-family, font-size, font-style, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform, and word-spacing.
Some list styles are inherited. For example, list-style-image, list-style-position, list-style-type.
Text and background colors are inherited. For example, color (text color) and background-color.
It's pretty intuitive which styles are inherited and which are not. Inheritance of CSS styles is there to make the web developer's job easier, so it is applied for those elements where it makes sense.
Styles that you wouldn't want to be inherited are ones like borders, padding, margins.
For example, in the screen capture below the paragraph element has been set to have a dark cyan border. There is a span element within the paragraph, but it is not inheriting the border style.
If the border style was inherited it would look like the screen capture below, which is obviously not what we would want.
The "selector" selects which elements on an HTML page will be affected by the rule. All of the styles within the selector block will be applied to the selected elements.
There are many ways to select an element. To start off, we'll focus on the three primary ways:
ID: The ID selector targets any HTML element that has the relevant ID attribute value.
Type: The type selector targets every instance of the element type regardless of their position in the document tree.
Class: The class selector targets any HTML element that has the relevant class attribute value.
As you can see, there are lots of ways to target the same elements. So, how do you know which type of selector to use? Here are some general guidelines:
most of your styles will use class selectors, as they are re-usable across multiple elements.
reserve the use of type selectors for global settings, or values you want to be inherited.
use id selectors very infrequently, as they are very specific and don't adapt to changes in surrounding styles.
These two selectors are used to target descendants of a given element. The child selector targets the immediate children, whereas the descendant selector targets any descendant.
Child Selector: parent > child.
Descendant Selector: parent descendant.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). The most frequent use-case for pseudo classes are for styling links based on the different states:
:hover - when the mouse hovers over link
:link - default style for link
:visited - style after link has been clicked/visited
You'll need to try this out yourself to test the hover style being applied.
There are a lot more selectors, but it's better to focus on these before moving on to the more advanced ones, such as combining selectors, attribute selectors, nth-child selectors and more. For the full list, consult MDN.
There can be multiple selectors, each setting the same properties, that target the same element. For example, a selector for the font property could be set on the body element, as well as a paragraph element.
When this happens, the browser needs to apply a set of rules to determine which selector will be applied to the element.
This is known as the specificity of the selector, or how strongly that selector binds to the element. The specificity, is given below from top (highest specificity) to bottom (lowest specificity):
inline style (style attribute on element)
id attribute on element
class attribute on element
type selector in stylesheet
As you have learned, there are many different origins for a style (web browser defaults, inline, style element, and external CSS files) and there are many different rules for how to resolve which style should be applied when there are multiple rules targeting the same element and style. The algorithm the web browser uses to apply the correct styles is what makes up the "Cascade" in Cascading Style Sheets.
