# CSS

# Prelude

With pure HTML, we can create static pages with no  _functionality _ and no  _style_

That's why it needs to be paired with…

CSS for theming

JS for interactive functionality

# Linking CSS to HTML

Make a new file called __ __  _style.css_  _ _ and put it into the same folder as your  __index.html__  file

Use the link tag inside <head> to load the style to your HTML page

<head>

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

</head>

# Different ways to apply CSS

__1. __  _Internal_ :<style>    body {        background-color: red;     }    </style>

__2. __  _Inline _ (frowned upon, but sometimes necessary):<body style="background-color: red;">

__3. __  _External file_  __ __ (preferred) __:__ <head>   <link rel="stylesheet" type="text/css" href="style.css" /></head>

# CSS Selectors

In CSS,  _selectors _ are used to select  _specific _ or  _multiple _ elements which gets styled

| Selector | Syntax | CSS | HTML |
| :-: | :-: | :-: | :-: |
| Type | elementname | input | <input /> |
| Class | .class | .inputs | <input class="inputs" /> |
| Id | #id | #username | <input id="username" /> |
| Attribute | [attr=value] + variations | input[type="text"] | <input type="text" /> |

CSS syntax: an example

* first we use the  _selector_  __ __ which marks the html element that gets styled
  * In this case it's p (paragraph)
* inside curly braces, we have declared three rules:
  * Font will be Verdana
  * Font size will be 20px
  * Color will be green

p {

_color_ : green;

_font-family_ : Verdana;

_font-size_ : 20px;

}

# ID vs class

* HTML element  _IDs_  _ _ are unique
  * two elements should never share the same ID!
* A  _class_  _ _ can be applied to multiple elements
  * an element can have multiple classes
  * => allows sharing code!

HTML<div id="main-content">CSS#main-content {     background-color: white; }

HTML<p class="note">Note!</p><p class="note yellow">Another note!</p>CSS.note {     font-size: 3em; }

Classes and IDs: hierarchy

* What if a HTML element is styled using multiple overlapping definitions?
  * <p class="note yellow">
  * the rules declared later override the ones declared earlier
* If an element has an id and a class, the rules in the id override their counterparts from the class
* It's possible to manually override rules with the !important keyword
  * It's best to avoid it, though
  * It can be VERY easily overused!
* It's usually best to avoid  _multiple definitions_  as well to keep things simple.

# Styling elements

Color & style: Background color

Let's make the div have a __ background-color __ so we can see where it is!

div {

_background-color_ :  _darkgray_ ;

}

We can also color our paragraphs and h1 elements and set their fonts

p {

_font-size_ : 18px;

_font-family_ : Verdana;

_color_ : white;

}

Do the same for h1

Color & style: Hex values

* Color names like  _red _ and  _yellow_  produce harsh primary colors
* You want to use  _hex values_  instead
  * for example #00688b or #f4858e
  * Hex color consists of 3 hexadecimal numbers from 00 to ff (0 to 255 in decimal!)
  * First hex number corresponds to red, second to green, and third to blue. For example, #ff0000 results in pure bright red
  * VSCode shows the color of the corresponding hex value!
* There are websites to convert color values to hex
  * Try to google search "hex color picker"

Let's learn the basic rules to manage the  _size _ of something

div {

_width_ : 200px;

_height_ : 250px;

}

img {

_width_ : 100%;

}

We have width and height we can adjust

px means pixels

% is the percentage of the parent's (in this case div's) width

px and % are not the only  [units of measurement](https://www.w3schools.com/cssref/css_units.php)  in CSS even if they are the most common. em and rem are also widely used, among others.

Margin and padding

* _Margin _ and  _padding _ define the space  _around _ and  _inside _ the element, respectively
* You can also use  _-top_ ,  _-bottom_ ,  _-left_  and  _-right_  to set values to individual sides
  * _margin _ or  _padding_  alone set a shared value for every side
* div {
* _padding_ : 30px;
* _margin_ : auto;
* _margin-top_ : 100px;
* }
* h1 {
* _margin-bottom_ : 0px;
* }
* p {
* _margin-top_ : 5px;
* }
* img {
* _width_ : 100%;
* }
* One special case is margin: auto; which centers the element

![](imgs/2-css_0.png)

Margin,  _border, _ and padding

Additionally, there's  _border_  __, __ which defines how thick the element's border is!

This is how margin, border and padding stack up →

![](imgs/2-css_1.png)

---

Näytä dev tools chromesta

# Text-align

Text can be aligned with the  _text-align_  rule. In addition to text, it effects to all  [inline](https://www.w3schools.com/html/html_blocks.asp)  or  [inline-block](https://www.w3schools.com/css/css_inline-block.asp)  elements.

![](imgs/2-css_2.png)

![](imgs/2-css_3.png)

![](imgs/2-css_4.png)

![](imgs/2-css_5.png)

div {

...

_text-align_ : center;

}

Let's center our content inside div:

Giving some border-radius rounds the corners nicely

_border-radius_ : 20px;

# Exercise 1: IDs and classes

Modifying the page that we previously created in "Web Basics and HTML", create a style sheet named style.css and link it to the page. Then add the following features:

Create a <div> element with some content (like a <p> element) inside of it. Give the div a class that gives it a yellow background color.

Create another <div> element with some content. Give it an ID that gives its contents red text color.

# Exercise 2: Padding and margin

* The page that we've previously modified should have an image in it.
* Add another image to the end of the page, below the div elements created in exercise 1.
* Apply CSS that gives all images on the page the following  __properties:__
  * __padding: 0.5em__
  * __margin: 1em on the right and left, 0.5em on the top and bottom__
  * __a blue background color so you can better see how the padding and margin works__

# Styling tables and lists

# Styling tables

Let's add a nice border to our table on the page by only having borders on for the outer table:

table {

_border-collapse_ : collapse;

}

table td, th {

_border_ : 1px solid black;

}

# nth-child

The nth-child CSS selector can be used to apply styles to only specific child elements in some pattern

For example, it is commonly used to make striped tables

tr:nth-child(even) { /* Change bg color of even-indexed table rows */    background-color: #d2d2d2;}

Various more complicated patterns can be made with the selector. For examples, check the  [Mozilla documentation on the nth-child selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)

nth-child is only one selector. There are more of them:

p:first-child matches all paragraphs that are the first child of a parent

p:first-of-type first paragraphs of parent

p:last-child and p:last-of-type work similarly

p:nth-child(2) the second children of their parents

p:nth-child(odd) all paragraphs on odd rows ( _even_  also possible)

p:nth-of-type(odd) all paragraphs on odd rows of the same type ( _even_  also possible)

And so on.

# Lists

You can create a  _list _ element with the <ul> and <li> elements

<ul>    <li>First item</li>    <li>Second item</li></ul>

This will create a two-item list like this:

First item

Second item

# Exercise 3: Lists and nth-child

Create a new list (<ul>) element with at least 5 <li> items to your page.

Then, in your style.css, add a CSS style that changes the text color of every odd-number-indexed list element to purple.

Tip: nth-child allows specifying odd instead of even for styling odd-indexed children

# Layouts

* Display defines how an element is visible on the screen
* Here we have examples of  _inline_ ,  _inline-block_  and  _block_
* There is also  _none_  __ __ which makes an element invisible
  * Often used to hide elements with JS

![](imgs/2-css_6.png)

A  [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)  is used to flexibly align elements in either a vertical or a horizontal manner

It is a reasonably "modern" way to position elements

[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

# Flexbox example

Suppose we have the following code

Notice by how only defining the  _wrapper_  _ _ with  _display_ : flex, the sub elements become "flex elements"!

.wrapper {

_display_ : flex;

_flex-direction_ : row;

_flex-wrap_ : wrap;

}

.wrapper div {

_width: 200px;_

}

<div class="wrapper">

<div id="box1">One</div>

<div id="box2">Etiam...</div>

<div id="box3">Three</div>

<div id="box4">Four</div>

<div id="box5">Five</div>

</div>

![](imgs/2-css_7.png)

# Exercise 4: Flexbox

Modifying the same page that we've created, add a flexbox (flex container). To the container, add 5 div items with text content.

First, align the flex items vertically.

Modify the CSS to align the items horizontally.

Modify the CSS to allow the content to wrap to multiple lines. Test that it works properly by making the content too wide for a single line.

A  [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)  layout is used to align elements to a grid

<div class="wrapper">

<div id="box1">One</div>

<div id="box2">Etiam...</div>

<div id="box3">Three</div>

<div id="box4">Four</div>

<div id="box5">Five</div>

</div>

.wrapper {

_display_ : grid;

_grid-template-columns_ : 1fr 1fr 3fr;

_grid-auto-rows_ : 200px;

}

![](imgs/2-css_8.png)

# Exercise 5: Grid

Create the following grid structure with the grid layout:

![](imgs/2-css_9.png)

# Responsiveness

In the early days of web development everything was done (or at least attempted to be done) pixel perfect. To achieve this, elements had absolute positions and sizes etc.

This means that the web page would look the same on every screen size. This is not advisable any more since people use so many different sizes and orientations of screens.

To solve the problem of different screen sizes, web developers first started to make different versions of websites for different resolutions and orientations. For example there might have been a "mobile version" of a site.

This is also an outdated way of developing web pages.

The best way to combat this problem is _ responsiveness. _ This means that the contents of a web page will neatly scale on any screen size and orientation.

![](imgs/2-css_10.png)

![](imgs/2-css_11.png)

Responsiveness is achieved by using relative sizes, margins and positions, for example:

Percentage based values

Units like em and rem

Breakpoints for viewport size to force different sizes and positions depending on the screen size.

Developing responsive web pages from scratch is time consuming. Luckily there are frameworks to help us with that. One such framework is called Bootstrap and we will take a look at it in the next section.

* It's absolutely impossible to remember all the HTML and CSS stuff on the top of your head.
  * Websites like  [Mozilla's developer page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)  or  _www.w3schools.com_  help here!
* The most important thing about learning HTML and CSS is to know  _what _ exists and  _where _ to find them. Shortly, you'll become faster and have a better idea on what you need
* If you find something on a website you like but don't know how to implement it, open the _ _  _developer tools_  to see how they did it! (More on that next time!)

# Assignments

[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/2.%20CSS)

