Learn CSS

CSS stands for Cascading Style Sheets. It's a stylesheet language used to describe the presentation of a document written in HTML. CSS is a domain-specific language and is design for a single purpose: to make HTML look good.

Using CSS

In web design, CSS is used to style and layout HTML elements. By using CSS, you can change the font, color, size, background images, position and more of HTML elements. With CSS, you can create visually appealing designs and layouts for websites.

Here's an example of how you can use CSS to style an HTML element:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <style>
      /* CSS code goes here */
      h1 {
        color: blue;
        font-size: 24px;
        font-weight: bold;
      }

      p {
        color: gray;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

In this example, we have defined two CSS rules: one for h1 element and one for p element. The h1 rule changes the color, font-size, and font-weight of the h1 element, while the p rule changes the color and font-size of the p element.

Apply a Rule

In CSS, a rule consists of a selector and a declaration block. The selector selects the HTML element(s) that the rule will be applied to, while the declaration block contains the CSS properties and values that define the style of the element.

Here's an example of a CSS rule:

h1 {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

In this example h1 is the selector and the curly braces {} represent the declaration block. The properties color, font-size, and font-weight are defined in the declaration block with their respective values.

A single rule can be used to style multiple elements by separating the selectors with commas. For example:

h1, h2 {
  color: blue;
  font-weight: bold;
}

In this rule, both h1 and h2 elements will have blue color and bold font-weight. By combining selectors in a rule, you can apply the same style to multiple elements without duplicating the declaration block for each selector.

Class selector

In CSS, a class selector is denoted by a period (.) followed by the class name. A class selector selects all HTML elements that have the specified class attribute.

Here's an example:

<div class="container">
  <h1 class="title">Hello World!</h1>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

In this example, we have three HTML elements — a div, an h1, and a p element. The h1 and p elements both have a class attribute with the values title and text, respectively.

To select the elements with a specific class name, we can use the following CSS selector:

.title {
  font-size: 32px;
  font-weight: bold;
}

.text {
  font-size: 16px;
  line-height: 1.5;
}

These selectors will target the h1 element with title class and p element with text class, respectively. We can define any CSS properties we want for the selected elements.

The advantages of class-based selectors are:

Reusable Code: When we define a class, we can apply the same styles to multiple elements throughout the entire page or website. This means we do not have to rewrite the same CSS code for each element of the same type.
Easy Maintenance: When we use class-based selectors, we can easily update the styles for all elements sharing the same class name, just by modifying the rules defined for that class. This can greatly simplify the process of updating and improving the design of your website.
More Specific Styles: By assigning classes to elements, we can create more specific styles that target only certain elements, rather than all of them. This can help us to create a more unique and custom look for our website, without having to change the HTML structure or create a lot of additional CSS code.

ID selector

In CSS, an ID selector is denoted by a hash (#) followed by the ID value. An ID selector selects a single HTML element that has the specified ID attribute.

Here's an example:

<div id="header">
  <h1>Welcome to my Website</h1>
</div>

In this example, we have a div element with an ID attribute of header.

We can use the following CSS selector to select the element with that ID:

#header {
  background-color: #333;
  color: #fff;
}

This will select the div element with an id of header, and apply the defined styles to it.

The use cases of ID selectors are:

Unique Styling: Since IDs are unique, we can use ID selectors to apply specific styles to a particular element that cannot be used more than once throughout the page. For example, we can give a unique look to the header, navigation bar, footer, or any other element that serves a specific purpose.
Navigation: ID selectors can be used to create anchor links to different sections of the page, such as the table of contents or a summary section. When users click on the link that corresponds to a particular ID, they are scrolled down to that section on the page.

It should be noted that overuse of ID selectors can make the style sheet bulky and less efficient. IDs should be used only when necessary. Classes are preferred for styling elements that appear more than once on the same page.

Combined Selectors

In CSS, combine selectors are selectors that help in selecting an element that matches multiple different selectors. There are three ways to combine selectors in CSS:

Combining Selectors with a Space (" "): This selects all descendants of the first selector that match the second selector. Here's an example:

<div>
  <p>Welcome to my website</p>
</div>

div p {
  color: red;
}

This will select the <p> element inside the <div> element and apply the defined style to it.

Combining Selectors with a Greater Than Sign (">"): This selects only the immediate descendants of the first selector that match the second selector. Here's an example:

<div>
  <div>
    <p>Welcome to my website</p>
  </div>
</div>

div > p {
  color: red;
}

This will select only the <p> element inside the first div element and apply the defined style to it.

Combining Selectors with a Plus Sign ("+"): This selects the first element that directly follows the first selector and matches the second selector. Here's an example:

<p>First paragraph</p>
<p>Second paragraph</p>
<div>
  <p>Third paragraph</p>
</div>

p + p {
  color: red;
}

This will select the second <p> element and apply the defined style to it, as it directly follows the first <p> element.

The use cases of combing selectors in CSS are:

Advanced Styling: Combining selectors can provide a powerful way to apply advanced styles with less code. For example, we can create a specific style for a div. However, if we want to apply that style only to specific headings inside the div, we can use the descendant selector "div h1" or greater than selector "div > h1". This allows us to add complex elements and styles without cluttering the CSS code.
Specificity: Combining selectors can help create more specific selectors for particular elements. If you want to target a single element that has specific classes and attributes, combining selectors is a good way to accomplish that.

These are some examples of how to combine selectors in CSS.

Common Properties

Common CSS properties are those that are used across many different CSS applications and web development projects. These properties can be used to control the visual aspects of a webpage, including layout, text styling, borders, backgrounds, and more. Here are some examples of common CSS properties, along with values that can be used to control specific elements on a webpage:

Color: This property sets the color of text. The value can be a color keyword, a hex value, an RGB value, or an HSL value.

/* Use color keywords */
h1 {
  color: red;
}

/* Use hex value */
p {
  color: #333;
}

/* Use RGB value */
span {
  color: rgb(255, 0, 0);
}

/* Use HSL value */
a {
  color: hsl(120, 100%, 50%);
}

font-family: This property sets the font for an element. The value can be a single font family name, a list of font family names, or a generic font family name.

/* Set a single font */
p {
  font-family: "Open Sans";
}

/* Set a list of fonts */
h1 {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

/* Use generic font family name */
blockquote {
  font-family: serif;
}

Background-color: This property sets the background color for an element. The value can be a color keyword, a hex value, an RGB value, or an HSL value.

/* Use color keyword */
body {
  background-color: gray;
}

/* Use hex value */
div {
  background-color: #f2f2f2;
}

/* Use RGB value */
section {
  background-color: rgb(255, 255, 255);
}

/* Use HSL value */
article {
  background-color: hsl(0, 0%, 97%);
}

Border: This property is used to create a border for an element. It can be used to set the border width, style, and color.

/* Set border width */
section {
  border-width: 2px;
}

/* Set border style */
div {
  border-style: solid;
}

/* Set border color */
blockquote {
  border-color: #ccc;
}

/* Short-hand border property */
p {
  border: 1px solid black;
}

Padding: This property is used to control the spacing between an element's content and its border.

/* Set padding for all sides */
div {
  padding: 25px;
}

/* Set padding for top and bottom only */
section {
  padding-top: 20px;
  padding-bottom: 10px;
}

/* Set padding for all sides individually */
p {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}

These are just a few examples of common CSS properties that are used in web development. By applying these properties with various values, you can create unique designs that fit your intended aesthetic.

Color Representation

In CSS, colors can be represented in several ways, including keywords, hexadecimal (hex) values, RGB values, RGBA values, HSL values, and HSLA values. Here's an overview of each representation:

Keywords:

CSS has a set of predefined color keyword values that can be used to set the color of text, backgrounds, borders, and other elements. Some of the most common color keywords include red, blue, green, yellow, black, and white. Here's an example that sets the color of a h1 element to green:

h1 {
  color: green;
}

Hexadecimal values:

Hexadecimal color values use a combination of six characters, ranging from 0-9 and A-F, to represent the amount of red, green, and blue in a color. They are represented by the # symbol followed by six characters. Here's an example that sets the background color of a div element to purple:

div {
  background-color: #8B008B; /* Dark Magenta */
}

RGB values:

RGB (Red, Green, Blue) color values use different combinations of three numbers ranging from 0-255 to create a color. They can be represented in CSS as the rgb() function, with each value separated by commas. Here's an example that sets the border color of a section element to a shade of blue:

section{
  border-color: rgb(0, 0, 255); /* Blue */
}

RGBA values:

RGBA (Red, Green, Blue, Alpha) color values use different combinations of four numbers ranging from 0-255 and a decimal value from 0 to 1 to create a color. They can be represented in CSS as the rgba() function, with each value separated by commas. The Alpha value specifies the transparency or opacity of the color. Here's an example that sets the background color of a div element to a light blue with 50% transparency:

div {
  background-color: rgba(0, 191, 255, 0.5); /* Light Blue with 50% transparency */
}

HSL values:

HSL (Hue, Saturation, Lightness) color values define colors based on their hue, saturation, and brightness. Hue is represented in degrees ranging from 0 to 360, Saturation and Lightness are represented as percentages ranging from 0 to 100. HSL values can be represented in CSS as the hsl() function, with these three values separated by commas.

Here's an example that sets the background color of a div element to a shade of blue:

div {
  background-color: hsl(240, 100%, 50%); /* Blue */
}

HSLA values:

HSLA (Hue, Saturation, Lightness, Alpha) color values are similar to HSL values, but with transparency value included. They can be represented in CSS as the hsla() function, with these four values separated by commas. Here's an example that sets the background color of a div element to a light blue with 50% transparency:

div {
  background-color: hsla(195, 100%, 50%, 0.5); /* Light Blue with 50% transparency */
}

By using any of these color representations in CSS, you can set the color of various elements on a webpage, such as fonts, backgrounds, borders, and other styles, and create any visual effect you desire.

Pixels (px): Pixels are a measurement unit that represents the number of dots (or pixels) that make up the height and width of a character. This unit is frequently used to make text element look sharp on devices no matter the resolution. An example of using pixels to set font size for an element is:

p {
  font-size: 14px;
}

Em (em): An em is the width of the letter "M" in the currently selected font. This means 1em is different from one font family to the other. Em is a relative unit that scales with its direct parent. It's useful when designing responsive websites. An example of using em to set font sizes is:

p {
  font-size: 1.25em; /* 125% of the parent element's font-size */
}

div {
  font-size: 1.5em; /* 150% of the parent element's font-size */
}

Percentage (%): The percentage (%) is another relative unit that scales with the font size of the parent element. It sets the font-size, relative to the parent element’s font size. An example of using percentage to set font size is:

p {
  font-size: 150%; /* 150% of the parent element's font-size */
}

Rem (root em): Another relative unit that is based on the font size of the root element (html tag). This, in comparison to using em, doesn't depend on the direct parent of the element. The measurement has become increasingly popular to define typography in CSS. An example of using rem to set font size is:

html {
  font-size: 16px;
}

p {
  font-size: 1.25rem; /* 20px (if the root element's font-size is 16px) */
}

Viewport width (vw): The viewport width (vw) unit sets the font size based on the viewport width which is a percentage of the entire browser’s width. This unit is useful when designing responsive websites. An example of using viewport width to set font sizes is:

h1 {
  font-size: 7vw; /* 7% of the viewport width */
}

With these measurement units, it's easy to define and adjust font sizes for text elements in any webpage. Remember to choose the right font and font size that aligns with the design and purpose of your webpage.

External CSS

External CSS refers to a way of creating and implementing CSS styles in a web page by putting them in an external CSS file separate from the HTML document, which makes it easier to manage the styles of multiple pages. Link tag is the HTML tag used to link to the external CSS file.

The link tag should be placed inside the head section of the HTML file, and it is set up with the rel attribute set to "stylesheet", the type set to "text/css", and the href attribute pointing to the external CSS file like this:

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

In the CSS box model, there is a concept of property inheritance where properties of elements can be passed down to their children elements. This means that child elements inherit the properties of their parents by default. For instance, if we set a font size of 16px on the body of an HTML page, it will be inherited by all the child elements of the body unless overridden by a more specific CSS selector.

Property override is the way that CSS deals with conflicting styles from different sources. Whenever there is a conflict between styles in CSS, the last style defined takes precedence over previous ones. This means that if there are two styles in your code defining the same property, the later rule will override the earlier rule.

For example, suppose we have defined a font-size of "20px" in a CSS file and then defined a font-size of "16px" for a specific element in another CSS file. In that case, the font-size of the specific element will be "16px" because it overrides the previous font-size style defined.

However, this does not apply to all CSS properties. Some properties such as backgrounds, margins, and paddings can be added up in the parent-child chain to create a final value.

CSS Box Model

The CSS box model is a concept that defines the content area, padding, border, and margin of an HTML element. The border model, in particular, deals with the border area. The border represents the space or area between the padding and the margin of an HTML element. It consists of the following four parts:

Border width: This refers to the size or thickness of the border, which can be set with the CSS border-width property.
Border style: This defines the style of the border, such as solid, dotted, dashed, double, and so on. It can be set with the CSS border-style property.
Border color: This sets the color of the border, which can be a named color, RGB value, or hexadecimal value. It can be set with the CSS border-color property.
Border image: This allows you to use an image as a border instead of a solid or dotted line. It can be set with the CSS border-image property.

Here's a diagram of the CSS box model using Unicode characters:

Here's an example of how to apply the CSS border property to an HTML element:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Border Example</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: #f1f1f1;
            border: 2px solid black;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>This is an example of a box with a border, padding, and margin.</p>
    </div>
</body>
</html>

In this example, the CSS border property is set to 2px solid black, which creates a solid black border that is 2 pixels thick around the .box element. The padding and margin properties are also set to create the spaces between the content and border and between the border and the outside of the element.

Disclaim: This article is created with ChatGPT for the basics of CSS. There is more to learn about CSS. Sponsor me or try to ask the questions yourself. In my free time I will post more articles.

Learn fast and prosper. Life is short.