CSS Introduction in 5 minutes

//CSS Introduction in 5 minutes

CSS Introduction in 5 minutes

CSS stands for cascading style sheet. It is the layer of stylling over HTML elements. In this CSS introduction we’ll discuss the basics of CSS.

In the past it was common to use inline styling like this:

<div width=”200px” height=”100px”> Hello </div>

Then came the use of the inline style attribute:

<div style=”width: 100px; height: 100px”> Hello </div>

Then came the use of external CSS:

<div class=”block”> Hello </div>

+ CSS file containing

.block {
width: 200px;
height: 100px;
}

This saves a lot  of  time, since you can can apply very complicated styles to many elements, and you only have to write it out once in a CSS sheet instead of inline on each block.

HTML and CSS Files

Most websites consist out of HTML and CSS formatted files.

The HTML file contains the framework of elements, it will reference to an external CSS sheet. The CSS contains the styling rules that will be applied to the HTML elements.

Classes and ID’s

A class is a reusable CSS tag that can be used on multiple elements. An ID should only be used for one element.

  • Inside the HTML a class is denoted with class=””, and an ID with id=””
  • Inside CSS classes are denoted with a . and IDs with a #

Example:

HTML

<div class=”blue” id=”mike”></div>
<div class=”blue” id=”john”> </div>

CSS

.blue {color: blue;}
#mike {height: 20px;}
#john {height: 60px;}

This means:

HTML

<div “my name is mike,I have the blue class”></div>
<div “My name is john, I have the blue class”></div>

CSS

.blue {give elements with the blue class a blue color}
#mike {give mike a height of 20 pixels}
#john {give john a height of 60 pixels}

Result

<div “My name is mike, CSS made me blue and 20 pixels high”></div>
<div “My name is John, CSS made me blue and 60 pixels high”></div>

Multiple CSS sheets

An HTML file may define multiple CSS sheets that apply to its elements. CSS files are usually defined in thesection of a page.

Example:

HTML

<head>
<link rel=”stylesheet” type=”text/css” href=”https://www.hoasted.com/css/styles.css” media=”all”>
<linkrel=”stylesheet” type=”text/css” href=”https://www.hoasted.com/css/custom.css” media=”all”>
</head>
<div id=”mike” class=”blue”>
<div id=”john” class=”blue”>

CSS of styles.css

.blue {
color: blue;
}

#mike {
height: 20px;
}

#john {
height: 60px;
}

CSS of custom.css

#mike {
height: 200px;
color: red;
}

We now have two sheets, both telling the #mike element what to look like.

Style.css tells it to be blue (because of the .blue class) and 20px high (because of #mike).

Custom.css tells it to be red (because of #mike) ans 200px high (because of #mike).

The style that wins is the custom.css, because it is lower in thesection.

What you will often find in WordPress themes is that there is a style.css and a custom.css. Because the custom.css is usually lower in the

This means you don’t need to touch the styles.css to make style changes to a themed WordPress.

By | 2018-07-24T16:05:20+00:00 March 19th, 2015|0 Comments