A quick 5-minute CSS Series (introduction)

Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users.

how CSS works?

The browser converts the markup language and the CSS into the Document Object Model (DOM), which represents the document in computer's memory. Then, browser displays contents of the DOM.

CSS declarations of HTML tags

An example of a HTML tag is <p>.

<p>hello, I love to share.</p>

A CSS rule looks like this:
//tag selector { declaration;}
p {
   color: salmon; //property: value;
   background-color: honeydew;
}

yes, there are such adorable color names in existence. Check out this site for a hundred odd others.

So your text will turn out to be like this:

hello, I love to share.

Now that we have got the basics covered, let's move on to...

cascading an inheritance

  • Cascading priority (from highest to lowest) - author stylesheets, reader stylesheets, then the browser's defaults.
  • For inherited styles, a child node's own style has priority over style inherited from its parent.
  • The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.

CSS ID's and Classes

IDs have a higher specificity than classes

There can only be one ID in each page, i.e. they are unique.

If you need to have a style for more than one paragraph, use class. class can be used on multiple HTML elements that share the same style and one HTML element can have many different classes.

<p class="code-results">
   <span id="solely-unique" class="not-unique">
    Yea, ID is unique.
  </span>
  <span class="not-unique">
    Classes can be shared!
  </span>
  <span class="not-unique">
    and shared!
  </span>
</p>

#solely-unique {
  border: 5px solid salmon;
  border-radius: 2rem;
}
.not-unique {
  border: 3px solid grey;
  border-radius: 0.5rem;
  background-color: lightgrey;
}

result:

Yea, I am unique. Classes can be shared! and shared!

Notice that the styles ID, which has a higher specificity, doesnt get overridden by the same property declared in the class as shown in <span> element. However, the newly-declared property background-color in css class gets implemented on all three elements.

View full list of CSS properties and its inheritance from w3.org

more resources

MDN - Getting Started

[Look out for the rest of the series Friday of the 2nd and 4th week starting from 12 Feb 2016!]
Part II - more on specificity and inheritance.


523 0 1