Learn CSS

CSS, or Cascading Stylesheets, is a stylesheet language used to describe XML based Markup. Along with javascript & html, it’s one of the most important web-based technologies (and a cornerstone for most modern websites).

See this blue text, or this underlined word? That’s all CSS telling your browser how to display HTML. CSS works by applying a series of rules to HTML nodes. You filter which HTML you want each rule applied to by using selectors.

Adding Css

There are 3 ways to inject CSS into your HTML document.

1. External Stylesheets

View the page source for Cadence Labs – or any web page for that matter – you’ll see almost all the CSS is included in an external document, called a stylesheet. It should look something like this:

<link rel="stylesheet" type="text/css" href="/path/to/some/styles.css" />

Like I said, almost all CSS is loaded in this external document (generally named styles.css or style.css as a convention). Why?

Encapsulation – placing all your content in an external CSS file makes it easy to have all your display/styling logic in one place
Re-usability – This stylesheet can be included on any number of pages (or websites for that matter) without having to copy the code from page to page

Good Habits

A good habit is to always load your external stylesheets before any other assets on the page, in the <head> section. Not doing so will result in your website being penalized by google for not following “best practices.” The reason is that placing stylesheets in the <body> section slows down the page. To fully understand why, checkout this article by google.

2. Inline CSS

Inline CSS is a handy way to update a single tag. Take a look at the below


<span style="color: red;">Red Text</span>

This should output Red Text. You can see that HTML allows us to place the css in attribute called *style* (this is usually called inlining the css).

3. <Style> Elements

Finally, we can actually create an HTML node called <style> to put additional css into:

<style>
body * {
color: red;
}
</style>

As you can see, we have a variety options.