Just about everyone has used the internet before, in fact, you might even be using it right now! A web page is like a black box that displays information, takes some clicks and input, and magically spits out whatever you are looking for. Well after reading this article, how a web page functions will still be just as mysterious. BUT, you will learn how to create the basic structure and appearance of one, so that’s a solid start. Let’s get started!
Structure
First, start by creating a new file called index.html. Then fill it with the following code:
<!DOCTYPE html><html> <head> <title></title> </head> <body> </body></html>
Think of this like the foundation of a building. Once you have the above code down and the .html extension, your a browser will recognize your code as html and display it accordingly. You will then be able to add the specific words and structure you want your website to display.
Lets break down each component in the code above:
The DOCTYPE declaration tells your browser what type of document to expect. The head section contains information about the document. The title determines what is displayed on the tab. And the body section displays the content and is what you see on a page
Click on your file and open in inside your browser.
You should see a blank page, and if you look up at the address bar you see the path to your file for your computer. The tab also has the same path displayed. But now fill in a word in the title section.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>Now if you refresh your page, you should see that the name of the tab changed to the word you put inside. Perfect! Now try entering some text in your the body section.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
aaa
bbb
ccc
</body>
</html>If you refresh the page you will now see:
Odd. The page doesn’t match what we wrote in our document, we have all of our letter sets on different lines, but everything is all clumped up. One way we can separate our lines is with line-breaks
</br>Add a line-break between each set of letters:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
aaa
</br>
bbb
</br>
ccc
</body>
</html>Now if you refresh the page you get something like:
Perfect, now things are spaced out! However, there is a much better way to format your page. The reason that everything was together is because basic text is unformatted. If we want out page to display without having to manually do things like add line-breaks between lines, we use html elements. Think of it like a newspaper, the title is naturally at the top, paragraphs are naturally separated from each other, etc. These are the same principals we use for an html file and its elements.
HTML
HTML stand for Hyper Text Markup Language, and is the code that is used to give structure to a web page. It has a long list of elements that are used for this structuring, and most tags come as a pair, an opening tag (<tagName>) and a closing tag (</tagName).
<tagName></tagName>We will cover the following elements:
- paragraphs
- headings
- links
- images
- buttons
- divs
- lists (order and unordered)
- list items
Let’s start from the top.
1. Paragraph
A paragraph is indicated by an opening and closing p tag.
<p>Sentence</p>Paragraphs are used for creating a group of text that is bound within one section. All of the text inside a pair of p tags will be unformatted and appear next to each other regardless of spaces or lines just like when we used no tag. However, paragraphs will always be separated from each other. Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
</body>
</html>Your page should look like this:
Notice how “Paragraph 1.” and “Sentence 2.” are next to each other like the way our initial three letter groups were? This is because they were inside the same p tag, so relative to each other they were basically unformatted. But “Paragraph 2.” on the other hand is separated from the first two by a line break; this is because it is in a different paragraph.
2. Headings
A heading is indicated by a pair of h tags with a number next to the h.
<h1></h1><h3></h3>
Headings come in 6 sizes (h1 — h6) and make the text bigger, bold. Headings are used to highlight the importance of a line, with heading1 being for the most important. Think of how an article can have a large heading at the top, a smaller sub heading, then the paragraphs. Lets add some headings to our page.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
</body>
</html>
Our page should now look like:
Notice how the headings get smaller as they go up from h1?
3. Links
A link is indicated by a tags, also called anchor tags. This time however, there is another part beside just the opening tag, closing tag, and the text between the two; there is also the place for the thing you want to link to.
<a href="linkAddress">Link</a>A link creates a clickable line that when clicked will lead to the link inside the href. The text between the <a></a> tags determines what the clickable line will be. There are several types of links:
- Absolute
<a href=“http://www.google.com”>Google</a>Clicking an absolute link takes you to the site in the href.
- Relative
<a href=”index2.html”>Other Index</a>Clicking a relative link will open another file in your folder at the path specified in the href.
- Section link
<a href=”#id1”>See Id 1</a>Clicking a section link brings the page to the the element with the specified id in the href. We did not learn about id’s yet and will go more into it in the next section about css, but an id is something that is unique and can be assigned to an element so that it can be easily accessed.
To prepare for our links lets first make a new index2.html file inside the same folder. We will then copy our headings 2 more times, since we need the page to be long enough to scroll for the section link.
Next, we will then add an id to our first h1 element.
<h1 id="id1">Heading 1</h1>Lastly, we want to add our links at the bottom below our paragraphs.
<p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p>We are putting our links in p tags as well so that they are separated vertically. Our code should end up looking like this:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p> <p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p>
</body>
</html>
And our page now looks like
The page is too long to show the entire thing, which we did intentionally so we can jump. If you click the first link, the absolute url, it takes you to google. If you click the second one, our relative link, you get a blank page, since we have a blank index2.html file currently. And if you click the last link, you are taken back to the top of the page, this is because it brings you to the element with an id of “id1”, which is our first h1 at the top.
Lets delete all the extra headings that we made just so we don’t clog up the page. Back to:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p> <p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p>
</body>
</html>
5. Images
An image is indicated by an img tag. Like the anchor tag, it takes an extra link inside of the tag, but under “src” instead of “href”. However, this time the there is no opening and closing tag pair, just one big tag.
<img src=“image.png”/>It displays the picture linked in src. Similar to the anchor tag, you can put either the path of your image, or a link to an image online. Lets go save a picture into our folder as image. I chose this image: https://www.streamscheme.com/wp-content/uploads/2020/04/feelsgoodman.png of our good friend Pepe the frog.
Now add both types of img links to your code.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
<p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p>
<img src="image.png"/>
<img src="https://www.streamscheme.com/wp-content/uploads/2020/04/feelsgoodman.png"/>
</body>
</html>And on a page refresh we will now both images at the bottom.
The pictures area bit too large and distracting at the moment though, so lets remove them for now.
6. Buttons
A button is indicated by a set of button tags.
<button>Click Me!</button>This creates a rectangular button with the text between the button tags displayed in the center of the button. Lets add it to the bottom of our page.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p> <p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p> <button>Click Me!</button>
</body>
</html>
We now have a button at the bottom. Clicking it currently doesn’t do anything though since we don’t have any javascript or jquery set up (we won’t touch on this, but it is in another article of mine if you are interested https://nickyliu91.medium.com/basics-of-jquery-d202b7d40ee7).
7. Lists
There are two types of lists, an ordered list and an unordered list. The first uses the ol tag for “ordered list”
<ol>
</ol>and the second uses the ul tag for “unordered list”
<ul>
</ul>This element however uses another element to be functional; the list item, which uses an li tag.
<li>item 1</li>The list item is placed within the ul or ol tags.
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 2</li>
</ol>Lets add list items to our code.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p> <p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p> <button>Click Me!</button> <ol>
<li>item 1</li>
<li>item 2</li>
<li>item 2</li>
</ol> <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 2</li>
</ul>
</body>
</html>
Notice the two lists at the bottom. The first one was an ordered list, each item is numbered to the left. But since the bottom one was an unordered list, each item is a bullet point instead. Aside from that the two lists are fairly similar. Now onto the final element we will cover!
8. Divs
A div is used to group other elements together and serves as a container.
<div>
</div>This is mainly used for cssing purposes, which allows you to change the appearance of certain groups of element without effecting others. We will see an example of how to use divs in the next section, but for now lets separate our code into divs.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div> <div>
<p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
</div> <div>
<p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="index2.html">Other Index</a>
</p>
<p>
<a href="#id1">See Id 1</a>
</p>
</div> <div>
<button>Click Me!</button>
</div> <div>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 2</li>
</ol> <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Now, that we have all of our html elements, the skeleton of our webpage, set up, lets move onto css, the clothing/paint job of our web page!
CSS
CSS stands for Cascading Style Sheet, and is incharge of how the above html elements are displayed on a page. CSS can be added into the html code of an element directly, but best practice is to have a separate css sheet that is imported into your html page. Start by creating “styles.css” file, then importing it into your html file by adding the following line inside the head section under your title.
<link rel="stylesheet" type="text/css" href="styles.css" />We very briefly touched on id’s earlier, but we will go more into depth on that now, since they are mainly used for css. Any element can be given an id attribute by including id=“idName” inside of its opening tag.
<p id="firstParagraph">Paragraph 1</p><h1 id="firstHeader">Paragraph 1</h1>
All id values should be unique, meaning that no two elements should have the same id value.
A similar attribute is class, which works very similar to the id.
<p class="firstClass">Paragraph 1</p><h1 class="secondClass">Paragraph 1</h1>
The difference is that classes do not have to be unique. You use classes if you want a styling element to apply to several elements at once. For example, if you want one of your paragraphs and one of your to be blue, you would give them both the same class and set that class to be blue (we’ll go into this shortly). In contrast, if you want to make a specific element red, you would use the id and set that id to be red. Now, on to the css sheet.
In the css sheet, an element and its properties take on the following format
selectedElement {
property: value
}Selecting an element
There are three main ways to select elements:
- tag, in which you just the tag name, such as (p) or (h1)
- id, in which you use a # followed by the id name (#idName)
- class, in which you use a . followed by the class name (.className)
After you select an element, you select a property that you wish to change, then specify what you want that property to be. Below are a list of common properties
CSS Properties
- Color (color: blue) — the color of the text inside the selected element
2. Font-size (font-size: 20px) — the size of the text inside the selected element
3. Text-align (text-align: center) — how the text aligns (left, right, center)
4. Background-color (background-color: red) — the background color of the selected element
5. Height (height: 50px) — the height of a selected element
6. Width (width: 50px) — the width of a selected element
7. Border (border: solid black 5px) — the border of the selected element (lineType color size)
8. Border-direction — add a border to a specific direction (top left bottom right)
9. Border-radius (border-radius: 50px) — how round or angular the border corners are
10. Opacity (opacity: .5) — How see-throughable an element is, ranging from 0 being completely see through to the point that you can’t actually see the element itself, just the things behind it, to 1 being completely solid and not showing anything behind it
Now lets try out some of these properties and see how they look. For simplicity we will only need the headings and paragraphs, so lets start by deleting the rest.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<h1 id="id1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div> <div>
<p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
</div>
</body>
</html>
Add some ids and classes to our headings so we can play around with their styling.
<div>
<h1 id="id1">Heading 1</h1>
<h2 id="id2" class="class1">Heading 2</h2>
<h3 id="id3">Heading 3</h3>
<h4 id="id4">Heading 4</h4>
<h5 id="id5" class="class1">Heading 5</h5>
<h6 id="id6" class="class2">Heading 6</h6>
</div>Now, lets see how an example of each property.
- Color
p {
color: blue
}
We selected the p tag, and set it so that the text inside of our paragraph elements have turned blue.
2. Font-size
p {
color: blue;
font-size: 50px
}Note that an element can have more than one attribute changed at once, but it requires a ; between each one.
We now made the text much larger.
3. Text-align
p {
color: blue;
font-size: 50px;
text-align: center
}
The text is now in the center of the page horizontally.
4. Background-color
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow
}
This time the background of the text, rather than the text itself, has its color changed. This also shows the space that your element occupies.
5. Height
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px
}
You can tell that we increased the height of the paragraph elements since there is a lot more yellow now, which was the background color.
6. Width
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px;
width: 1000px
}
A p element left unchecked naturally takes up the space of the entire page from left to right, but we can specify the what we want it to be. In this case we specified a smaller number so the space shrank. But an element, such as an image, with a naturally smaller width can also be made larger.
Notice also that the element is not longer in the middle of the page, even though we did align-text: center earlier. The align-text actually aligns the text relative to the container, which in this case is the p element. Earlier the width of the p element was the width of the page, so the words were also in the center of the page, but now that the length is limited, the text is centered relative to the new p element’s width.
7. Border
The border attribute actually takes three values rather than one, the type of line, the thickness of the line, and the color.
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px;
width: 200px;
border: solid
There would be a bottom border for the second paragraph as well, but its too tall and got cut off.
8. Border-direction
Border-direction works basically the same as border, but you can specify a direction or set of directions (top, bottom, left, right) where you want the border to appear. Lets try these with some of our ids and classes.
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px;
width: 1000px;
border: solid 5px red
}#id1 {
border-top: solid 5px blue
}.class1 {
border-left: solid 10px blue;
border-right: solid 10px blue;
border-bottom: dashed 10px blue
}
We selected the element with an id of “id1”, and made it so only the top of it had a border. Next, notice how two elements had the border changes applied. This is because we selected elements with a class of “class1”, which two elements had as an attribute. We gave those two elements solid line borders on the left and right, but also a dash line type on the bottom.
9. Border-radius
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px;
width: 1000px;
border: solid 5px red;
border-radius: 90px
}#id1 {
border-top: solid 5px blue
}.class1 {
border-left: solid 10px blue;
border-right: solid 10px blue;
border-bottom: dashed 10px blue
}
The border radius rounded out the corners of our previously rectangular p element border.
10. Opacity
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 300px;
width: 1000px;
border: solid 5px red;
border-radius: 90px
}#id1 {
border-top: solid 5px blue;
opacity: .5
}.class1 {
border-left: solid 10px blue;
border-right: solid 10px blue;
border-bottom: dashed 10px blue;
opacity: 0
}
Elements have an opacity of 1 by default, meaning they are completely solid and cannot be seen through. You will notice the top heading became much lighter, this was given an opacity of .5, which means you can see through half of it. In contrast our previous class1 elements have completely disappeared; this is because their opacity was set to 0, meaning they are completely see-through.
Box Model
You will notice in our p elements from earlier, there are a few different components. The border, the space we turned yellow, and the text content. There is also actually one other part that may not seem as obvious right away, the space between the first paragraph and the text above it as well as between it and the second paragraph below it. These are described by the box model.
There is the content, the space around it and inside the border is the padding, followed by the border, then the space between the border and other elements is called the margin. All of these elements can be modified similar to the border element. For example:
Padding: 0Margin: 5pxMargin-top: 0
CSS Positioning
There are 5 positions:
- Static — default position, element positioned according to the page flow
- Relative — element positioned relative to its original position
- Absolute — if element is contained within another element which has position: relative, element will be positioned relative to its container element; otherwise will be positioned relative to the page body
- Fixed — element will be in the same position regardless of scrolling
- Sticky — element will be relatively positioned then become fixed when scrolled past
Lets test them out using our first header element.
- static
#id1 {
border-top: solid 5px blue;
opacity: .5;
position: static;
}
Since this is the default position, there is no change in the page.
2. relative
#id1 {
border-top: solid 5px blue;
opacity: .5;
position: relative;
top: 100px
}
Having a relative position means that when we make changes, we are making it relative to its original position. Here since we used top 100px, we are setting the element down 100px from its original position. Also notice how you can sort of see through it and see the heading behind it due to the .5 opacity.
3. absolute
#id1 {
border-top: solid 5px blue;
opacity: .5;
position: absolute;
}
If we makes its position absolute, it’s place in the container is removed and all the other elements in that container are moved up. It may look somewhat similar to the above relative position, but if you hover the image you can see that for the relative one there is large empty space at the top, but not so for this one. This is because in the earlier on heading 1 was shifted down while everything else kept their positions, but this time heading 1 got removed from the container, everything shifted up, then heading 1 was placed at the top of the page (if it was in another contained it would be placed relative to that). now if we do:
#id1 {
border-top: solid 5px blue;
opacity: .5;
position: absolute;
top: 100px
}
We shift the element down 100px from the top of the page (its new position) rather than 100px from its original position.
3. fixed
To see fixed, we have to make the page a bit longer first. Lets copy some of our headings besides the first one.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<h1 id="id1">Heading 1</h1>
<h2 id="id2" class="class1">Heading 2</h2>
<h3 id="id3">Heading 3</h3>
<h4 id="id4">Heading 4</h4>
<h5 id="id5" class="class1">Heading 5</h5>
<h6 id="id6" class="class2">Heading 6</h6>
<h2 id="id2" class="class1">Heading 2</h2>
<h3 id="id3">Heading 3</h3>
<h4 id="id4">Heading 4</h4>
<h5 id="id5" class="class1">Heading 5</h5>
<h6 id="id6" class="class2">Heading 6</h6>
</div>
<div>
<p>Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
</div>
</body>
</html>Now lets add our fixed position.
#id1 {
border-top: solid 5px blue;
opacity: .5;
position: fixed;
}Now if you scroll down, you’ll notice that the position of the Heading 1 doesn’t change relative to your page, it is always in the top left corner.
4. sticky
For sticky we want to instead select an element in the middle of the page. Let’s use paragraph 1 and add a few more paragraphs under it.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<h1 id="id1">Heading 1</h1>
<h2 id="id2" class="class1">Heading 2</h2>
<h3 id="id3">Heading 3</h3>
<h4 id="id4">Heading 4</h4>
<h5 id="id5" class="class1">Heading 5</h5>
<h6 id="id6" class="class2">Heading 6</h6>
<h2 id="id2" class="class1">Heading 2</h2>
<h3 id="id3">Heading 3</h3>
<h4 id="id4">Heading 4</h4>
<h5 id="id5" class="class1">Heading 5</h5>
<h6 id="id6" class="class2">Heading 6</h6>
</div>
<div>
<p id="p1">Paragraph 1. Sentence 2 </p>
<p>Paragraph 2 </p>
<p>Paragraph 3 </p>
<p>Paragraph 4 </p>
<p>Paragraph 5 </p>
</div>
</body>
</html>Now lets give it a sticky position.
#p1 {
position: sticky;
top: 100px
}You will see that the page looks normal, but when you scroll down after a point paragraph 1 gets stuck as a position in your screen and keeps it. The position relative to your screen you need to scroll to and which it will stick itself is 100px from the top in this case, but that number can be changed to be anything you want.
Flex-box
Flexbox is applied to a container to give it more options in arranging its contents and is done by selecting an element and giving it (display: flex). Lets use our index2.html file that we created earlier instead, and fill it with the following code, then open it up in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<p>Paragraph 3 </p>
<p>Paragraph 4 </p>
<p>Paragraph 5 </p>
<p>Paragraph 6 </p>
</div>
</body>
</html>Change up the css to:
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 300px;
border: solid 5px red;
border-radius: 90px
}Now lets set the div container to use flexbox
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 300px;
border: solid 5px red;
border-radius: 90px;
}div {
display: flex
}
You’ll notice right away that things went from vertical to horizontal. This is because of flex direction, which defaults to row (horizontal).
- Flex-direction (flex-direction: row/column) — arranges its elements to line up either horizontally (row) or vertically (column)
Lets try changing the direction to column
div {
display: flex;
flex-direction: column
}
Things are now vertical again. Set things back to row and it will be the same as the original picture.
div {
display: flex;
flex-direction: row
}2. Flex-wrap (flex-wrap: wrap/nowrap) — if items pass the end of the page items will move onto a second row/column (wrap) or items will shrink to fit the page (nowrap).
To see flex wrap in action, we must first make each paragraph wider.
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 600px;
border: solid 5px red;
border-radius: 90px;
}
Looks similar to when the width was 300. In fact, it will look the same even if you set the width the 1000. This is because the flex-wrap default is nowrap, which will shrink the items to fit into the page. But if you add wrap:
div {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
This makes it so that when items are too long to fit in the page they go to the next row.
For the remaining 2, we only need 3 paragraphs now and we need the items to be smaller, so lets adjust our code again.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<p>Paragraph 3 </p>
</body>
</html>For our html file. And:
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 300px;
border: solid 5px red;
border-radius: 90px;
}div {
display: flex
}
for our css file. The page now looks something like:
3. Justify-content (justify-content: type) — aligns items along the horizontal axis. There are five different positions:
- flex-start (the default, all elements are grouped up at the start of the container)
div {
display: flex;
justify-content: flex-start
}
- center (all grouped up in the horizontal center with equal amounts of space to the left and right)
div {
display: flex;
justify-content: center
}
- flex-end (grouped up at the end of the container)
div {
display: flex;
justify-content: flex-end
}
- space-around (equal amounts of space to the sides of each item)
div {
display: flex;
justify-content: space-around
}
- space-between (equal amounts of space between each item)
div {
display: flex;
justify-content: space-between
}
4. Align-items (align-items: type) — similar to justify-content but for the vertical axis instead.
It will make things easier to see by changing the background color of the div to blue and giving it a set height.
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 300px;
border: solid 5px red;
border-radius: 90px;
}div {
height: 600px;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Now we can start with the different ways to align-items.
- stretch (the default, all elements are stretched vertically to fill up the entire height of the container)
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
width: 300px;
border: solid 5px red;
border-radius: 90px;
}div {
height: 600px;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch
}
To see the other types though, we well need to limit the height of the paragraphs so that they don’t stretch along with the div.
p {
color: blue;
font-size: 50px;
text-align: center;
background-color: yellow;
height: 200px;
width: 300px;
border: solid 5px red;
border-radius: 90px;
}div {
height: 600px;
background-color: blue;
display: flex;
justify-content: space-between;
align-items: stretch
}
Perfect! Now our div is a tall background with smaller p elements inside.
- flex-start (all elements are lined up at the top of the container).
div {
height: 600px;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}If the heights of all elements inside are specified, then flex-start becomes the new default.
- center (all elements lined at the middle of the container)
div {
height: 600px;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
- flex-end (all elements are at the bottom of the container)
div {
height: 600px;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
https://flexboxfroggy.com/ is an amazing website to help practice flexbox, definitely check that out if you want to learn more.
This concludes our cover of some of the more common HTML and CSS elements. You now know the structure used to create a the skeleton of a webpage, as well as how to modify its appearance. If you want to go deeper into making a website that actually does cool things, feel free to check out some of my other articles, such as adding jQuery to your HTML file: https://nickyliu91.medium.com/basics-of-jquery-d202b7d40ee7 . Thank you for reading!