CSS is the language we use to style a Web page.
This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you'll learn how the core aspects of CSS work and how to use them effectively in your projects.
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
- CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
Bellow a very basic CSS example:
body {
background-color: lightblue;
}
h1 {
color: brown;
text-align: center;
}
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:
- Simple selectors: select elements based on name, id, class
- Combinator selectors: select elements based on a specific relationship between them
- Pseudo-class selectors: select elements based on a certain state
- Pseudo-elements selectors: select and style a part of an element
- Attribute selectors: select elements based on an attribute or attribute value
The element selector selects HTML elements based on the element name.
/* CSS element Selector */
h1 {
color: darkblue;
}
h2 {
color: cadetblue;
text-align: center;
}The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
/* CSS id Selector */
#blue_h2 {
color: blue;
font-family: "Courier New", Courier, monospace;
}
#red_para {
color: red;
}The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
/* CSS class Selector */
.brown {
color: brown;
}
p.brown {
font-size: xx-large;
}The universal selector (*) selects all HTML elements on the page.
* {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}The grouping selector selects all the HTML elements with the same style definitions.
/* CSS Grouping Selector */
h1,
h2,
p {
font-size: medium;
}There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
With an external style sheet css file
├── index.html
└── style.cssThe index.html contains a link to the css file within the head tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn CSS - 004 How to insert CSS?</title>
<!-- My Stylesheet File -->
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<h1>How to insert CSS?</h1>
<h2>External CSS</h2>
<p class="external_css">
This paragraph was styled using an external CSS file
</p>
</body>
</html>The style.css contains therefore
.external_css {
color: blue;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}The internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn CSS - 004 How to insert CSS?</title>
<!-- My Stylesheet File -->
<link rel="stylesheet" type="text/css" href="./style.css" />
<!-- Internal CSS -->
<style>
.internal_css {
color: red;
font-size: 25px;
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>How to insert CSS?</h1>
<h2>External CSS</h2>
<p class="external_css">
This paragraph was styled using an external CSS file
</p>
<h2>Internal CSS</h2>
<p class="internal_css">
For this paragraph an internal css was used to change its style
</p>
</body>
</html>To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn CSS - 004 How to insert CSS?</title>
<!-- My Stylesheet File -->
<link rel="stylesheet" type="text/css" href="./style.css" />
<!-- Internal CSS -->
<style>
.internal_css {
color: red;
font-size: 25px;
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>How to insert CSS?</h1>
<h2>External CSS</h2>
<p class="external_css">
This paragraph was styled using an external CSS file
</p>
<h2>Internal CSS</h2>
<p class="internal_css">
For this paragraph an internal css was used to change its style
</p>
<h2>Inline CSS</h2>
<p style="color: blueviolet; text-align: center;">
Finally for this paragraph, the inline css was used for the styling
</p>
</body>
</html>Colors can be used under CSS using (i) predefined color names, (ii) RGB, (iii) HEX, (iv) HSL, (v) RGBA, or (vi) HSLA values.
In CSS, a color can be specified by its predefined color name. The following link includes the list of these colors.
We can set the background color for HTML elements using the background-color css property
<div class="basic" style="background-color: lime;">lime</div>
<p style="background-color:red;">Here is my paragraph...</p>We can set the color of text using the color css property
<h1 style="color: blue;">Hello World</h1>
<p style="color: fuchsia;">Lorem ipsum...</p>
<p style="color: aqua;">Lorem ipsum...</p>We can set the border color for HTML elements using the border css property
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
An RGB color value represents RED, GREEN, and BLUE light sources. In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue). RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
The 3-digit hex code is a shorthand for some 6-digit hex codes. The 3-digit hex code has the following form: #rgb where r, g, and b represent the red, green, and blue components with values between 0 and f.
HSL stands for hue, saturation, and lightness. In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness).
- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
- Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
- Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
<h1 style="background-color: rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color: #ff6347;">#ff6347</h1>
<h1 style="background-color: hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>Same as color name, but 50% transparent:
<h1 style="background-color: rgba(255, 99, 71, 0.5);">
rgba(255, 99, 71, 0.5)
</h1>
<h1 style="background-color: hsla(9, 100%, 64%, 0.5);">
hsla(9, 100%, 64%, 0.5)
</h1>body {
background-color: #bf2; /* same as #bbff22 */
}
h1 {
color: #00f; /* same as #0000ff */
}
p {
color: #c79; /* same as #cc7799 */
}