CSS Notes
CSS Notes
Styles are set using CSS properties. For example, you can set font
properties (size, colors, style etc), background images, border styles,
and much more.
1. Inline
2. Internal
3. External
Inline
Inline styles are placed straight into the HTML tags using the style attribute.
Page | 1
But, if you remember, the best-practice approach is that the HTML should
be a stand-alone, presentation free document, and so in-line styles should
be avoided wherever possible.
Internal
Inside the head element, the style tags surround all of the styles for
the page.
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p{
color: red;
}
a{
color: blue;
}
</style>
This will make all of the paragraphs in the page red and all of the
links blue.
There is a separate CSS file, which will simply look something like:
p{
color: red;
}
a{
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
HTML vs CSS
Page | 3
It's not really "HTML vs CSS".
In fact HTML and CSS are the best of friends! CSS is a supplementary
extension to HTML. Here's what each does:
HTML
CSS
So, you can write an HTML document without being concerned with
its presentation, and then use CSS to specify how it will be presented
within any given context.
Not only this, but you can change the CSS without having to change
the HTML. In other words, you can "plug" a style sheet into an HTML
document and the HTML document will immediately take on the
styles of that style sheet.
Page | 4
Example
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
Page | 5
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
main {
width: 200px;
height: 200px;
padding: 10px;
background: beige;
}
h1 {
font-family: fantasy, cursive, serif;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p{
font-family: sans-serif;
color: orange;
}
</style>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
Page | 6
CSS Syntax — How to Code CSS
1. Selector
2. Property
3. Value
Once you start coding CSS, you'll do so without thinking "this is a selector"
or "that is a property".
Syntax
The selector represents the HTML element that you want to style.
For example:
h1 { color: blue }
This code tells the browser to render all occurrences of the HTML <h1>
element in blue.
Page | 7
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the
selectors with a comma.
Readability
You can make your CSS code more readable by spreading your style
declarations across multiple lines.
This doesn't affect how your code is rendered - it just makes it easier
for you to read.
h1 {
color: blue;
font-family: arial, helvetica, "sans serif";
font-size: 150%;
}
Page | 8
CSS Class Selectors
Perhaps you want the color of your headings to reflect the section of
the site that you're in.
To do this, you link the element to the style by declaring a style for
the class, then assigning that class to the element.
Page | 9
CSS Class Syntax
You declare a CSS class by using a dot (.) followed by the class
name.
After the class name you simply enter the properties/values that you
want to assign to your class.
If you want to use the same class name for multiple elements, but
each with a different style, you can prefix the dot with the HTML
element name.
If you want to use the same class name for multiple elements, but
each with a different style, you can prefix the dot with the HTML
element name.
<!DOCTYPE html>
<title>Example</title>
<style>
div.css-section {
border:1px dotted red;
padding: 20px;
}
p.css-section {
color:green;
}
</style>
<div class="css-section">CSS Class</div>
<p class="css-section">CSS classes can be very useful</p>
Page | 10
You can also select elements (or classes) that's nested within another
element or class.
For example, div.css-section p will select all <p> elements that are nested
within a <div> element that uses the .css-section class.
One major benefit of doing this is that you don't need to apply a class to
every instance of an element when it's nested within another element that
uses a class.
Here's an example:
Page | 11
<!DOCTYPE html>
<title>Example</title>
<style>
div.css-section {
border:1px dotted red;
padding: 20px;
}
div.css-section p {
color:green;
}
</style>
</div>
Page | 12
CSS ID Selectors
This allows you to define a style that can only be used by the element
you assign the ID to.
CSS ID Syntax
The syntax for declaring a CSS ID is the same as for classes, except that
instead of using a dot, you use a hash (#).
#id-name { property:value; }
Again, similar to classes, if you want to use the same id name for multiple
elements, but each with a different style, you can prefix the hash with the
HTML element name
Page | 13
<!DOCTYPE html>
<title>Example</title>
<style>
div#css-section {
border:1px dotted red;
padding: 20px;
}
</style>
<div id="css-section">
</div>
<div>
</div>
Here the First div is applied with ID so it will take div#css-section and
hence applied Red dotted border with Padding
Second div is applied without ID so it just showed simple text with div
only
Page | 14
When to use classes
You should use classes when your style needs to be applied multiple
times on the same page.
For example, you might have many <h1> elements that need the
same style applied.
You should use IDs if only one element on the page should have the
style applied, and/or you need a unique identifier for that element.
You probably wouldn't want any other element on the page to use
this particular style.
Another useful thing about IDs is that you can use the Document
Object Model (DOM) to refer to them.
Page | 15
CSS Font Properties
These are the properties in the font namespace — those that include
the word font at the start of their name.
CSS font properties enable you to change the look of your text.
For example, you can assign a font family, apply bold or italic
formatting, change the size and more.
This is because, not all users will have the same fonts installed on
their computer.
So, if the user doesn't have your first choice font, the second choice
will be used for that user.
If they don't have the second choice, the third choice will be used,
and so on.
It's good practice to make your last choice a generic font family such
as serif or sans-serif (depending on whether you want a font with
serifs or not).
Page | 16
This way, if none of the other choices are on the user's computer,
their computer will choose a font that is on their computer, based on
the generic family that you provide.
<!DOCTYPE html>
<title>Example</title>
<style>
p{
font-family: Georgia, Garamond, serif;
}
</style>
Page | 17
CSS Font Size
<!DOCTYPE html>
<title>Example</title>
<style>
p{
font-size: 30px;
}
</style>
Page | 18
CSS Font Style
<!DOCTYPE html>
<title>Example</title>
<style>
p{
font-style: italic;
}
</style>
Page | 19
CSS Text Properties
Apart from the various CSS font properties, there are other properties
that can assist in styling your text.
For example, you can change the color of text, align text, add decoration
properties and more.
Using this list, you can learn how to use each css text property and what
it looks like in a browser.
<!DOCTYPE html>
<title>Example</title>
<style>
p{
color: olive;
}
</style>
Page | 20
CSS Text Align
<!DOCTYPE html>
<title>Example</title>
<style>
p{
text-align: right;
}
</style>
<title>Example</title>
<style>
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
</style>
Page | 22
For more information, see the text-decoration property.
<!DOCTYPE html>
<title>Example</title>
<style>
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
a:link {
text-decoration: none;
}
</style>
Page | 23
CSS Height and Width Properties
You can use a fixed height (i.e. pixels) or a percentage height. For
more info, see height and width.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
height: 150px;
width: 75px;
background-color: gold;
}
</style>
<div>
</div>
Page | 24
max-height and max-width Properties
<!DOCTYPE html>
<title>Example</title>
<style>
div {
max-height: 150px;
max-width: 75px;
background-color: gold;
}
</style>
<div>
</div>
Page | 25
min-height and min-width Properties
<!doctype html>
<title>Example</title>
<style>
button {
background: greenyellow;
min-width: 100px;
min-height: 50px;
}
</style>
<button>
min-height
</button>
Page | 26
CSS Background Code
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
background-color: yellow;
}
</style>
<div>
</div>
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
background-image: url("/pix/samples/bg2.png");
}
</style>
<div>
This 'div' has a background image applied.
</div>
Page | 28
CSS background-repeat
You can stop the image from repeating altogether (so that it only appears
once), or you can specify exactly how it repeats, especially when also using
the background-position and/or the background-size property.
Page | 29
<!doctype html>
<title>Example</title>
<style>
.imageRepeatBox {
height: 150px;
border: 1px solid black;
padding: 10px;
background-image: url("/pix/samples/bg1.gif");
background-repeat: no-repeat;
background-position: 90% 30%;
}
</style>
<div class="imageRepeatBox">
Page | 30
CSS background-attachment
Page | 31
CSS Border Properties
CSS allows you to set styles for the border of any HTML element.
It also provides you with a way of setting border styles for one or more
sides of an element.
To set border styles for all sides of an element, you use the border-
width, border-style, and border-color properties.
You can also use the border property to set all properties at once.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: orange;
}
</style>
<div>
This 'div' has border styles applied using the border-width, border-style,
and border-color properties.
</div>
Page | 32
The border Property
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border: 1px solid orange;
}
</style>
<div>
This 'div' has border styles applied using the 'border' property.
</div>
Page | 33
Border Styles
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 5px;
margin: 10px;
text-align: center;
border-color: orange;
border-width: 4px;
}
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
Page | 34
border-style: inset;
}
.outset {
border-style: outset;
}
.hidden {
border-style: hidden;
}
</style>
Border Radius
Page | 35
You can give your borders rounded corners by using the border-radius
property.
Page | 36
CSS Margin Properties
Margins define the space around the element. CSS margins are specified
in a similar way to borders - they can be set individually for each side, or all
sides at once.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
border: 1px solid orange;
}
div > p {
background: gold;
margin: 20px;
}
</style>
<div>
<p>
This text has a margin of 20 pixels on all four sides. It is nested within a div with a
border to make it easier to see the effect of the margin.
</p>
</div>
Page | 37
Shorthand Property
This method is quicker. It also uses less code than the previous method.
Actually, it's the same property that we used in our first example (i.e. the
margin property). The only difference is that we apply multiple values
against it.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
border: 10px solid lightblue;
}
div > p {
border: 1px dotted orange;
margin: 20px 50px 10px 30px;
}
</style>
<div>
<p>
This text has a different sized margin for each side. It is nested
within a 'div' with a border to make it easier to see the effect of the
margin.
</p>
</div>
Page | 38
Variations
You don't need to provide different values for all four sides.
You can provide one, two, three, or four values. Here's how it works:
If there are two values, the top and bottom margins are set to the first value
and the right and left margins are set to the second.
If there are three values, the top is set to the first value, the left and right
are set to the second, and the bottom is set to the third.
If there are four values, they apply to the top, right, bottom, and left,
respectively.
In other words:
margin:10px;
All four sides have a margin of 10 pixels.
margin:10px 20px;
Top and bottom have a margin of 10 pixels.
Right and left have a margin of 20 pixels.
Page | 39
CSS Padding Properties
Padding defines the space between the element's border and its content.
CSS padding is specified just like margins — it can be set individually for
each side, or all sides at once.
This example uses the padding shorthand property to set the same
padding on all sides of an element.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
padding: 20px;
}
div > p {
background: white;
}
</style>
<div>
<p>
Padding of 20 pixels on all four sides.
</p>
</div>
Page | 40
Setting Padding for Each Side
If you don't want the same padding settings to be applied to all four sides,
or if you want each side to have different padding, you can use the
following properties:
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
padding-top: 5px;
padding-right: 60px;
padding-bottom: 15px;
padding-left: 30px;
}
div > p {
background: white;
}
</style>
<div>
<p>
Different padding on each side.
</p>
</div>
Page | 41
Shorthand Property
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
margin: 20px;
padding: 5px 60px 15px 30px;
}
div > p {
background: white;
}
</style>
<div>
<p>
Different padding on each side.
</p>
</div>
Page | 42
Variations
Again, as with margin, you don't need to provide different values for
all four sides.
You can provide one, two, three, or four values. Here's how it works:
If there are two values, the top and bottom paddings are set to the
first value and the right and left paddings are set to the second.
If there are three values, the top is set to the first value, the left and
right are set to the second, and the bottom is set to the third.
If there are four values, they apply to the top, right, bottom, and left,
respectively.
In other words
Page | 43
How to Style Lists with CSS
HTML lists can have a number of different styles applied using CSS. Here
are some of the commonly used ones.
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style-type: circle;
}
</style>
<ul>
</ul>
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
list-style-image: url("/pix/samples/bullet1.png");
}
</style>
<ul>
</ul>
Page | 45
Determines whether the bullet is located inside the list's containing box or
outside.
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
</style>
<ul class="inside">
</ul>
<ul class="outside">
Page | 46
Page | 47
List Style
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style: square inside;
}
</style>
<ul>
</ul>
Page | 48
CSS Float
When you use the float property, other elements will simply wrap
around the element you applied the float to.
Note that I apply a margin to the right and bottom of the box, so that
the rest of the content doesn't run right up against the box.
Page | 49
<!DOCTYPE html>
<title>Example</title>
<style>
.float-left {
float: left;
padding: 20px;
margin: 0 10px 10px 0;
background: gold;
}
</style>
<div class="float-left">
Float left
</div>
<p>I added a margin to the right and bottom of the floated box so
that this text doesn't run right up against it. Play around with
the property values to see how it changes the layout.</p>
Page | 50
Aligning Boxes Side by Side
Normally these elements would stack up on top of each other, but by using
float: left, we can get them to display next to each other.
<!DOCTYPE html>
<title>Example</title>
<style>
div {
float: left;
padding: 20px;
}
.gold {
background: gold;
}
.limegreen {
background: limegreen;
}
.orange {
background: orange;
}
</style>
Page | 51
<div class="gold">
Gold
</div>
<div class="limegreen">
Limegreen
</div>
<div class="orange">
Orange
</div>
Page | 52
CSS Flexbox and Grid
CSS flexbox and grid can be used for creating website layouts and
positioning items on a web page. Here's an overview.
CSS flexbox and grid are two different layout models optimized for
user interface design.
Grid (also known as grid layout) goes a step further and allows you to
build two-dimensional layouts, where you can lay out and align
elements horizontally and vertically.
Flexbox
Once you have a flex container, you can then apply the various flex
properties to its children.
The flex property is shorthand for the main flex properties, and it goes
like this:
Page | 53
<!DOCTYPE html>
<title>Example</title>
<style>
.outer-container {
font: 16px sans-serif;
background: gold;
color: white;
height: 200px;
display: flex;
}
.box {
padding: 10px;
flex: 1 0 auto;
}
.larger {
background: yellowgreen;
flex: 3 0 auto;
}
</style>
<div class="outer-container">
<div class="box">Box</div>
<div class="box larger">Larger Box</div>
<div class="box">Box</div>
<div class="box larger">Larger Box</div>
</div>
Page | 54
Here, we specify that the normal box "grow factor" is 1 and the larger
box is 3.
The grow factor specifies how much the flex item grows relative to the
rest of the flex items in the flex container.
Page | 55
Flexbox - Introduction
Flexbox - Create a Flexbox
Flexbox - Create a Website Layout
Flexbox - Nested Flex Containers
Flexbox - Create a Responsive Layout
Flexbox - Align Form Elements
Flexbox - Create a Media Object
Flexbox - Alignment
Flexbox - Direction
The CSS Flexible Box Layout Module was developed by the CSS Working
Group to provide a box model that can be used for laying out more complex
applications and webpages than the previous models were designed for.
Page | 56
Flexbox Introduction
The table layout model was designed for laying out 2D data in a
tabular format.
Page | 57
Due to the limitations of these layout models, website layouts were
often achieved using a combination of floated elements, positioned
elements, and maybe even table layout.
The CSS Flexible Box Layout Module was developed by the CSS
Working Group to provide a box model that could overcome those
issues.
Page | 58
CSS display
We'll create one flex container and put three flex items inside it. We'll also
see how we can affect their size by adding more content, and playing
around with some property values.
Page | 59
<!doctype html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background: orangered;
flex-grow: 1;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
<div class="container">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Page | 60
We use display: flex to declare the outer element as a flex container.
Now all of that flex container's in-flow children automatically become flex
items and are therefore laid out using the flex layout model.
But you'll notice that the red flex item is wider than the other two.
The flex-grow property sets the flex item's grow factor, which determines
how much the flex item will grow relative to the other flex items (after
any positive free space is distributed).
The initial value is zero, so the other two items have a grow factor of
zero (because we haven't used the flex-grow property on those items).
This causes the red flex item to grow as much as needed to take up the
available space.
The other two items oblige by shrinking until they just fit their contents
and no more.
Page | 61
Adding Content
You might be wondering why we didn't just set the width of the red item by
using the width property?
Yes, we could've done that. But if we had, I wouldn't have been able to
show you this next bit...
<!doctype html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background: orangered;
flex-grow: 1;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
Page | 62
<div class="container">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3
<p>Flexbox items can grow and shrink as required to fit their
contents.</p> </div>
</div>
All I did was add some content to the blue item, and it grew as required
in order to fit the new content.
In fact, there was so much content, that the red item completely shrunk
to fit its own contents and no more.
So this is what I meant when I said the grow factor determines how
much the item will grow after any positive free space is distributed.
The height of the blue flex item also grew to accommodate the new
content. And just as importantly, the other two items also increased their
height to match.
Page | 63
With flexbox all this happens by default, so this saves us from having to
tweak heights and widths to try to get all our boxes looking even.
So now that I've showed you that you don't need to set the width on your
flex items, let's see what happens we do set the width.
<!doctype html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background: orangered;
flex-grow: 1;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
width: 40vw;
}
<div class="container">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3
<p>Flexbox items can grow and shrink as required to fit their contents.</p></div>
Page | 64
</div>
But because this now reduces the size of the blue item, the red item
grows again — but only as much as required to take up the available
free space.
So now we're starting to see why it's called flexible box layout.
Our flex items are nice and flexible — they seem happy to fit in with
whatever's going on around them.
You can probably imagine how easy it would be to take this a step
further and create a basic template for a website layout. So let's do that
now.
Page | 65
Create a Website Layout with Flexbox
Flexbox is ideal for creating commonly used website layouts such as the three-column, so-called holy
grail layout, where all columns need to remain at full height, regardless of how much (or little) content
resides within them. And where the main content comes before the navbar in the source code, but not
in the presentation.
<!doctype html>
<title>Example</title>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
#main {
display: flex;
min-height: calc(100vh - 40vh);
}
Page | 66
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
</style>
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
Prior to flexbox, this layout was notoriously difficult to achieve without using a hack
of some sort.
Developers would often have to do things like add extra markup, provide negative
margins, and use other tricks in order to get everything to line up correctly
regardless of the amount of content or the screen size.
Page | 67
But as the above example shows, flexbox makes it quite trivial. Here's a quick
rundown of the code.
In the example, we make the #main element the flex container, and leave the header
and footer as block elements. In other words, only the middle bit is flexbox.
You can combine flexbox with media queries to create a layout that responds to
different sized screens.
The reason for this is that certain layouts will always look too squashed (or even
completely broken) when viewed on narrower screens.
For example, you can use media queries to display layout 1 to wide screens
(desktops, laptops, etc), layout 2 to medium sized screens (tablets, large
phones), and layout 3 to narrow screens (mobile phones, etc).
Here, we'll take the layout that we created previously, and add a media query to it
so that it displays differently on smaller devices/viewports.
Page | 68
<!doctype html>
<title>Example</title>
<style>
*{
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
Page | 69
#main > article {
flex: 1;
}
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
Page | 70
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
This example should be displaying all items stacked on top of each other.
In that case, reduce the size of your browser window until you see the layout
collapse down.
Click the Preview button to view the example on a wider screen (this probably will
not work if you are already viewing this on a mobile device).
Page | 71
@media screen and (max-width: 575px)
{
#main {
display: block;
}
}
We did this on the #main element so that its children are no longer flex items.
However, what if we didn't want the items to appear in source order? What if we
want the navbar to appear before the article?
In that case, we could replace that change with another (just as simple) change.
We could do this:
<!doctype html>
<title>Example</title>
<style>
*{
box-sizing: border-box;
}
body
{
display: flex;
min-height: 100vh;
Page | 72
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
header, footer
{
background: yellowgreen;
height: 20vh;
}
</style>
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
Page | 74
So now, we have the navbar, the article, and then the sidebar.
But you'll notice that the navbar and sidebar are taller than the previous example.
How weird!
Specifically, the bit that goes flex: 0 0 20vw is setting the flex-basis to 20vw, which is 20
percent of the viewport's width.
We had previously applied this value for the width of the elements, but now that the flex-
direction is column, it uses that value for their height.
If we only want the height to be based on the content, we could change this value to
auto or remove the declaration altogether:
<!doctype html>
Page | 75
<title>Example</title>
<style>
*{
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
Page | 76
header, footer {
background: yellowgreen;
height: 20vh;
}
</style>
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
Page | 77
Mobile First
We could switch the code around so that our layout becomes a "mobile first"
layout.
Mobile first is a term for layouts those are created primarily for mobile devices,
but include a media query that changes the layout on larger devices.
That is the opposite of what we did above, where our default layout was for large
devices, and we added the media query for smaller devices.
Therefore, we can take the above example and modify it like this:
Page | 78
<!doctype html>
<title>Example</title>
<style>
*{
box-sizing: border-box;
}
body
{
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main
{
display: flex;
flex: 1;
flex-direction: column;
}
Page | 79
header, footer
{
background: yellowgreen;
height: 20vh;
}
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
Page | 80
The layout still looks the same (which is good), but our media query now looks like this:
Page | 81
And all the other code comes before it.
Note that the media query uses min-width this time, to match all devices of that
width and wider.
In the previous example we used max-width to match only devices that were that
width or narrower.
So what we've done is set the initial layout's flex-direction to column, then for
larger devices, set it to row.
We've also put the flex-basis back for the larger devices.
Page | 82
How to Align Form Elements with Flexbox
Here is how you can use flexbox to align your form elements nice and evenly.
Before flexbox came along, aligning form elements could be a bit tricky at times.
<!doctype html>
<style>
.wrapper {
background-color: whitesmoke;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row {
padding: .5em;
}
Page | 83
<form>
<ul class="wrapper">
<li class="form-row">
<label for="name">Name</label>
<li class="form-row">
<li class="form-row">
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
Page | 84
This form uses some light formatting, but the input fields are all the same width.
This results in the right edge looking a bit jagged as the inputs do not line up directly
above each other.
Now, if you are happy with that, fine. There is no need to go any further.
But what if we want to have the input controls extend all the way to the right edge?
Especially if the form itself is fluid, (i.e. it expands/contracts depending on the width
of its parent or viewport).
If the form is fluid, then each input control would also need to expand and contract
as required. In this case, you could not use a fixed width for the input controls
because as soon as the form's width changes, the width of the control would be
wrong.
Therefore, you'd need to use a bit of trickery to get it all working correctly.
However, flexbox allows you to do this without having to apply any magic tricks.
Page | 85
<!doctype html>
<title>Example</title>
<style>
.wrapper
{
background-color: whitesmoke;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row
{
display: flex;
justify-content: flex-end;
padding: .5em;
}
<form>
Page | 86
<ul class="wrapper">
<li class="form-row">
<label for="name">Name</label>
</li>
<li class="form-row">
</li>
<li class="form-row">
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
Page | 87
To do that, we first set each .form-row class to display: flex:
.form-row
{
display: flex;
justify-content: flex-end;
padding: .5em;
}
And now that each form row is a flex container, we apply the following to the input
controls:
So by applying flex: 1 to the input controls, flexbox will make these controls use up
the available free space, after the labels have been allocated.
Therefore, the labels remain at their normal width and any padding is retained.
The input controls can then start where they normally would, and stretch all the way
to the end.
Same-Width Controls
You could modify the above example so that the left edge of the form controls all line up
too (as well as the right edge).
<!doctype html>
<title>Example</title>
<style>
.wrapper {
Page | 88
background-color: whitesmoke;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row {
display: flex;
justify-content: flex-end;
padding: .5em;
}
</style>
<form>
<ul class="wrapper">
Page | 89
<li class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</li>
<li class="form-row">
<li class="form-row">
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
For example you could use a 1/3 ratio or a 1/4 ratio for wider forms.
If you are using a fixed width form, you can set one ratio that best suits the form.
If it is a fluid form that changes width based on the width of the viewport, then you
could use media queries to set a different ratio for each breakpoint.
Page | 90
Same-Width Controls but Responsive
Here's an example with media queries that change the ratio as the viewport size
changes.
<!doctype html>
<title>Example</title>
<style>
.wrapper {
background-color: whitesmoke;
list-style-type: none;
Page | 91
padding: 0;
border-radius: 3px;
}
.form-row {
display: flex;
justify-content: flex-end;
padding: .5em;
}
.form-row > label {
padding: .5em 1em .5em 0;
flex: 1;
}
.form-row > input {
flex: 2;
}
.form-row > input,
.form-row > button {
padding: .5em;
}
.form-row > button {
background: gray;
color: white;
border: 0;
}
@media screen and (min-width: 768px) {
.form-row > input {
flex: 3;
}
}
@media screen and (min-width: 992px) {
.form-row > input {
flex: 4;
}
}
@media screen and (min-width: 1200px) {
.form-row > input {
flex: 5;
}
}
</style>
<form>
Page | 92
<ul class="wrapper">
<li class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</li>
<li class="form-row">
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn">
</li>
<li class="form-row">
<label for="email">Email Address</label>
<input type="email" id="email">
</li>
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
If you resize the browser down. You should see the form controls adjusting their
width as you shrink the browser window.
This assumes you are not already viewing this on a smaller device.
If you are, try this out when you get to a larger one.
Page | 93
Page | 94