CSS Part 1

Sumit included in Web Dev

25-05-2024 2300 words 11 minutes

Contents

Navigation system works on the concept of linked list.

Note

Use the table of contents to navigate to the portion that you are interested in.

1. Introduction

What is CSS?

Cascading Style Sheet, often abbreviated as CSS is a stylesheet language used to describe the look and formatting of a document written in HTML.

Why use CSS?

CSS allows you to apply different styles to different elements in your HTMML document.
It gives you control over the visual presentation of your site and helps to separate the design from the content.
Improves site maintenance, ensure consistency, and allows for site-wide changes with minimal effort.

Basic CSS Syntax

A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolon.

1
2
3


selector {
    property: value;
}

Applying CSS to HTML

inline CSS : With this method, you use the style attribute directly within an HTML tag to apply CSS.
Internal CSS : This involves placing CSS rules within <style> tags in the HTML document’s <head> section.
External CSS : This is the most common way to apply CSS. Styles are placed in a separate .css file which is then linked to the HTML document using the <link> element.

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element. This method of insertion applies the CSS rules directly into the HTML file.

1

<p style="color:blue;">This is a paragraph with inline css.</p>

output of above HTML code

This is a paragraph with inline css.

Internal CSS

Internak CSS, also known as embedded CSS, is used to apply CSS to a whole HTML page. The CSS rules are put in a <style> block in the <head> section of the HTML file.

1
2
3
4
5


<style>
    p {
        color: red;
    }
</style>

External CSS

External css involves creating a separate .css file and linking it to your HTML document. This method of insertion aids in minimizing code redundancy and promotes reusability.
Example:

First create an external css file inside your project folder.(styles.css)

1
2
3


p{
    color: green;
}

Then, link this css file to your HTML document.

1
2
3
4
5
6
7
8
9


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>This is a paragraph with external css.</p>
    </body>
</html>

CSS Comments

Comments in CSS are used to explain your code and can help you and others understand the purpose of the code. All CSS comments start with /* and end with */, and anything between these will be ignored by the browser.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* this is a single line comment */

    /* 
    this is a 
   multi-line comment 
    */

p{
    color: blue;
    font-size: 20px;
    margin: 30px;
}

2. CSS Selectors

CSS selectors

Selectors are the means by which CSS identifies which HTML elements to style. Here are some basic types of selectors:

Tag selectors : Selects HTML elements based on the element (tag) name.
ID selectors : Selects a specific element based on its unique ID.
Class selectors : Selects elements based on their class attribute.
Attribute selectors : Selects elements based on an attribute or attribute value.
Pseudo-class selectors : Selects elements based on a certain state.
Pseudo-elements selectors : Select elements based on their position in the document.

CSS properties and values

Once you’ve selected an element, you can apply styles to it using properties and values. Properties are what you want to style, and values are the styles that you apply to those properties.
Here’s how you can use the different types of selectors in CSS:

Tag Selector
Class Selector

1
2
3
4
5
6
7
8


/* Tag Selector */
p {
    color: blue;
}
/* Class Selector */
.my-class {
    font-size: 20px;
}

CSS selectors

ID Selector
Universal Selector
Attribute selector
Pseudo-class selectors

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/* ID Selector */
#myID {
    background-color: yellow;
}
/* Universal Selector */
*{
    margin: 0;
    padding: 0;
}

/* Attribute selector */
[type="text"] {
    border: 1px solid
    green;
}
/* Pseudo-class selectors */
p:hover {
    color: blue;
}

CSS combinators

In CSS, combinators are used to explain the relationship between two selectors. There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


/* descendant selector (space) */

div p {
    background-color: yellow;
}

/* child selector (>) */
div > p {
    background-color: blue;
}

/* adjacent sibling selector (+) */
div + p {
    background-color: red;
}

/* general sibling selector (~) */
div~p {
    background-color: green;
}

3. CSS Specificity

Calculate specificity

Inline styles: An inline style attribute present on an element will override any styles in external stylesheets and will have the highest level of specificity.
IDs: Each unique ID will add to the specificity.
Classes, pseudo-classes, and attributes: Each unique class, pseudo-class, or attribute will add to the specificity.
Elements and pseudo-elements: Each unique element or pseudo-element will add to the specificity

The specificity is calculated as follows:

1000 for inline styling
100 for each ID value
10 for each class value (or pseudo-class or attribute selector)
1 for each element selector or pseudo-element

1
2
3


body #content .data {
    background-color: blue;
}

Equal specificity: the latest rule wins - If the same rule is written twice into the external style sheet, then the latest rule wins:

1
2


h1 {color: blue;}
h1 {color: red;}

4. Absolute and Relative Units

Absolute units

Absolute units are fixed-length units. They represent a physical measurement and don’t scale based on any other factors like the size of the viewport or parent element.
The absolute units in CSS are:

Pixels (px)
Points (pt)
Inches (in)
Centimeters (cm) and Millimeters (mm)
Picas (pc)

Relative units

Relative units are scaled quantities. They are relative to another length value, like the size of the viewport or the size of the parent element.\ Relative units in CSS are:

Percentages (%)
Viewport Width (vw)
Viewport Height (vh)
em
rem
Viewport Minimum (vmin)
Viewport Maximum (vmax)

5. CSS Colors

Named colors

CSS has a predefined set of named colors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11



color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

/* Example usage: */
p {
color: red;
}

HEX Values

Hexadecimal (HEX) color values are based on the combination of red, green, and blue (RGB) values in a base-16 format. A HEX color code starts with a hash # followed by 6 characters - two for red, two for green, and two for blue.
Example usage:

1
2
3


body {
    background-color: #FF5733; /* A shade of orange */
}

RGB Values

Colors can be defined using the rgb function, where values for red, green, and blue are provided in the range of 0-255.
Example usage:

1
2
3


div {
    color: rgb(0,0,0); * This is black *
}

RGBA Values

RGBA is similar to RGB but has an additional value for alpha (A) representing opacity. The alpha value is between 0 (completely transparent) and 1 (fully opaque).
Example usage:

1
2
3


div {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

HSL Values

HSL stands for Hue, Saturation, and Lightness. It offers a more intuitive way to pick colors.
Example:

1
2
3


button { 
    background-color: hsl (120, 100%, 50%); /* Pure green */
}

HSLA Values

Like RGBA, HSLA includes an alpha value for opacity.
Example:

1
2
3


button {
    background-color: hsla(120, 100%, 50%, 0.5);
}

6. CSS Box Model

The Box Model

In CSS, each HTML element is considered as a box that consists of margins, borders, padding, and the actual content. This is known as the “box model”.

Content
Padding
Border
Margin

Controlling Box Model Properties

It’s important to note that by default, the total width and height of an element is calculated as:

Total width = width + left padding + right padding + left border + right border + left margin + right margin

Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Box Sizing

CSS offers a property called box-sizing which can change this calculation. If you set box-sizing: border-box;, any padding or border specified in CSS will be included in the width or height of the element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div class="box1">Hello, world!</div>
<div class="box2">Hello, world!</div>
<style>
.box1 {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}
.box2 {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}
</style>

output of above HTML code

Box 1

Box 2

Width and Height

The width and height properties set the width and height of an element.
Example:

1
2
3
4


div {
    width: 500px;
    height: 200px;
}

Min/Max Variations

The max-width and min-width properties set the maximum and minimum widths of an element, while the max-height and min-height set the maximum and minimum heights.
Example:

1
2
3
4
5
6
7


div {
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    min-height: 150px;
    max-height: 300px;
}

CSS Margins

Margins are used in CSS to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


p {
    margin-top: 50px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-left: 200px;
}
/* Shorthands: */
p {
    margin: 50px 150px 100px 200px; /* top right bottom left */
}
p {
    margin: 50px 150px; /* vertical horizontal */
}

CSS Borders

Borders in CSS can be applied to most elements within HTML. They can be used to define a boundary around an element, for visual appeal, or to separate different sections of a webpage.
Example:

1
2
3
4
5
6
7
8
9


p {
    border-style: solid; /* style of the border */
    border-width: 1px; /* width of the border */
    border-color: red; /* color of the border */
}
/* Shorthand: */
p {
    border: 1px solid red;
}

output of above HTML code

this is a paragraph of text.

CSS Padding

Padding is the space that’s inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side with CSS (just like the margin).
Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


p {
    padding-top: 50px;
    padding-right: 150px;
    padding-bottom: 100px;
    padding-left: 200px;
}
    
/* Shorthand: */
p {
    padding: 50px 150px 100px 200px;
}

7. CSS Floats

Floating

The CSS float property is used to push an element to the left or right, allowing other elements to wrap around it. Floating elements are taken out of the normal flow of a document and shifted to the left or right as far as they can go.

Using the float property

The float property can have one of the following values:

left
right
none

1
2
3
4
5


<div style="width: 400px">
    <img src="home.png" style="float:left; padding-right:10px;" alt="test image" width="200" />
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis odio reiciendis, libero tempora saepe, quae maiores officia expedita temporibus, doloribus dolor eveniet asperiores. Quos molestiae recusandae eos est nulla. Unde.
    </p>
</div>

output of above HTML code

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis odio reiciendis, libero tempora saepe, quae maiores officia expedita temporibus, doloribus dolor eveniet asperiores. Quos molestiae recusandae eos est nulla. Unde.

Clearing Floats

When you use the float property, you may encounter issues where elements overlap or layout is broken. To prevent these issues, You can use the clear property.

none
left
right
both

using css overflow to clear floats

The overflow property with the value hidden can also be used to clear floats, if you apply it to the parent element of a floated element like in the example below.

1
2
3


.container {
    overflow: hidden;
}

08 CSS Positioning

CSS offers the position property, which helps to define how an element is positioned on a page. It can have one of the following values:

static : This is the default value.
Relative : The element is positioned relative to its normal position.
Fixed : The element is positioned relative to the browser window. It will not move even if the page is scrolled.
Absolute : The element is positioned relative to the nearest positioned ancestor.
Sticky : The element is positioned based on the user’s scroll position.

09 CSS Centering Elements

Centering Elements Horizontally

1
2
3
4
5
6


.center-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* or any specific width */
}

Centering Elements Vertically

1
2
3
4
5
6
7
8


<div class="relative-parent">
    <div>
        relative parent
    </div>
    <div class="absolute-child">
        absolute child
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


.relative-parent {
    position: relative;
    width: 100%;
    height: 160px;
    height: 160px;
    border: 3px dashed powderblue;
}
.absolute-child {
    width: 160px;
    height: 100px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background-color: crimson;
}

output of above HTML code

relative parent

absolute child