12 KiB
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> </head>Different ways to apply CSS
__1. __ Internal :
__2. __ _Inline _ (frowned upon, but sometimes necessary):
__3. __ External file __ __ (preferred) : <head> </head>
CSS Selectors
In CSS, _selectors _ are used to select _specific _ or _multiple _ elements which gets styled
| Selector | Syntax | CSS | HTML |
|---|---|---|---|
| Type | elementname | input | |
| Class | .class | .inputs | |
| Id | #id | #username | |
| Attribute | [attr=value] + variations | 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
HTML
Note!
Another note!
CSS.note { font-size: 3em; }Classes and IDs: hierarchy
- What if a HTML element is styled using multiple overlapping definitions?
-
- 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 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 or inline-block 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
element) inside of it. Give the div a class that gives it a yellow background color.
Create another
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
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
- and
- elements
- First item
- Second item
This will create a two-item list like this:
First item
Second item
Exercise 3: Lists and nth-child
Create a new list (
- ) element with at least 5
- 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 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/
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;
}
OneEtiam...ThreeFourFive
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 layout is used to align elements to a grid
OneEtiam...ThreeFourFive.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 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