What is CSS?

CSS (Cascading Style Sheet) is a layered stylesheet language used to create layouts, decorations, set background colors, text colors, sizes... for web pages.

What is CSS

Why learn CCS?

Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!

Syntax

Rule-based language: The color of the <h1> should be white and its font size should be 14px.

h1 {
 color: white;
 font-size: 14px;
}

Syntax CSS

A stylesheet may contain several rules, but be careful how you organize your code.

h1 {
 color: white;
 font-size: 14px;
}
p {
 color: white;
 font-style: italic;
}

How to add CSS to our HTML

Inline using the style attribute for each HTML element:

<p style="color: blue; font-size:18px;">This paragraph should be blue and with 18px of size</p>

Using the style tag in the section of the page:

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

Referencing a CSS file:

<link rel="stylesheet" href="styles.css">

Changing the default browser styles

li {
 list-style-type: none;
}
a {
 text-decoration: none;
}
p {
 margin: 0;
}

Using the class attribute in the elements.

<ul>
 <li>item 1</li>
 <li class="selected-item">item 2</li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

CSS code:

.selected-item {
 color: blue;
}

More specific:

li.selected-item {
 color: blue;
}

Group of selectors can be specified in the same block:

li.selected-item,
span.selected-item {
 color: blue;
}

Using the ID attribute in the elements.

<ul>
 <li>item 1</li>
 <li id="selected-item">item 2</li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

CSS code:

#selected-item {
 color: blue;
}

Styling based on the location of the elements.

<article>
 <h1>This is a title</h1>
 <p>Current time is: <time>17:40</time></p>
</article>
article p time {
 color: red;
}

When it comes to next other elements:

h1 + p {
 font-size: 200%;
}

Styling elements based on state

<p>This is a <a href="https://google.com">link</a></p>
a:hover {
 color: green;
}
a:visited {
 color: pink;
}

Change the background

  • color is referring to the text color in that element.
  • background-color refers to the background color.
  • background is shorthand to combine many background tags into one line.
body {
 background-image: url('./bg.jpeg');
 background-size: cover;
}
li:hover {
 background-color: rgba(255, 255, 255, 0.7);
}
main {
 background: rgba(0, 0, 0, 0.7) no-repeat right top;
}

CSS Specificity

Style attribute ----> ID ----> Class, pseudo-class attribute ----> Elements

CSS Specificity

Positioning

With positioning you can change the location of HTML elements within the visual viewport of the document.

Positioned elements are important to create complex layouts.

Static

 .css-selector {
 position: static;
 }

This is the default value for position property, it basically means it's not positioned.

Relative:

.css-selector {
 left: 20px;
 position: relative;
 top: -20px;
 width: 500px;
}

Relatively positioned elements are offset a given amount from their normal position within the document. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

Absolute:

An element that is absolutely positioned is taken out of the flow. It behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block.

.css-selector-relative {
 height: 400px;
 position: relative;
 width: 600px;
}
.css-selector-absolute {
 height: 200px;
 position: absolute;
 right: 0;
 top: 120px;
 width: 300px;
}

Fixed:

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. The top, right, bottom, and left properties specify offsets from the edges of the viewport's block.

.css-selector-fixed {
 bottom: 0;
 position: fixed;
 right: 0;
 width: 200px;
}

Sticky:

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

.css-selector-sticky {
 position: sticky;
 top: 60px;
 width: 200px;
}

Normal Flow

Elements on a webpage lay out in the normal flow, if you have not applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether.

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.)

Positioning

  • <header> sticky, green borders and black background.
  • <nav> absolute, blue borders and 200px of width.
  • <section> static, red border and it's 200px away from its left.
  • <footer> fixed, orange border and it's fixed to the bottom.

Box model

CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:

  • borders
  • margins
  • padding
  • Content

Image of Box Model

Box model

  • Content box: The area where your content is displayed, which can be sized using properties like width and height.
  • Padding box: The padding sits around the content as white space; its size can be controlled using padding and related properties.
  • Border box: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
  • Margin box: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.

When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result.

.css-selector-500 {
 margin: 20px auto;
 width: 500px;
}
.css-selector-bigger {
 border-width: 10px;
 margin: 20px auto;
 padding: 50px;
 width: 500px;
}

Can you calculate the width of the css-selector-bigger element?

box-sizing

So you had to use some math to calculate the width of the elements, so this was considered unintuitive, that's why box-sizing property appeared, when it is applied on an element, the padding and border of that element no longer increase the width.

.css-selector-500 {
 box-sizing: border-box;
 margin: 20px auto;
 width: 500px;
}
.css-selector-bigger {
 border-width: 10px;
 box-sizing: border-box;
 margin: 20px auto;
 padding: 50px;
 width: 500px;
}

CSS Grid

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

Image of Grid columns and rows

CSS Grid

A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.

A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters.

.grid-container {
 display: grid;
 grid-template-columns: 250px 250px 250px 250px 250px;
 grid-template-rows: 150px;
 grid-gap: 30px;
}

Flexbox

  • Flexbox is a one-dimensional layout method for laying out items in rows or columns.
  • Items flex to fill additional space and shrink to fit into smaller spaces.
  • The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
  • A flex container expands items to fill available free space or shrinks them to prevent overflow.

Image of Flexbox axis

Flexbox

  • Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
  • While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Flexbox vs CSS Grid

  • Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties.
  • Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").
.flex-container {
 /* We first create a flex layout context */
 display: flex;
 /* Then we define the flow direction
 and if we allow the items to wrap
 * Remember this is the same as:
 * flex-direction: row;
 * flex-wrap: wrap;
 */
 flex-flow: row wrap;
 /* Then we define how is distributed the remaining space */
 justify-content: space-around;
}

Media Queries

  • The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".

Media Queries

  • Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.

Syntax:

@media media-type and (media-feature-rule) {
 /* CSS rules go here */
}
  • Media type, which tells the browser what kind of media this code is for (e.g. print, or screen).
  • The media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
  • The set of CSS rules that will be applied if the test passes and the media type is correct.

Example

@media screen and (max-width: 768px) and (min-width: 320px) {
 body {
 background-color: red;
 }
}

This code will change the body's background color in between 320px and 768px.