CSS, short for Cascading Style Sheets, is a language used in web development to control the design and layout of web pages. It separates the content of a web page (written in HTML) from its visual presentation, making it easier to maintain and update the design of a website.
In this lesson, you will learn the basics of CSS and how it can be used to style HTML elements and make your websites visually appealing. By the end of this lesson, you will understand the syntax of CSS, how to apply styles to different HTML elements, and the concept of cascading and specificity. You will also learn about colors, fonts, margins, padding, and other important properties that can be used to enhance the look and feel of your web pages.
According to the Mozilla Developer Network (MDN) CSS is a stylesheet language used to describe the presentation of a document written in HTML. It allows you to specify how elements should be displayed, including their size, color, position, and other visual aspects.
There are three main ways to apply CSS to HTML: Internal, External, and Inline styles. Each method has its use cases and advantages.
Internal CSS is used to define styles within the <head> section of an HTML document using the <style> tag. This method is useful for styling a single web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 16px;
color: darkslategray;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of internal CSS.</p>
</body>
</html>
See the Pen Untitled by Mik M (@Mik-M) on CodePen.
External CSS involves linking an external stylesheet to an HTML document using the <link> tag. This method is ideal for applying a consistent style across multiple web pages.
Inside your workspace, create a directory and name it as you wish. Inside the directory, create two files:
Write the following CSS code inside the styles.css file:
styles.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 16px;
color: darkslategray;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of external CSS.</p>
</body>
</html>
The CSS styles declared inside the styles.css file are linked to the HTML code inside the index.html via the tag placed within the <head></head> tags. The href attribute of the tag should be assigned the path to the CSS file.
Inline CSS is used to apply styles directly to HTML elements using the style attribute. This method is useful for quick, temporary changes but should be avoided for larger projects as it can make the HTML code harder to maintain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: navy; text-align: center;">Welcome to My Website</h1>
<p style="font-size: 16px; color: darkslategray;">This is an example of inline CSS.</p>
</body>
</html>
Having your CSS in one place, such as an external stylesheet, will help make your code reusable and maintainable. Inline styles are only applicable to the elements they target and are not reusable, which can lead to duplicated code and increased maintenance efforts.
External and internal CSS is composed of selectors and declarations. A selector targets or selects the HTML element(s) you want to style, and declarations specify the properties and values to apply.
selector {
property: value;
}
p {
color: darkslategray;
font-size: 16px;
}
In this practical example, the selector p, also referred to as an element selector, targets all <p> or paragraph elements. The declarations set the text color to darkslategray and the font size to 16px. The content inside the curly braces is called the declaration block, and each line within it that ends with a semicolon is known as a declaration.
The following are examples of some common CSS properties:
color: navy;
font-size: 20px;
margin: 10px;
padding: 5px;
The CSS box model is a fundamental concept for designing and layout of web pages. It describes how the elements on a web page are structured and how they interact with each other. Each element is considered as a rectangular box and includes the following components:
div {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Example</title>
<style>
div {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div>This is an example of the box model.</div>
</body>
</html>
Understanding color theory is essential for creating visually appealing web designs. CSS allows you to define colors in several ways: color names, hexadecimal values, RGB, and RGBA.
CSS supports 140 standard color names.
Here’s the enhanced version tailored for GitHub Pages:
CSS supports 140 standard color names, allowing you to easily apply a wide range of colors to your elements.
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
color: darkslategray;
}
For a reference to all the supported standard color names, take a look at this page.
Hexadecimal values are six-digit codes representing colors, starting with a #.
body {
background-color: #f0f8ff; /* AliceBlue */
}
h1 {
color: #000080; /* Navy */
}
p {
color: #2f4f4f; /* DarkSlateGray */
}
RGB values define colors using the Red-Green-Blue model. RGBA is similar but includes an alpha channel for opacity.
body {
background-color: rgb(240, 248, 255); /* AliceBlue */
}
h1 {
color: rgb(0, 0, 128); /* Navy */
}
p {
color: rgba(47, 79, 79, 0.8); /* DarkSlateGray with 80% opacity */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Values Example</title>
<style>
body {
background-color: rgb(240, 248, 255); /* AliceBlue */
color: #333333; /* Dark gray */
}
h1 {
color: rgb(0, 0, 128); /* Navy */
}
p {
color: rgba(47, 79, 79, 0.8); /* DarkSlateGray with 80% opacity */
}
</style>
</head>
<body>
<h1>Understanding Color Values</h1>
<p>Using different color values can make your website more attractive and easier to navigate.</p>
</body>
</html>
CSS uses various units to define the size of elements, including px, percentages, em, and rem.
Pixels are a fixed unit representing a specific number of screen dots.
p {
font-size: 16px;
width: 200px;
}
Percentages are relative to the size of the parent element.
div {
width: 50%; /* 50% of the parent element's width */
height: 50%; /* 50% of the parent element's height */
}
<html>).body {
font-size: 16px;
}
p {
font-size: 1.5em; /* 1.5 times the font-size of the parent element */
}
h1 {
font-size: 2rem; /* 2 times the font-size of the root element */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Units Example</title>
<style>
body {
font-size: 16px;
}
p {
font-size: 1.5em; /* 1.5 times the font-size of the parent element */
width: 50%; /* 50% of the parent element's width */
}
h1 {
font-size: 2rem; /* 2 times the font-size of the root element */
}
</style>
</head>
<body>
<h1>Understanding Size Units</h1>
<p>This paragraph uses relative size units.</p>
</body>
</html>
CSS follows the principles of cascading and specificity to determine which styles are applied to an element when multiple rules could apply.