Click to share! ⬇️

What Is CSS (Cascading Style Sheets)? CSS is a method of applying rules to HTML documents to change or add style to the appearance of content in a website. Cascading Style Sheets keeps the content and the presentation independent of each other. Keeping this separation of content and presentation makes it easier to maintain the overall look of a website by allowing updates to be made to a central file instead of updating every single page individually. This helps to keep HTML clean, speeds up page load times, and makes page navigation easier.

CSS Is Flexible

CSS allows web designers to have a fine-grained control over the appearance of websites. This is because you are able to style a range of page properties such as text, font, font sizes, font colors, background colors, link colors, animations, transitions, and much more. CSS makes use of a Box Model. Block level elements on a web page are positioned and formatted using CSS. A block indicates a piece of content which often has a newline in the page markup, and visually appears as a block. Block level elements include things like div, p, h1, and other heading level tags. Img elements are actually inline, which means that unless they are floated in CSS they will flow horizontally with text and other inline elements. Block level elements will often have things like a margin, border, or background color applied to them. By applying layout and formatting rules to block level elements, one has control over the layout of web pages using Cascading Style Sheets.

CSS Formatting Rules

There are two sections of a formatting rule in CSS. The first is a selector, and the second is a declaration. A CSS Selector may be an individual html element, and id, or a class name. For example, here we use the h2 as our selector and anything between the braces { } is the declaration.

<!DOCTYPE html>
<html>

<head>
    <style>
        h2 {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS formatting rules</h2>
</body>

</html>

Each declaration has two parts. The first is the property, such as font-size, and the value of that property such as 20px. The example above has set all h2 elements to have a font size of 20 pixels. We only have one h2 on the page, but if there were 15 of them, all would follow this CSS rule. Here is another way of looking at the CSS syntax.

Three ways to insert CSS

There are three ways you can include CSS in a web page. These are as follows:

External Stylesheet
Interal Stylesheet
Inline Style

External Style Sheet

An external stylesheet is the most common way of including CSS in a website. This is because with the external style sheet, the web designer has one location that can be used to adjust the style for any element in an entire website. Here is an example of an HTML document referencing an external stylesheet.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="externalstylesheet.css">
</head>

<body>
    <h2>CSS formatting rules</h2>
</body>

</html>

Internal Style Sheet

The internal style sheet (or embedded) is what we used for the very first example in this tutorial. In this scenario, you simply place opening and closing <style> tags in the <head> section of the html markup. Once again, here is an example of the Internal Style Sheet.

<!DOCTYPE html>
<html>

<head>
    <style>
        h2 {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS formatting rules</h2>
</body>

</html>

Inline Style Sheet

The Inline Style Sheet is kind of the method of last resort when setting up CSS formatting rules. This approach applies the CSS style rules directly to the HTML element. This mixes content with presentation which is not a great idea. This is an example of an inline style.

<!DOCTYPE html>
<html>

<head>
    <style>
        h2 {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h2 style="font-size: 30px;">CSS formatting rules</h2>
</body>

</html>

In this example, the inline style takes precedence so the font size on the h2 element would be 30 pixels. This leads to our next topic, Cascading.

What is meant by Cascading in CSS?

Cascading in CSS refers to the following process.

If the web designer does not explicitly style a web page, then the default styles will be assigned by the web browser being used.

If the designer does have a style sheet, those styles will override browser assigned styles.

In addition, this Cascading works within the same style sheet, between style sheets, and also between external style sheets and inline styles. An element defined in the top of a stylesheet could be overridden by a new definition that comes later in the stylesheet.

Ultimately, we refer to this Cascading process as Specificity. There are many rules that govern Specificity in CSS and if you think a certain element should have a certain style in your web page but it doesn’t, there is likely a Specificity rule you are missing. CSS Specificity is not simple, so you are likely to trip up from time to time.

Specificity levels come in four categories:

Inline styles (style in document): An inline style is within the HTML document. It is attached directly to the element to be styled. <h1 style=”color: #777;”>
ID (# of ID selectors): ID is an identifier for single page elements, such as #span.
Classes, attributes and pseudo-classes: This category includes .classes, [attributes] and pseudo-classes such as :hover and :focus
Elements and pseudo-elements (# of Element (type) selectors): Things such as h1, div, :before and :after.

If that wasn’t confusing enough, there is an actual point system which determines the “winner” when deciding which style will apply to an element based on the given Specificity and has the following format:

(1,0,0,0)

An inline style is worth 1000.
An ID is worth 100.
An attribute, class or pseudo-class is worth 10.
A single element or pseudo-element is worth 1.

Here are a few examples.

Selector	Specificity value
* { }	0*
li { }	1 (one element – 0,0,0,1)
li:first-line { }	2 (one element, one pseudo-element – 0,0,0,2)
ul li { }	2 (two elements – 0,0,0,2)
ul ol+li { }	3 (three elements – 0,0,0,3)
h2 + *[rel=up] { }	11 (one attribute, one element – 0,0,1,1)
ul ol li.first { }	13 (one class, three elements – 0,0,1,3)
li.last.winner { }	21 (two classes, one element – 0,0,2,1)
style=""	1000 (one inline styling – 1,0,0,0)
div p.special-text { }	12 (two HTML selectors and a class selector – 0,0,1,2)
#client-name { }	100 (one id selector – 0,1,0,0)
body #item-list .post p { }	112 (id selector, class selector, 2 HTML selectors – 0,1,1,2)

Practicing CSS Rules

So that is the fancy verbiage for CSS, but to really learn CSS you kind of just have to start trying out some examples. We can start with this basic website layout with no style at all.

<!DOCTYPE html>
<html>

<head>
    <title>Cascading Style Sheets</title>
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Example Website</h1>
        </div>
        <div id="content">
            <div id="nav">
                <h3>Navigation</h3>
                <ul>
                    <li>Home</li>
                    <li>Abouts</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div id="main">
                <h2>Front Page</h2>
                <p>Some interesting things happening.</p>
                <p>A second paragraph to explain more mildly interesting things.</p>
                <p>There are only three interesting things today. The end.</p>
            </div>
        </div>
        <div id="footer">

        </div>
    </div>
</body>

</html>

It’s about as exciting looking as you would imagine.
HTML document no style at all

Add External Style Sheet

We can begin by adding a dedicated CSS file to our project.
external style sheet example

Using The HTML <link> Tag

Once our new style.css file is created, we can link to it in our index.html file like this.

<!DOCTYPE html>
<html>

<head>
    <title>Cascading Style Sheets</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

We made use of three attributes of rel, type, and href. rel Specifies the relationship between the current document and the linked css file. type Specifies the media type of the linked document and href Specifies the location of the linked css file.

Adding CSS Background Color

As the first exercise, we can target the element on the page which has an ID of header. Then, we will set a background color on that element.
style.css

#header {
    background-color: deepskyblue;
}

css background-color example

Changing Text Color With CSS

We can change the color of text in an HTML document using the color property. Let’s make the text inside only the header area white.
style.css

#header {
    background-color: deepskyblue;
    color: white;
}

css text color example

Setting The Whole Page Background Color

We can apply a background color to the entire page by targeting the <body> element and setting the background-color property. We’ll make it a nice light gray color.
style.css

body {
    background-color: #efefef;
}

#header {
    background-color: deepskyblue;
    color: white;
}

body page css background color example

Setting The Page Container Background Color

Let’s now set the background-color of the #container element to be white. This will give a nice contrast between the light gray page background and the background color of the content area.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
}

#header {
    background-color: deepskyblue;
    color: white;
}

css gray background and white content background

Centering Text With CSS

By using the text-align property, we can center the text in the header of the website.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

css text-align center example

How To Center Page Content With CSS

Now we also want to center the overall page in the center. For this we can target the #container div, and use the width, margin-left, and margin-right properties. We will set the page width to 600px and each margin property needs to be set to auto.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

center page content css margin auto

Setting Padding In CSS

Looking at the page so far, we can see that the text bumps right up against the side, top, and bottom of the different page sections. To fix this cramped feeling, you make use of the padding property. We can start by targeting the #content div and adding some padding like so.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

css padding example on content

Introducing CSS Float

Now we want to introduce a concept that will drive you absolutely insane. That concept is the float property. What we want to do is put the #nav and the #main

elements side by side. We can do this by using a float with a value of left on one div, and a float with a value of right on the other. Let’s try that out.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

css float left and right example

Fixing Float With Clear

The float example above worked, as in it got the two divs to line up side by side. The problem however is that the #footer element is creeping up on the page and overlaying the content. To fix this we use the clear property. The code below says that the footer must be clear of any floating elements before being displayed. In fact this does work quite well. We also added some additional dummy text to show the effect.
style.css

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

#footer {
    clear: both;
}

css clear both example

Styling Active Links In CSS

We’ll need to adjust our HTML just a bit to add links in our navigation area. We will create three links and each will have a class. One link will have the class of active, while the other two links will have a class of notactive.
index.html

<!DOCTYPE html>
<html>

<head>
    <title>Cascading Style Sheets</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Example Website</h1>
        </div>
        <div id="content">
            <div id="nav">
                <h3>Navigation</h3>
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#" class="notactive">About</a></li>
                    <li><a href="#" class="notactive">Contact Us</a></li>
                </ul>
            </div>
            <div id="main">
                <h2>Front Page</h2>
                <p>Some interesting things happening. One, Two, and maybe three interesting things happening.</p>
                <p>A second paragraph to explain more mildly interesting things. We need more interesting things to
                    take up some space.</p>
                <p>There are only three interesting things today. This third interesting thing is likely the most
                    interesting thing. The end.</p>
            </div>
        </div>
        <div id="footer">
            © Home Page Inc.
        </div>
    </div>
</body>

</html>

Now in the style.css file we can target those specific links. In fact the two rules below are saying, we only want to target an element that has a class of .active or .notactive, and is a child of the #nav element.

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

#footer {
    clear: both;
}

#nav .active {
    font-weight: bold;
    color: green;
}

#nav .notactive {
    color: gray;
}

css style active vs nonactive links

Removing Hyperlink Underlines With CSS

Maybe we want to get rid of the underline on anchor tags in the page. We can do that with the text-decoration property set to none.

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

#footer {
    clear: both;
}

#nav .active {
    font-weight: bold;
    color: green;
}

#nav .notactive {
    color: gray;
}

a {
    text-decoration: none;
}

css text-decoration none example

Removing List Item Bullet Points With CSS

List items are a great way to lay things out on the page. Many times however, it is nice to get rid of the bullet points but keep the layout of the list. We can do this using list-style-type being set to none.

body {
    background-color: #efefef;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

#footer {
    clear: both;
}

#nav .active {
    font-weight: bold;
    color: green;
}

#nav .notactive {
    color: gray;
}

a {
    text-decoration: none;
}

#nav ul {
    list-style-type: none;
}

css list-style-type none example

Notice that there is still a gap to the left of the links. To remove this, we can also set padding to 0 like so:


#nav ul {
    list-style-type: none;
    padding: 0px;
}

This pushes the li items over to the left now.
list-style-type none with no padding example

Changing Typography With font-family

The standard font the browser renders is pretty bland. To have a more visually appealing font on the page, we can set the font-family property. The font-family property often holds several font names to fallback to just in case the first chosen one is not supported. This ensures maximum compatibility between browsers. If the browser does not support the first font, it tries the next font. Let’s target the Verdana, Arial, Helvetica, and sans-serif fonts.
style.css

body {
    background-color: #efefef;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

css font-family example

Making A Distinct Footer Area

We can use the padding, background-color, color, and text-align properties to make the footer area look more like a footer to round out the page.
style.css

body {
    background-color: #efefef;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
    background-color: white;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}

#header {
    background-color: deepskyblue;
    color: white;
    text-align: center;
}

#content {
    padding: 10px;
}

#nav {
    width: 150px;
    float: left;
}

#main {
    width: 400px;
    float: right;
}

#footer {
    clear: both;
    padding: 20px;
    background-color: darkgray;
    color: white;
    text-align: right;
}

#nav .active {
    font-weight: bold;
    color: green;
}

#nav .notactive {
    color: gray;
}

a {
    text-decoration: none;
}

#nav ul {
    list-style-type: none;
    padding: 0px;

}
css custom footer area

Padding In The Header

Lastly, we’ll add some additional padding to the header area to complete this very basic CSS layout that we have completed from scratch.


#header {
    background-color: deepskyblue;
    padding: 20px;
    color: white;
    text-align: center;
}

css header padding example

CSS Is Powerful!

Now, let’s look at the initial HTML rendering vs the finished layout which made use of only a very modest amount of CSS.

No CSS

No CSS at all

Finished CSS

css header padding example

CSS Crash Course Tutorial For Beginners Summary

In this tutorial we learned about CSS or Cascading Style Sheets. What did we learn?

How To Apply CSS – The three different ways you can apply CSS to HTML.
Selectors, Properties, and Values – You use selectors to target what you want to style, then properties and values to set the style.
Colors – Colors can be applied to backgrounds, text, links, and more.
Text – How to manipulate the font and shape of text.
Margins and Padding – Deals with how to add visual space on the page.
Build An Example Layout – Putting it all together gave us a nice demonstration of how the pieces fit together.

Click to share! ⬇️

Web Development