CSS

Cascading Style Sheets (CSS) is a design language for styling HTML documents. In modern websites, HTML controls the structure while CSS controls its presentation. Let's suppose that you have some HTML formatting in numerous pages across your website. Would you want to manually modify 10,000 HTML elements to implement the new formatting? Ideally, there should be one place where you can make a change that modifies that formatting everywhere you need in the website. Technical term for this concept is "modular design". This technology already exists and it is called CSS. CSS enables modular design of websites.

There are multiple versions of CSS. However, by 2015, all majors browsers are compatible with CSS3 so we will be covering CSS3.

CSS overrides browser's default styles

Every browser has default styles. It defines the default values for every element and every property. For example, it defines the size, font, color or <h2>. CSS styles overwrite the browser's default styles. If you ever come across a situation where you see something you did not define, it is coming from the browser's default styles.

Style Rules

CSS code is a collection of style rules such as make this bold, set color to bold, etc. A compatible browser is capable of interpreting the styles rules and implementing them. A style rule contains 3 parts:

  • Selector: the HTML element that the style will be applied to e.g. <font>
  • Declaration gives formatting instructions. A declaration has the format property:value
  • Property: the attribute of the HTML element e.g. color
  • Value: the value of the attribute e.g. blue

A sample style rule

selector { property:value }    
font { color: blue; }

Selectors

Following is an element selector:

b { color: blue; }

It applies to all instances of the HTML element. It is global and broad. You can apply same declaration to multiple elements as follows:

ul b { color: black; }

This style applies only when <b> is nested inside <ul>

The class attribute can be added to every HTML element. A class selector styleps every element containing that specific class. The following style:

.basecolor { color: red; }

will all apply to

<div class="basecolor"></div>
<h2 class="basecolor"></h2>

To be more specific:

p.basecolor { color: yellow; }

As you might have guessed, this only applies to

<p class="basecolor">

You can also apply muliple classes to a selector:

<p class="basecolor basesize">

You can also create selectors of ids:

<p id="urgent">
#urgent { color: red; }
  p#urgent { color: red; }
  #urgent p { color: red; }

You can group attribute/value pairs in a selector.

h3 {
  color: #abcdef;
  font-weight: normal;
  letter-spacing: .6em;
  margin-bottom: 2em;
}

h1, h2 {
  color: #bcdef0;
  font-weight: bold;
  letter-spacing: .6em;
  margin-bottom: 2em;
  text-transform: uppercase;
}

#header, #footer {
  position: absolute;
  left: 100px;
  width: 800px;
}

You can group attribute/value pairs in a selector.

h3 {
  color: #abcdef;
  font-weight: normal;
  letter-spacing: .6em;
  margin-bottom: 2em;
}

h1, h2 {
  color: #bcdef0;
  font-weight: bold;
  letter-spacing: .6em;
  margin-bottom: 2em;
  text-transform: uppercase;
}

#header, #footer {
  position: absolute;
  left: 100px;
  width: 800px;
}

Including CSS in HTML

There are 4 ways to include CSS in your HTML documents.

  • inline css
  • embed css
  • external css
  • import css

Inline CSS Here the style rule is embedded directly in a HTML tag using the style attribute.

<p style = "color:#abcdef;">Color this text</p>

Embed CSS This involves adding CSS inside a style tag inside the head tag as follows:

<html>
  <head>
  <style>
    body { background-color: white; }
    h1 {
      color: #abcdef;
      font-weight: normal;
      letter-spacing: .6em;
      margin-bottom: 2em;
    }
        p { color: black; }
  </style>
  </head>   
  <body>
    <h1>My Heading</h1>
    <p>text text text</p>
  </body>
</html>

External CSS With this method, you use a <link> tag to specify the CSS file somewhere on your server.

<html>
  <head>
    <link href="style.css">
  </head>
  ...
</html>

where style.css file contain the CSS code.

Import CSS This is used to import a CSS file from an external source.

<html>
  <head>
    @import "http://example.com/style.css"
  </head>
  ...
</html>

Conclusion

There is much more to CSS that what is covered here. However, I wouldn't recommend you to learn it all in detail. The market has move on and now CSS preprocessing languages i.e. languages that write the CSS for you. CSS is more important that it has ever been before but you no longer have to write CSS. It is essential for you to learn CSS to the point that is covered here. At this point you can understand CSS and if you have to troubleshoot it, you can do that using a reference or with the help of blogs.

Beyond this, you should learn one of both the dominant CSS preprocessing languages; LESS and SASS.

Technologies: