In HTML, you’ll mainly come across 2 types of HTML elements:
<div>
<article>
<section>
<a>
<em>
<strong>
Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.
Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.
03 - Block & Inline<p>Sir <strong>Alex Ferguson</strong> once said about Filipo Inzaghi:<q>"That lad must have been born offside."</q>. </p>
In this setup:
<strong>
element gives the words “Alex Ferguson” more importance<q>
marks his quote about Inzaghi
The fact that <strong>
is displayed in bold is only the browser’s default behavior. Remember that you have to choose HTML elements according to their meaning, not how they look like.
In this case:
<p>
is the parent element of <strong>
and <q>
<strong>
and <q>
are child elements of <p>
<strong>
and <q>
are sibling elementsWhen writing HTML content like paragraphs, lists or links, you provide meaning to your text. But you might want to groupsome of these elements together.
For example, a blog’s webpage can be divided in 4 parts:
There are some structural HTML elements you can use as containers for other elements.
05 - HTML Structureheader
is usually the first HTML element in the code. It acts as an introduction to the webpage, with the logo, a tagline, and navigation links.
06 - HTML Header header
, the footer
is usually the last element of a page, where the main navigation links are repeated and secondary ones added.
07 - HTML Footer The main
element contains, as its name suggests, the most important content of the page, the one that defines the purpose of the page.
While all webpages of a website contain common elements (like the header, the navigation, the footer…), the main
element focuses on unique content.
While navigating the Web, a user’s interaction is mostly only to click on links in order to navigate through webpages.
But the Web understands that a user is sometimes required to provide his own input. These types of interaction include:
To accomodate for these needs, HTML provides interactive form controls:
These controls use different HTML tags, but most of them use the <input>
tag. Because it is a self-closing element, thetype of input is defined by its type
attribute:
The <form>
is a block-level element thats defines an interactive part of a webpage. As a result, all form controls (like<input>
, <textarea>
or <button>
) must appear within a <form>
element.
Two HTML attributes are required:
action
contains an address that defines where the form information will be sentmethod
can be either GET or POST and defines how the form information will be sentUsually, the form information is sent to a server. Think of a form as a collection of input controls that work together to perform a single operation. If you wrote a login form, you could have 3 controls:
<input type="email">
<input type="password">
<input type="submit">
<form action="/login" method="POST">
.11 - HTML Forms Element Almost all forms require textual input from users, in order for them to enter their name, email, password, address… Text form controls come in different variations:
Text | <input type="text"> |
Allows any type of character |
---|---|---|
<input type="email"> |
Might display a warning if an invalid email is entered | |
Password | <input type="password"> |
Shows dots as characters |
Number | <input type="number"> |
Up/Down keyboard keys can be used |
Telephone | <input type="tel"> |
Can trigger an autofill |
Multiple line text | <textarea></textarea> |
Can be resized |
Although these inputs look very similar and allow users to enter any kind of text (even wrong input), their type provides specific semantics to the input, by defining what kind of information it is supposed to contain.
Browsers can subsequently slightly alter a control’s interface to increase its interactivity or hint at what kind of content isexpected.
12 - Text InputsText inputs can display a placeholder text, that will disappear as soon as some text is entered.
13 - PlaceholderWhile placeholders already provide some hint at what content is expected, labels have the advantage of remaining visible at all times, and can be used alongside other types of form controls, like checkboxes or radio buttons.
Although you could use short paragraphs to describe form elements, using <label>
is semantically more valid because they only exist within forms, and can be paired with a specific form control by using the for
attribute and matching its value with the input’s id
.
Checkboxes are form controls that only have 2 states: checked or unchecked. They basically allow the user to say “Yes” or “No” to something.
15 - CheckboxesYou can present the user a list of options to choose from by using radio buttons.
For this form control to work, your HTML code needs to group a list of radio buttons together. This is achieved by using thesame value for the name
attribute:
Because all radio buttons use the same value for their name
attribute (in this case the value "status"
), selecting one option will unselect all other ones. Radio buttons are said to be mutually exclusive.
While a checkbox exists on its own, radio buttons can only appear as a list (which means having at least 2 options).
16 - Radio buttonsIf the number of options to choose from takes up too much space, you can use <select>
dropdown menus.
They work like radio buttons. Only their layout is different.
If you add the multiple
attribute, you can provide the ability to select multiple choices.
stands for Cascading Style Sheets
While HTML is about defining the content of a webpage, CSS is about styling a webpage. It means setting colors, fonts, dimensions, margins, positions, of a webpage’s elements.
HTML is inert. CSS is fluid.
CSS brings a webpage to life, by applying a coat of paint on its static content, and elevates its purpose through color, space, emphasis and motion.
20 - CSS DefinitionSelector { Element-Property : Value; }21 - CSS Syntax
You can insert CSS into your HTML document
<head> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
<head> <style type="text/css"> p { background: #336699; } </style> </head>
<p style="background: #335599;"> this paragraph has an background color </p>22 - CSS Insert
Because we want to separate the content (HTML) from its presentation (CSS).
If you want to visualize the purpose of this distinction, head towards the wonderful CSS Zen Garden: each design uses theexact same HTML but a different CSS each time.
It makes maintenance easier as well: the same CSS file can be used for a whole website. It provides flexiblity: focus on the content on one side, the styling on the other. SEO purposes, different concerns.
23 - Why CSS/* A CSS rule */ selector{ property: value;}
You could read it like:
who{ what: how;}
CSS is a 3-part process:
This whole block (selector/property/value) is a CSS rule.
24 - CSS Syntax Howp { font : red; } /* selects all p-Elements within the given HTML */ <p>red font</p>
.redfont { font : red; } /* selects all elements with class attribute matching classname */ <div class="redfont">red font</div> <p class="redfont">red font</p>
#itemone { font : red; } /* selects the one element with matching id attribute */ <div id="itemone" class="some numbers">red font</div>25 - CSS Selecting elements
A space in a selector defines a ancestor/descendant relationship. Let’s say we want the links in our header to be in red:
This can be read from right to left as: “Select all a
elements that are within a header
element”. This will prevent all other links (that aren’t in the header) to remain unaffected.
HTML elements can have different states. The most common case is when you hover over a link. It’s possible in CSS to apply a different style when such an event occurs.
Pseudo-class selectors are attached to usual selectors and start with a colon :
:
An HTML element can be targeted by multiple CSS rules. Example:
What if we have such CSS rules ?
ID- Selectors are more important than Class- Selectors are more important than Tag- Selectors.
28 - Rule HierarchyCSS provides 145 colors names, from the most basic (black, white, orange, yellow, blue…) to the more specific (lawngreen, orchid, crimson…).
Because the RGB model is directly related to how colors are physically rendered, it has become a CSS color unit.
The rgba color unit is rgb to which we add an alpha value (ranging from 0 to 1, in decimal values), which defines how transparent the color is:
29 - ColorsThe most common system within CSS are the hexadecimal values, like #db4e44.
In hexadecimal, we have 16 symbols to form numbers. Because 0-9 are not enough symbols, we also use A-F. And it starts at zero. So:
4
in hexadecimal is 3
12
in hexadecimal is B
16
in hexadecimal is 10
because after you’ve run out of symbols (the last one being F
), you add a second symbol to the left and increment (0
becomes 1
) and the right one starts over (from F
to 0
)There many CSS properties that require size units:
font-size
defines the size of the textborder-width
defines the weight of element bordersmargin
defines the spacing between elementsleft/right/top/bottom
allows to position and move elementsThe most used units are:
px
for pixels%
for percentageem
for sizing relative to the parent’s font-size
value.Because computer screens use pixels to display the content, it is the most common size unit in CSS.
It can be used to fix the width of an element:
Or set the text size:
Pixels in CSS are straightforward because they define absolute values: they are not affected by other inherited CSS properties.
They are also widely used for positioning and spacing purposes.
32 - Sizes - PixelsPercentages are relative units: they rely upon the element’s parent and/or ancestor.
For example, block-level elements like paragraphs naturally take up the whole width available. The following CSS rule will resize them to half of the width available.
Percentages can help set other CSS properties, like text size:
33 - Sizes - Percentagesem
is a relative unit: it depends upon the value of the element’s font-size
.
For example, if the parent has a font-size of 20px
and you apply font-size: 0.8em
to a child element, this child element will render a font-size of 16px
.
The em
unit is interesting as you define font sizes of HTML elements relative to one another. To design a pleasing and easy to read webpage, you need consistent visual depth. For example, you want your <h1>
to be twice as big as your body text, your <h2>
only 1.5 times as big, and your sidebar slightly smaller. This could easily be achieved in CSS:
If you decide to change the size of your body text, the relative sizes of your headings and sidebar will change accordingly, and your webpage will remain visually balanced.
34 - Sizes - EMThe rem
unit is similar to em
, but instead of depending upon the parent’s value, it relies upon the root element’s value, which is the <html>
element.
The difference between rem
and em
is that rem
values are fixed while em
values can multiply between each other.
If you set your html{ font-size: 18px;}
:
2rem
will always be equal to 36px
, no matter where you use in your CSS2em
will always be equal to double the parent’s font-size
, so not necessarily 36px
Extend you existing website by the following elements: