You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
12 KiB
Markdown
421 lines
12 KiB
Markdown
# 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
|
|
|
|
|
|
|
|
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 →
|
|
|
|
|
|
|
|
---
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
# 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;
|
|
|
|
}
|
|
|
|
|
|
|
|
# Exercise 5: Grid
|
|
|
|
Create the following grid structure with the grid layout:
|
|
|
|
|
|
|
|
# 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.
|
|
|
|
|
|
|
|
|
|
|
|
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)
|
|
|