CSS

Learning goals

Adding css to a site
CSS selectors, properties and values
CSS layout
- Flexbox

Flipped classroom videos

Teacher instrcution

Autoformat
ctrl + s opdaterer siden
Codelab
Billedereference
Vi kører et mix af opgaver i par og alene idag
Nogle spørgsmål til videoerne?

Peer instruction

Question 1

What does the following css do?

.user-name:hover {
    color: purple;
}

When an element with class name user-name is hovered. It colors the background purple
When an element with the id of user-name is hovered. It colors the background purple
When an element with class name user-name is hovered. It colors the text purple
When an element with the id of user-name is hovered. It colors the text purple
Syntax error

What is css?

CSS stands for cascading style sheets. It means the styles that are added for an element cascades down to their children. Its like a waterfall where the water will continue cascading down affecting the pools below.

Lets see a concrete example of that!

Adding css to your site

Create a css file. Fx main.css. To add the css to your html, add this line in the head of your html: <link rel="stylesheet" href="main.css">. Now the css file called main.css is connected to the html.

<head>
  <link rel="stylesheet" href="main.css">
</head>

CSS selectors and properties

CSS has three parts:

The selector - specifies what html elements to style
The property - specifies what sproperty we are changing (color, width, font-size)
Value - The value of the property. 20px, red etc.

It goes kind of like this: First we find the elements to style (the selector) then we tell how those selected elements should be be styled. Here is an example:

h1 {
    color: red;
}

This reads like this: Select the h1 html element. Now color the text red.

Lets go into more css selector details:

CSS selector

Tag selector

Select all elements based on their tag name. Simply write the tag name

This selector

h1 {
    color: red;
}

Would color the text Hello red <h1>Hello</h1>

li {
    background-color: yellow;
}

Would give the li a yellow background color <li>List item</li>

Id selector

For id selectors use #

#congratulation-message {
    background-color: red;
}

Will select an element like this:

<div id="congratulation-message">Congratulations 🎉</div>

Class selector

For class selectors use .

.user-name {
    font-weight: bold;
}

Will select an element like this:

<div class="user-name">Charlotte123</div>

Descendant selector

You can make the selectors more specific by using the descendant selector:

.intro h1 {
    font-size: 25px;
}

Style all h1 elements that are descendants of the element with class name intro

<section class="intro">
    <h1>Welcome to our wonderful site</h1>
</section>

You can also formulate it differently:

First find all the elements with a class of intro. Then find all the h1 tags that is descendants of the element with class intro.

And selector

Use the comma

section.intro, h1 {
    font-size: 25px;
}

Now you would give the section with class name intro and the h1 a font size of 25 pixel.

Pseudo selector

use the :

.user-name:hover {
    color: purple;
}

Give the element with class user-name a color of purple when hovered with the mouse

There are a lot more but these are the most important ones. You can find more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#selectors

📝 Exercise 1

Duration: 20 min

https://flukeout.github.io/

Do it as pair programming exercise. One drives, one supports.

The driver shares his/her screen. Halfway switch.

The html tags are not standard html tags like div, p and section. But the concept of selecting is the same.

CSS properties

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

A property in css is the styling you want to apply to an element. You write a property with the property name then : and then the value.

📝 Exercise 2

Duration: 15 min

Alone or in pairs

Give the button with the text Signup a green background color

All buttons in the page should have a padding of 12px and a rounded corners

Remember to add the main.css file

<html>
	<head>
		<link rel="stylesheet" href="main.css">
	</head>
  <body>
		<main>
			<section class="intro">
				<h1>Welcome to my site</h1>
				<h2>I hope you like it</h2>
				<button class="call-to-action">Signup</button>
				<button>See pricing</button>
			</section>
		</main>
	</body>
</html>

CSS layout

CSS layouting is hard!

CSS layouting decides how elements are layouts. What comes on top/to the left of what.

Flow

CSS flow decides how elements are layed out. The flow can be changed with the display css property show.

Block flow

Elements that have block flow are stacked on top of each other.

These elements are fx div, p, section, footer

Teacher note: Show with example

Inline flow

Elements that have inline flow are positioned next to each other.

That if fx span, a, strong

Teacher note: Show with example

Positioning - not part of learning goals!

Relative

Position an element relative to its original position.

section .user-name {
    display: relative;
    left: 10px;
}

Absolute

Position an element in relation to the first parent that has a position set as a property. Text on top of and in the middle of an image.

section .user-name {
    display: absolute;
    left: 10px;
}

Fixed

A fixed element always appear at the same place on the screen no matter of someone scrolls! Imagine a cookie accept box.

section .user-name {
    display: fixed;
    left: 10px;
}

Flex

Flex is a relative new way of layouting things in the browser.

https://codingfantasy.com/games/flexboxadventure

Let's get started!

We will be using this html

<div class="flex-container">
    <div class="flex-item">Flex item 1</div>
    <div class="flex-item">Flex item 2</div>
    <div class="flex-item">Flex item 3</div>
    <div class="flex-item">Flex item 4</div>
    <div class="flex-item">Flex item 5</div>
</div>

Flex container

Is where the display: flex; rule is applied. In our example it is the div with the class flex-container.

Flex items

When display: flex; is applied to the container all the immediate children will be the flex items. In our example that is the div's with the class of flex-item

When applying display:flex; the default direction of the flex items is row, meaning they will be positioned next to each other.

Flex-direction

The flex-direction desides in what direction the items will align. This rule is applied to the container

flex-direction: row; the items will align from left to right (next to each other)
flex-direction: reverse-row; the items will align from left to right but in the reverse order
flex-direction: column; the items will align from top to bottom (on top of each other)
flex-direction: reverse-column; the items will align from top to bottom but in the reverse order

Justify content

Decides the spacing between the items in the direction of the flex-direction. This rule is applied to the container

An example is: justify-content: space-between;

Align items

Decides the spacing between the items in the opposite direction of the flex-direction. This rule is applied to the container

align-items: center;

Now try and play around with flex-direction and with justify-content and align-items

https://marina-ferreira.github.io/tutorials/css/flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

📝 Exercies 3

Duration: 20 min

Work in pairs

Go through the first 10 levels in this flexbox game: https://codingfantasy.com/games/flexboxadventure

How to deconstruct a layout class presentation

https://www.amsiq.com/da

📝 Exercise 4

Duration: 30 min

Alone or in pairs

Try and recreate the layout below with the code found here. You can clone the project and open the files in Webstorm or just copy the files to your computer. Thats up to you.

Working with the inspector

You can see the css for any element on the web. Right click on the element and choose inspect element.

on the right hand side you can see the styles applied to the element you have inspected. In the element panel you can write your own css rules!

📝 Exercise 5

Duration: rest of class. Alone

Style your portfolio 🎉

We want to see you doing some css on your portfolio. That means both layouting and colors, spaces, margins etc.

Find cool colors here

CSS checklist

Is the css imported using the style tag.
Are there unused selectors.
Are there lots of fixed pixel values. This could affect responsive layouts.
Try to avoid absolute positioning as this tends to break responsive layouts.
Use flexbox over floats.
Avoid using !important statements.
Avoid inline styles
Consistent naming and grouping of css-classes (see naming conventions below)
CSS selectors are only as specific as they need to be

If you want to continue learning css

Responsive
- Mobile first
- Media queries
Animation
Boxmodel
Grid
Floating
Specificity
External, inline element styles

PreviousHTML NextFinish your portfolio

Last updated 3 years ago

hashtagLearning goals

hashtagFlipped classroom videos

hashtagTeacher instrcution

hashtagPeer instruction

hashtagQuestion 1

hashtagWhat is css?

hashtagAdding css to your site

hashtagCSS selectors and properties

hashtagCSS selector

hashtagTag selector

hashtagId selector

hashtagClass selector

hashtagDescendant selector

hashtagAnd selector

hashtagPseudo selector

hashtag📝 Exercise 1

hashtagCSS properties

hashtag📝 Exercise 2

hashtagCSS layout

hashtagFlow

hashtagBlock flow

hashtagInline flow

hashtagPositioning - not part of learning goals!

hashtagRelative

hashtagAbsolute

hashtagFixed

hashtagFlex

hashtagLet's get started!

hashtagFlex container

hashtagFlex items

hashtagFlex-direction

hashtagJustify content

hashtagAlign items

hashtag📝 Exercies 3

hashtagHow to deconstruct a layout class presentation

hashtag📝 Exercise 4

hashtagWorking with the inspector

hashtag📝 Exercise 5

hashtagCSS checklist

hashtagIf you want to continue learning css