HTML/CSS
Web dev lesson 2
HTML Recap
HTML document structure
Here is the basic structure of a valid HTML document
Common HTML Elements
Here is a list of some of the HTML elements we covered last week
Basics of CSS
Accelerated Learning
Examples of things you can control with properties:
Basics of CSS
Allows you to control how content defined by your HTML is displayed.
HTML element you are targeting
Properties
Values
CSS Rule
How to add CSS to your HTML?
There’s 3 ways:
Embedded: In a style element at the start of your HTML file (best to put inside the head element)
External: By referencing in the HTML file an external CSS file
HTML file:
CSS file:
Inline: Using the attribute “style=” inside a tag
For example, in this <p> element:
Not ideal, but depends on context
Ideal for reuse
Not ideal, but depends on context
How to target HTML elements Part 1/2
1. Element type
You can target all elements of that type, for example:
Notice, how we re-set the font-family to san-serif for the p elements. And since, the p element is a child of the body element (which contains everything), it will inherit the body properties which are inheritable. Hence the font will be sans-serif.
2. Class
You can target a specific groups of elements by giving them a class:
Notice how, to select a class on CSS, you need to use a dot . before the class name (different to when selecting all elements of that type). Now, only elements with this class will have this css applied
In the HTML:
In the CSS:
Notice how to add a class, it needs to be inside the first element tag as class=”classname”
4. Id
You can also target a specific element by giving it an id. Id’s are the same as classes, except that they are unique, so you should only use them once for 1 element. Instead, you can use the same class for various different elements.
❗️class names are case sensitive and can't have spaces
3. Element/Class chain
You can actually chain classes and elements
In this case, only the <p> elements inside the element with the class .shrek will have their font-sizes 33px.�You can keep chaining elements as long as you want, although chaining more than 2 elements may get a bit confusing.
In the HTML:
In the CSS:
How to target HTML elements Part 2/2
The : (colon) allows you to set behaviour states (hover, active, etc…) to the selected element. These are called “Pseudo-Classes”. :hover and :active are the most commonly used.
:hover ➔ When user’s mouse hovers over this element, the following css will be applied…
:active ➔ When user clicks on this element, the following css will be applied…
:checked ➔ When user checks (toggles) this element, the following css will be applied…
and more…
:
Layouts & Flexbox
Positioning Elements
Padding vs Border vs Margin
Flexbox & Display property
The Display property allows you to format the child elements of a certain element. For example, when we have 4 divs from the same parent. (Let’s give them a width & height of 300px, 10px margin, and background-color of light blue.)
How do we turn these 4 boxes that are displayed horizontally into vertical?
Flexbox & Display property
To turn these boxes into vertical display, lets learn about display block and inline-block.
Display: block
This is the default display mode of all html elements. The block display will make the element take the full horizontal width. (As you can see the beige area below represents the full horizontal block the box takes. ❗️Needs to be set in the element CSS itself.
Display: inline-block
This will allow you to place elements horizontally, as it will limit the area the element takes to its own width. (As you can see the beige area stops around the element itself).
❗️Needs to be set in the element CSS itself.
However, the issue with inline-block is that its not responsive (doesn’t work well for mobile/tablet or smaller/larger screen sizes). So, we need to use Flexbox. We will learn more about responsiveness later on.
❗️Needs to be set in the parent element in CSS.
Flexbox & Display property
Display: flex
When the screen is resized to smaller, this automatically happens:
Flexbox & Display property
Inline-block
Flexbox
Flexbox & Display property
Inline-block looks better for the moment. However, when you set the display: flex property, you unlock a lot more new properties to beautifully display your elements. �Such as: (in bold are important/most-used values)
row, column, row-reverse, column-reverse (if you want elements to stack vertically or horizontally)
wrap, nowrap (to make elements will wrap around when hitting an edge of the browser)
center, start, end, space around, space between, stretch
center, start, end, space around, space between, evenly
center, start, end, space around, stretch, baseline
Flexbox & Display property
Inline-block
Flexbox
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
CSS Exercise
Before CSS
After CSS
❗To underline text using CSS, set the text-decoration property to underline
CSS Exercise: HTML Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Exercise</title>
</head>
<body>
<h1>My CV</h1>
<h2>Experience</h2>
<ul>
<li>Front end developer - Microsoft</li>
<li>Bartender - Dirty Duck</li>
</ul>
<h2>Education</h2>
<ul>
<li>International Management - University of Bristol</li>
<li>Business - Chester Grammar School</li>
</ul>
</body>
</html>
CSS Exercise: Possible Solution
h1 {
text-decoration: underline;
}
h2 {
color: blue;
}
body{
background-color:yellow;
}
#educationList li {
color: red;
}
#experienceList li{
color: purple;
}
<body>
<h1>My CV</h1>
<h2>Experience</h2>
<ul id="experienceList">
<li>Front end developer - Microsoft</li>
<li>Bartender - Dirty Duck</li>
</ul>
<h2>Education</h2>
<ul id="educationList">
<li>International Management - University of Bristol</li>
<li>Business - Chester Grammar School</li>
</ul>
</body>
Great! We’ve learnt about HTML and CSS, we have enough knowledge of the two to start building our website project!
Course Project:
Desktop
Mobile