***** On Monday, 9/3/18, I started learning the fundamentals of CSS on sololearn.com. *****

***** On Tuesday, 1/15/19, I completed the CSS Fundamentals course and was issued the certificate. *****

TAKE NOTE THAT THIS IS NOT A .CSS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, CSS WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA A LINK, EMBED, IMPORT AND/OR INLINE STYLES.

Module 1: The Basics

I. What is CSS?

CSS stands for Cascading Style Sheets.

Cascading refers to the way CSS applies one style on top of another.
Style Sheets control the look and feel of web documents.

CSS and HTML work hand in hand:

HTML sorts out the page structure.
CSS defines how HTML elements are displayed.

CSS allows you to apply specific styles to specific HTML elements.

The main benefit of CSS is that it allows you to separate style from content.

Using just HTML, all the styles and formatting are in the same place, which becomes rather difficult to maintain as the page grows.

All formatting can (and should) be removed from the HTML document and stored in a separate CSS file.

II. Inline, Embedded, External CSS

Inline CSS

Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element.

In order to use an inline style, add the style attribute to the relevant tag.

The example below shows how to create a paragraph with a gray background and white text:

Code:

<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>

Result:

This is an example of inline styling.

Take note that the style attribute can contain any CSS property.

Embedded/Internal CSS

Internal styles are defined within the <style> elements, inside the head section of an HTML page.

For example, the following code styles all paragraphs:

Code:

<html>
<head>
   <style>
   p {
color:white;
background-color:gray;
   }
   </style>
</head>
<body>
   <p> This is my first paragraph. </p>
   <p> This is my second paragraph. </p>
<body>
</html>

Result: All paragraphs will have a white font and gray background:

→ CLICK HERE FOR RESULT OF EXAMPLE_1.1! ←

Take note that an internal style sheet may be used if one single page has a unique style.

External CSS

With this method, all styling rules are contained in a single text file, which is saved with the .css extension.

This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section.

i.e.

The HTML: (Code)

<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p> This is my first paragraph. </p>
<p> This is my second paragraph. </p>
<p> This is my third paragraph. </p>
</body>

Result:

This is my first paragraph.

This is my second paragraph.

This is my third paragraph.

The CSS: (Code)

p {
color:white;
background-color:gray;
}

Result: (HTML with External CSS)

→ CLICK HERE FOR RESULT OF EXAMPLE_1.2! ←

Both relative and absolute paths can be used to define the href for the CSS file. In our example, the path is relative, as the CSS file is in the same directory as the HTML file.

III. CSS Rules and Selectors

CSS Syntax

CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document.
A style rule has three parts: selector, property, and value.

For example, the headline color can be defined as:

h1 {color: orange;}

Where:

The selector points to the HTML element you want to style.

→ CLICK HERE FOR RESULT OF EXAMPLE_1.3! ←

Take note that the declaration block contains one or more declarations, separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.

Type Selectors

The most common and easy way to understand selectors are type selectors. This selector targets element types on the page.

For example, to target all the paragraphs on the page:

p {
color: red;
font-size: 130%;
}

→ CLICK HERE FOR RESULT OF EXAMPLE_1.4! ←

Take note that a CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

id and class Selectors

id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. Here is an example of an id selector:

The HTML: (Code)

<div id="intro">
<p> This paragraph is in the intro section. </p>
</div>
<p> This paragraph is not in the intro section. </p>

Result:

This paragraph is in the intro section.

This paragraph is not in the intro section.

The CSS: (Code)

#intro {
color: white;
background-color: gray;
}

To select an element with a specific id, use a hash character, and then follow it with the id of the element.

Result: The paragraph in the intro is affected by CSS.

→ CLICK HERE FOR RESULT OF EXAMPLE_1.5! ←

Class selectors work in a similar way. The major difference is that IDs can only be applied once per page, while classes can be used many times on a page as needed.

In the example below, both paragraphs having the class "first" will be affected by the CSS:

The HTML: (Code)

<div>
<p class="first"> This is a paragraph. </p>
<p> This is the second paragraph. </p>
<div>
<p class="first"> This is not in the intro section. </p>
<p This second paragraph is not in the intro section. </p>

Result:

This is a paragraph

This is the second paragraph.

This is not in the intro section

The second paragraph is not in the intro section.

The CSS: (Code)

.first {font-size: 200%;}

Result: The font of every first paragraph is doubled.

→ CLICK HERE FOR RESULT OF EXAMPLE_1.6! ←

To select elements with a specific class, use a period character, followed by the name of the class.
Do NOT start a class or id name with a number!

Descendant Selectors

These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to.

For example, to target only <em> elements in the first paragraph of the "intro" section:

The HTML: (Code)

<div id="intro">
<p class="first"> This is a <em> paragraph. </em> </p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section. </p>
<p> The second paragraph is not in the intro section. </p>

Result:

This is a paragraph.

This is the second paragraph.

This is not in the intro section.

The second paragraph is not in the intro section.

The CSS: (Code)

#intro .first em {
color: pink;
background-color; gray;
}

Result: The first "paragraph" text is pink, italicized, and has a gray background.

→ CLICK HERE FOR RESULT OF EXAMPLE_1.7! ←

Take note that the descendant selector matches all elements that are descendants of a specified element.

IV. CSS Comments

Comments

Comments are used to explain your code, and may help you when you edit the source code later.
Comments are ignored by browsers.

A CSS comment looks like this:

CSS Code:

/* Comment goes here */

Example code:

p {
color: green;
/* This is a comment */
font-size: 150%;
}

The comment does not appear in the browser:

Comments can also span multiple lines.

V. Style Cascade and Inheritance

Cascade

The final appearance of a web page is a result of different styling rules.

The three main sources of style information that form a cascade are:

The stylesheet created by the author of the page
The browser's default styles
Styles specified by the user

Inheritance

Inheritance refers to the way properties flow through the page. A child element will usually take on the characteristics of the parent element unless otherwise defined.

For example: Code

<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>

Result:

Since the paragraph tag (child element) is inside the body tag (parent element), it takes on any styles assigned to the body tag.

Go to top
« Previous 1 2 3 4 5 6 7 8 Next »