Refugees Code

Contents

Contents

01. Introduction to CSS

Basic CSS styling

This is how CSS looks like:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}


p {
  color: red;
}

Let's read it:

  1. First, we have two selectors (h1 and p). Each one will affect all h1 and p tags in our page.
  2. The first one will look for all h1 tags and will apply the properties between the brackets to those tags.
    1. The first one sets the text color to blue.
    2. The second sets the background color to yellow.
    3. The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black. Important notice: in this example and over the course we will use shorthands, which is shorten code to specify all the individual properties in one property. The border property is a shorthand property for the following individual border properties:
      • border-width
      • border-style (required)
      • border-color
  3. The second selector (p) will change the text to red.

Read this article to learn how CSS syntax works and see examples.

What is CSS?

CSS Selector

One of the core things about CSS is to address the element that you want to style. If you fail to do so, you could be altering many other elements that you didn't want to style that way or not style anything at all due to lack of selector accuracy.

Every selector of CSS is composed of a selector and its attributes. There are multiple selector types and hundreds of attributes, but most of the time it will follow the same structure.

This is how a CSS selector looks like:

.CSS syntax explanation .CSS declaration

Important: If a property is unknown or if a value is not valid for a given property, the declaration is deemed invalid and is wholly ignored by the browser's CSS engine.

You will read more about CSS selectors in the next section, this was just an introduction.

Adding a stylesheet

There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others.

Three Different Types of CSS Styles: The Complete Guide

How to add CSS

  • Why would you choose one over another?
  • What do you think is the cleanest way?

Comments

Comments are parts of our CSS that will not affect the HTML. It is used to write messages for the programmer of the website. A comment looks like this:

/* This is a CSS comment */

Content inside comments will not have any consequence on the styling.

Exercises

  1. Change the Color of Text
  2. Use CSS Selectors to Style Elements
  3. Headline with the h2 Element
  4. Inform with the Paragraph Element
  5. Fill in the Blank with Placeholder Text
  6. Uncomment HTML
  7. Comment out HTML
  8. Delete HTML Elements

02. CSS Selectors

In CSS, selectors are used to target the HTML elements we want to style on our web pages.

There is a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.

Each selector can access the HTML items by different means; by id (#) by class (.), by HTML tag (<>) and there are even more specific selectors which you will read about in the next section.

CSS selectors

Main Selectors

Main selectors include IDs, classes, attributes or HTML tags.

CSS Selectors

Other selectors

However, there's plenty of other selectors which will help you attack the element or elements that you want to style in particular circumstances. Some of these are called pseudo-class or pseudo selectors.

CSS Selectors Reference

CSS4-Selectors | All selectors from level 4 to 1

Combining selectors

Selectors can be used individually or collectively. They can be very powerful when combined.

Combinators

Multiple Class / ID and Class Selectors | CSS-Tricks

Speed Up by Grouping Multiple CSS Selectors

  • Can you use several selectors at the same time?
  • Why would you attempt to do this?
  • Is there a possible way of selecting all <p> on a website except the last one?

Exercises

  1. Use a CSS Class to Style an Element
  2. Style Multiple Elements with a CSS Class
  3. Change the Font Size of an Element
  4. Set the Font Family of an Element
  5. Import a Google Font
  6. Specify How Fonts Should Degrade
  7. Size Your Images
  8. Add Borders Around Your Elements
  9. Add Rounded Corners with border-radius
  10. Make Circular Images with a border-radius
  11. Give a Background Color to a div Element
  12. Use Attribute Selectors to Style Elements

Also, here is a game to help you assimilate all these concepts of selectors, multiple selectors, pseudo selectors. Have a try and let's see if you can get to the end!! ⬇️

CSS Diner

Further Reading

Extra!

If you want to have a broader understanding of CSS and how it works, check this article out. However, this is not part of the mandatory materials of the course.

How CSS works

03. Box Model

Every HTML element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. Before understanding how to create CSS layouts, you need to understand the box model.

CSS Box model

Box model

Spacing

This representation of elements as boxes allows us to effectively distribute content within our webpage. There are different approaches to do so, but before we get to that part, make sure you understand how this works:

Introduction to the CSS basic box model

See an example of how box model works here

CSS Box Model

CSS Units

Some CSS attributes require a unit value. Some that you might come across already is the pixel value (px) or the percentage (%). There are many, we will review the most important.

Just like we measure meters in a room to find furniture that fits in it, we need to measure the elements on our webpage. CSS Units allow us to measure and compare different items.

Read about absolute and relative numeric values and percentages:

CSS values and units

Box model example

As we saw at the beginning of this chapter, the actual width and height of a box will be

Width = Content-box + padding + border + margin

So if we do this:

.box {
  width: 200px;
  border: 1px solid green;
  padding: 1rem;
  margin: 2rem;
}

The actual rendered (as seen on screen) width would be

width = 200px + 1rem + 1px + 2rem

Hard to calculate, isn't it?

Box sizing

To avoid the confusion we've seen before, most developers change the default browser behavior.

box-sizing is a CSS property that sets how the total width and height of an element is calculated. When we set the value of box-sizing to border-box the final calculation will differ. The width and height properties will include the content, padding, and border, but do not include the margin.

This part can be easy to implement but hard to understand, so read the article below to make sure you acquire the knowledge before executing it.

box-sizing

Exercises

  1. Set the id of an Element
  2. Use an id Attribute to Style an Element
  3. Adjust the Padding of an Element
  4. Adjust the Margin of an Element
  5. Add Different Padding to Each Side of an Element
  6. Add Different Margins to Each Side of an Element
  7. Use Clockwise Notation to Specify the Padding of an Element
  8. Use Clockwise Notation to Specify the Margin of an Element
  9. Use Clockwise Notation to Specify the Margin of an Element

04. Cascade and inheritance

Cascade and inheritance are very important in order to determine which selector will have more power over the rest.

Sometimes, different styles are applied to the same element. In order to decide which style should prevail, cascade and inheritance will have their say. Read these articles to understand this conflicting rules.

Introducing the CSS Cascade

Cascade and inheritance

Exercises

  1. Inherit styles from the body element
  2. Prioritize one style over another
  3. Override styles in subsequent CSS
  4. Override class declarations by styling ID attributes
  5. Override class declarations with inline styles
  6. Override all other styles by using importants
  • What happens when different opposite styles (such as color: red, color: green) are applied to the same element?
  • Do you think how cascade and inheritance can affect a project with 200 stylesheets?

Further reading

If you want to learn advanced topics on cascade and inheritance, check this article

How CSS works: Understanding the cascade - LogRocket Blog

05. CSS Layout

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow.

As aforementioned, distributing content in our webpage flow can be dealt by several means. Have a look at the main options.

Default layout flow: inline vs block

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

display

Inline vs Inline-block vs Block

Positioning

Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.

position

Flexbox

The main goal of flexbox is to craft one-dimensional layout structures (vertical or horizontal). Items in flex layouts will shrink or grow to fill the space available and will position relative to the parent container.

Flexbox

Basic concepts of flexbox

A Complete Guide to Flexbox | CSS-Tricks

  • What do you find it easier? Positioning left and right or using flexbox?
  • Can you think of a clear example of webpage where flexbox can be used?

Exercises

  1. Change an element's relative position
  2. Move a relatively positioned element with CSS offsets
  3. Lock an element to its parent with absolute positioning
  4. Lock an element to the browser window with fixed positioning
  5. Center an element horizontally using the margin property
  6. Use display: flex to position two boxes
  7. Add flex superpowers to the tweet embed
  8. Apply the flex-direction property to create rows in the tweet embed
  9. Apply the flex-direction property to create a column in the tweet embed
  10. Use the justify-content property in the tweet embed
  11. Use the align-items property in the tweet embed
  12. Use the align-self property
  13. Get to the end of this game to master Flexbox! ⬇️

Flexbox Froggy

Further reading

A Complete Guide to Flexbox | CSS-Tricks

06. Responsive

It is fairly common to create a Website or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience.

Developers usually create a single version of the website which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately.

Basics

Please read these articles to know the basic concepts of responsive designs.

Responsive design

The building blocks of responsive design

Using Developer Tools Responsive Design Mode

Responsive Design Mode is a tool from your browser developer tools that gives you a simple way to simulate a range of layouts of different devices — particularly mobile phones and tablets as well as desktops and laptops.

Read this article to understand how it works

Responsive Design Mode

Media queries

Media queries lets you adapt your site or app depending on the presence or value of various device characteristics and parameters.

See an example of its syntax:

.box {
    width: 75%;
}


@media all and (max-width: 1024px) {
  .box {
      width: 50%;
  }
}

In order for you to master media queries, read the following article. Be ready to start typing!

Using media queries

Exercises

  1. Understand absolute versus relative units
  2. Create a media query
  3. Make an image responsive
  4. Use a retina image for higher resolution displays
  5. Make typography responsive
  • What platforms do you use to access the internet?
  • Do you know phone applications which also have a webpage? Are they the same or different? Do they look the same? Do they have similar functionalities?

07. Custom Properties

Custom properties (sometimes referred to as CSS variables) are variables defined by CSS authors that contain specific values to be reused throughout a document (similar to JS variables). They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places.

Using CSS custom properties (variables)

.parent-element {
    --main-color: #000;
}


.child-element {
    background: var(--main-color);
}


/* Custom properties using fallback value */
.sibling-element[attr] {
    background: var(--main-color, #fff);
}

Exercises

  1. Use CSS Variables to change several elements at once
  2. Create a custom CSS Variable
  3. Use a custom CSS Variable
  4. Attach a Fallback value to a CSS Variable
  5. Inherit CSS Variables

Well done! You've just arrived to the end part of the CSS syllabus. Congratulations!

Before continuing, make sure you can tick all the goals (except the project one, which comes next), and you don't have any doubts. Otherwise, ask the teachers! 🤓

Prev

Introduction

Next

CSS Section project

On this page