Course Dashboard

CSS Building Blocks

What is CSS?

CSS (Cascading Style Sheets) allows you to create great-looking web pages.

HTML is used to mark up documents. These documents will be readable in a web browser. Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored and underlined to distinguish them from the rest of the text.

What you are seeing are the browser's default styles, very basic styles, that the browser applies to HTML to make sure that the page will be basically readable even if no explicit styling is specified by the author of the page.

However, the web would be a boring place if all websites looked like that. Using CSS, you can control exactly how HTML elements look in the browser, presenting your markup using whatever design you like.

CSS Syntax

CSS is a rule-based language. You define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.

For example, you can decide to have the main heading on your page to be shown as large red text.

h1 {
  color: red;
  font-size: 5em;
}

The CSS rule opens with a selector. We then have a set of curly braces { }. Inside the braces will be one or more declarations, which take the form of property and value pairs.

CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.

CSS Selectors

In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.

A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document. Type selectors are not case-sensitive.

The universal selector is indicated by an asterisk (*). It selects everything in the document.

The case-sensitive class selector starts with a dot (.) character. It will select everything in the document with that class applied to it.

The case-sensitive ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them.

Attribute selectors: These selectors enable the selection of an element based on the presence of an attribute alone (for example href), or on various different matches against the value of the attribute.

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. Pseudo-classes are keywords that start with a colon. For example, :hover is a pseudo-class.

Pseudo-elements behave in a similar way. However, they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::. ::before is an example of a pseudo-element.

Combinators: They combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.

  • Descendant (space)
  • Child (>)
  • Next-sibling (+)
  • Subsequent-sibling (~)

The Box Model

Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items.

In CSS we have several types of boxes that generally fit into the categories of block boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page.

If a box has an outer display type of block, then:

The box will break onto a new line.

  • The width and height properties are respected.
  • Padding, margin and border will cause other elements to be pushed away from the box.
  • If width is not specified, the box will extend in the inline direction to fill the space available in its container.

If a box has an outer display type of inline, then:

  • The box will not break onto a new line.
  • The width and height properties will not apply.
  • Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
  • Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

inline-block is a special value of display, which provides a middle ground between inline and block. Use it if you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping seen above.

  • The width and height properties are respected.
  • The padding, margin, and border will cause other elements to be pushed away from the box.

What is the CSS box model?

The CSS box model as a whole applies to block boxes and defines how the different parts of a box, margin, border, padding, and content, work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.