HTML and CSS for Complete Beginners — Learn by Building a Website
So far, over 4128 people have started my Coding Founders course (Learn to Code by Cloning ProductHunt ).
The problem? A lot of them come to the course without the foundational knowledge and experience with HTML and CSS (and web development) that they need to complete the course with ease.
The solution: This free book will give you a practical introduction to Web Development with HTML and CSS.
You’ll learn by building a real website, so it’s fun and engaging throughout.
You can read the full book on this page or download the eBook as a free PDF here if you prefer to read offline.
Enjoy.
Table of Contents
Chapter 1 — How the internet works.
Chapter 2 — Getting Familiar with HTML and CSS
Chapter 3 — A Deeper Understanding of HTML
Chapter 4 — Your First Project
Chapter 1 — How the internet works.
Every website on the internet is made with HTML and CSS (and often Javascript). But what exactly is HTML and CSS? How does the internet even work? That’s what you’re going to learn in this chapter
What is HTML and CSS
As you probably already know, programming languages are designed to allow humans communicate with computers in a language that they can understand.
It’s the same with HTML and CSS. They are languages that allow you (the web developer) to communicate with the web browser in a language that it can understand and tell it exactly how you want your web page to be displayed.
HTML (Hyper Text Markup Language) is a “markup language” used to write web pages. It lets you tell the browser what type of content you have on the page (i.e. “this is an image”, “this is paragraph text”, “this is a heading”, “this is a link” etc.)
CSS (Cascading Style Sheets) on the other hand lets you specify exactly how that content should be displayed in the browser. With CSS, you can tell the browser things like
· “I want all images to be 50px wide and 40px tall”,
· “I want my headings to be red”,
· “make all paragraph text blue and 16px in size”
· “make this link blue”
· “Add a red, 2px border around this block of text”
Things like that. You won’t say them fully in English though, you communicate instead in CSS (which you’ll learn how to speak soon enough).
How the web works
When you type a url (say www.google.com) into your web browser and press enter, what happens? How do we end up with the website we requested showing on our screen? The answer it turns out, is pretty interesting.
Every active url (google.com in this case) is mapped to something called an Internet Protocol Address (IP address for short). Every computer on the internet has one and it’s unique for that computer at any point in time.
So when you type google.com into your web browser, your browser uses the IP address mapped to google.com (google.com’s IP address is 216.58.219.46 at the time of writing), to find the computer (or more accurately, the server) that’s hosting the files the browser needs to display the web page, google.com.
It makes a HTTP request (via the internet), to the computer at that IP address, asking for the files it needs to display the page that you requested (in this case, google.com).
If the server has these files (in this case, it does), it responds with (you guessed it) a HTTP Response. This response contains the files your browser needs to display the website on your screen.
Your browser gets these files (HTML code), and starts to interpret it from top to bottom. If it finds any images, videos, files or assets linked or embedded in the page, the browser goes back to the server (with another HTTP Request each time), to fetch all these extra files (the images, videos… etc.).
Once it gets all the files, it interprets them, puts them in their specified positions and the result is the website you requested, displayed in your web browser, the way the web developer that made it intended.
All these processes happen in milliseconds and that’s why most web pages load almost instantly.
404 Error and other HTTP status codes
Wait Felix! What is HTTP? And status codes? WTF?
Hold your horses’ junior, I’ll get to that in a second. First, let’s try something. Open up your browser and head over to google.com/felix.
Obviously that page doesn’t exit (not until I buy Google and force them to add it), so you get a 404 error. What this means is that your browser made a request to the google servers (via it’s IP address), for the page hosted at /felix.
Unfortunately, the google servers couldn’t find any files in that folder, so It had nothing to return to you. So it sent you a 404 status code, which just means it couldn’t find anything.
So like, I have so much more stuff I want to tell you (Like what is HTTP, what is Hypertext, why google.com/felix is a “felix” folder in the gooogle.com parent directory) but I can see you getting bored (don’t worry, I’m not offended), so I’m just going to stop here.
To be honest, you won’t need any of this just yet and by the time you do, you’ll have enough familiarity with this web stuff to look it up yourself.
So let’s go ahead and start building some websites.
Download Sublime Text
A html document (a web page) is simply a text document, saved with a .htm or .html extension.
Open a new text document right now on your computer (I mean laptop — who still has a desktop computer?), call it what you like (I’ll name mine Felix) and add .html at the end before you save it.
Now in this document, type “My Name Is ‘Insert your name here’” and save it again. Now close your text editor and double click on the file you just created.
You’ll see that it opened up in the browser, displaying the text you just added to that document.
Voila! You just created your first website. Websites (and code in general) are written in either a text editor or an IDE. Don’t worry about IDEs for now but the text editor you have on your computer (be it gedit, notepad or text edit) is good enough to write almost any piece of software that you can imagine.
The problem is that your text editors were not designed for this purpose, so you’ll get frustrated a lot and have to repeat a lot of tasks that can be automated.
Luckily for us, smarter programmers than I’ll ever be have created quite a few text editors, specifically for writing code.
These advanced text editors are just regular text editors with a bunch of extra features to make our lives much easier as developers. They make writing code easy and (dare I say it) FUN too!
You can choose whichever one you like, but my favorite is Sublime Text. Sublime Text is free to use (they have an unlimited free trial) but when you get comfortable, you should pay the $79 for a license key and support the developers working full time to make this text editor awesome for all of us.
Chapter 2 — Getting Familiar with HTML and CSS
Introduction to HTML.
Html Elements
Html elements are used to describe the contents of the web page to the web browser. So for example, if you wanted to inform your web browser that the following text “this is a heading” should be treated as a heading, you wrap the text around a H1 Element, just like this:
<h1> this is a heading </h1>
Html Tags.
Html elements usually have two tags. So from the H1 example above, we have an opening tag (<h1>) and the closing tag (</h1>).
The main difference between the opening and closing tags, is that the closing tag has a forward slash (/) before the name of the element like so (</h1>).
Question: What’s the difference between an HTML element and a HTML tag?
Other examples of HTML Elements
<h1> …</h1> — — Most important heading
<h2> …</h2> — — Secondary heading
H1 — H6 — — Headings of different importance
Just like in your word processor where you can specify Headings of varying importance and have them styled differently, you use Elements H1-h6 to identify headings of varying importance in HTML.
<p> …</p> — — Paragraph Text
Use the P element to identify paragraph text
<a> …</a> — — Hyperlink element
and use the <a> element (short for anchor text) to link pages together.
I’ll introduce you to a lot more HTML elements pretty soon, when you have a better understanding of web development.
Self-closing elements
You’ll be forgiven if you think all html elements are structured this way: <tag> …content… </tag>, with an opening tag, some content and a closing tag.
It turns out, that some HTML elements have only one tag.
Elements like the <br /> element used to insert line breaks in your text and the <img /> element used to insert images into the page. These elements have only one tag and as you can see, the forward slash is right before the closing angle bracket in what would have been the opening tag.
These elements are called self-closing html elements and I believe they are single tagged, because they don’t actually describe any content. They are usually included for technical or presentation purposes.
We have other self-closing elements like the <hr />, used to insert a horizontal line in the page.
Please note that the forward slash before the closing angle bracket is optional in HTML. So, both <br /> and <br> are completely valid and will have the same effect.
Attributes
attribute = “value”
Attributes let you give the browser more information about the html element. So for example, the “A” element (<a>…</a>) is supposed to allow you turn the contents of the element into a hyperlink.
But how do you tell the browser where you want that content to link to? That’s where attributes come in.
HTML attributes in general have the following structure:
attribute = “value”
On the left side, we have the name of the attribute and on the right we have its value.
So with the A element, to tell the browser where we want to link the content to, we use the href attribute. And the value? (you guessed it). The value should be the full link of the page you are trying to link to.
One more thing. The attribute always goes in the opening tag, after the name of the element.
Example
If I wanted to link this sentence “this is a link to Google’s homepage” to the homepage of Google (google.com),
First, I’ll wrap the text around an A element like so:
<a> this is a link to Google’s homepage </a>,
then I’ll add a HREF attribute to the opening tag, with a value http://www.google.com/, which is the full link to googles homepage. Like so:
<a href= “http://www.google.com/” > this is a link to Google’s homepage </a>.
Remember that the value of the attribute, should always be in quotes and the attribute itself, should always be in the opening tag of the element.
Let that sink in for one second. Take a deep breath and try this simple exercise.
Exercise:
Without looking back at the example above, can you link this sentence “this is a link to Yahoo’s homepage” to the homepage of Yahoo (what the hell is a Yahoo?).
If you’ve never heard of Yahoo (I won’t blame you), the full link to their homepage is http://www.yahoo.com/
Alright. Without looking at the example above, go ahead and build the full link.
The HTML Document Structure
Now that we have most of the basics covered, let’s look at the basic structure of a real website.
While building a website the HTML Document Structure is the basic structure you must start with. All web pages on the internet start like this and they must have all these elements to be valid.
Here’s what it looks like:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
As you can see, it’s more like a skeleton for the web page. Let’s take each element one by one. We have 4 elements in total.
1. <!DOCTYPE html> — The first thing we see is the Doctyle Declaration. This just tells the browser what type of document this is. In this case, It’s HTML. There’s more to it than this of course, but it’ll never be relevant to you in your career, so for all intents and purposes that you’ll come across, this is basically it. (Note, the DOCTYPE declaration is NOT a HTML element)
2. Next, we have the HTML element (<html></html>). This tells the browser where the HTML document starts, and when it ends.
3. Inside the HTML element, we have the Head Element (<head></head>). If you remember attributes, they give the browser more information about the element. The head tag is where you give the browser more information about the HTML document. Title elements, Meta tags, Scripts and Stylesheets (linked or embedded), they all go in the header. You’ll get a better understanding of this when we start building web pages.
4. Finally, just below the HEAD element, we have the BODY element. This is where the main content (scratch that, all the contents) of your web page should go.
And that’s basically it. Follow these rules and you’ll have a valid website every time.
Your first web page
Let’s go ahead and build your first complete web page.
First, create a new text document and save it as “index.html”. Now right click and open this empty text document in sublime text.
Fill the document with the HTML DOCUMENT STRUCTURE we spoke about just now. Can you remember it?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Now you have a valid (albeit empty) html document. Let’s add some content.
In the body tag, add a H1 ELEMENT (do you remember how to write this?) with the text “My name is Felix”. Replace “Felix” with your name.
Save this document and open it in your browser (just double click). You should see “My name is Felix” like so:
Now
1. change the contents of the H1 Element to the obligatory “Hello World”,
2. Add a H2 with the sentence “My name is Felix!” (replace Felix with your first name)
3. Add a H3, H4, H5 and H6 with the same sentence “My name is Felix!”
4. Add a P with the sentence “Yup! My name is Felix and this is my first web page. Thanks for stopping by.”
Now open this document in the web browser (or refresh if it’s still open) and admire the beauty you just created.
Congratulations, you just made your first web page.
Now if you go back to the web browser look closely at the title bar, you’ll see that the title of the page is “Index.html”. This title is customisable. If you go to apple.com for example and look at their title, it says “Apple”.
Let’s customise the title of your web page to say your name (in my case, “Felix”).
Open sublime text and in the Head Element, add a Title element like so
<title>…</title>
the contents of which should be your name. You’ll end up with something like this:
Now lets head back to the browser and see what we’ve got.
As you can see, the foolish index.html title is gone and replaced nicely, with your beautiful name. This is our first time using the HEAD element, to give the browser more information about the page (in this case, we used it to add a Title).
We’ll be doing more of this real soon. For now, let’s move on to CSS.
What is CSS
Cascading stylesheets, but what does that even mean? Look at the four websites below (from the CSS Zen Garden project). What do they have in common?
It may not be obvious (in fact it’s 100% NOT obvious) that these 4 websites have EXACTLY the same HTML elements. For all intents and purposes, it is EXACTLY the same website. The only thing that’s different, is the CSS.
If HTML allows us to describe the content of the browser to the page (as you have seen), CSS lets us tell the browser EXACTLY how we want that content to be displayed.
So that’s what CSS is. It’s the language we use to tell the browser how to display our HTML documents.
CSS Declarations
CSS declarations are the rules we give the browser about how our content should be displayed.
It looks like this
property: value;
On the left we have the style property that we want to specify, and on the right, the value we want to give that property.
So for example, let’s say we wanted to change the color of some paragraph text to white. What this means is that we want to call the COLOR property, and give it a value of #fff (which is the HEXIDECIMAL value of white). We can do that easily with one declaration:
color: #fff;
Simple right? Don’t worry about the HEXIDECIMAL value for now. I’ll tell you where to find the HEX value of any color you want to use, when we start building more complex pages.
I’ll introduce you to a few more CSS declarations, but the way to learn them is by building websites. If you are building a website and you need to change the Font Size for example, just type in google (How do you change the font size of text in CSS) and you’ll get your answer.
Do this often enough and you’ll memorise almost everything you need to build a website without googling in no time. That’s how I learnt.
Apply CSS to HTML Documents
There are 3 ways to apply your CSS declarations to your HTML elements:
1. Inline CSS
2. Embedded CSS and
3. External CSS
Before we start messing around with this however, let’s do some housekeeping:
1. Create a folder called myfirstwebsite and move the index.html file we created earlier, into it.
2. Inside this “myfirstwebsite” folder, create a css folder and an img folder
Now we have a folder for our CSS files and a folder for all our images. It’s good to organise your website files like this. Otherwise, you’ll have a hard time keeping up when you have a large website with hundreds of documents.
Now open this folder in sublime text (in sublime text, File > Open > “double click on the ‘myfirstwebsite’ folder and click open”).
Inside sublime text, you’ll see the index.html file on the left. Double click to open it.
Now let’s clean up the html a little.
1. Remove the H3-H6 elements
2. Copy the H1, H2 and P elements and paste them twice.
Now you should have 3 copies of your H1, H2 and P elements like so:
Inline CSS
As I said earlier, HTML provides 3 ways to apply CSS to your HTML documents. The first one is the Inline CSS.
To do this, you create a style attribute in the element you want to style and apply your CSS declarations in this element here.
Let’s change the color of the first H1 to red. To do this with the inline method, we need to set the color property to “red” in a style attribute like so
<h1 style=“color:red;” > Hello World! </h1>
You can add as many CSS declarations as you like in this style attribute and they’ll all be applied to the element.
Embedded CSS
The problem with using attributes to style your html document is that it’s tedious. Imagine you had 40 H1 elements on your page, styling them one by one would be repetitive and boring (kill me now).
Thankfully, we can use Embedded CSS to target all the HTML elements in the web page at once.
First, let’s create a style element inside the Head element of the page (remember, the Head element is for additional information. In this case, the page styles).
If you just open the angle bracket, press st and enter, sublime text should auto complete it for you (if you have the page set to HTML — see the image below).
<style type=”text/css”>
</style>
Inside this element, we’ll add our CSS declarations, but how do we tell sublime text that we only want the CSS declarations to be applied (in this case) to out H1 elements?
We do so, with a CSS rule.
CSS rule look like this:
Selector {}
On the left you have the CSS selector and in the curly braces on the right, you put your css declarations.
There are quite a few types of CSS selectors and I’ll introduce you to them as we go along, but for now, we only need the ELEMENT selector.
The ELEMENT selector selects all ELEMENTS with the name you specified. So for example if we wanted to target all P elements on the page, we use the P selector like this
p {}
and our declarations go inside the curly braces.
In this case, we want to style all the H1 Elements on the page, and change their color to red.
So in the Style element, open up a css rule (with a h1 selector) and inside, add the declaration (property and value) to make the H1 elements on the page turn red. Like so:
<style type=”text/css”>
h1 {
color: red;
}
</style>
That’s it. You’ll now notice that all the H1 elements on the page display the text in red (open the file in your browser and see for yourself).
It’s important to note that your curly braces don’t have to be on the same line, or they can be if you want. I just like doing it like this because it’s cleaner to look at (especially when you have a few declarations in the same selector. Trust me, this happens a lot).
External CSS
This is basically the standard. I only use the other Inline or Embedded CSS when I absolutely have to. You’ll notice the benefits of External CSS when you are building large websites with tens or hundreds of pages.
How tedious would it be to have to apply a unique Style Element to each one of these pages? And what happens when you need to update things.
That’s where External CSS comes in. With External CSS, you write your CSS declarations in a separate .css file and link to it at the top of every page you want to apply those styles to.
This way, you can apply 1 CSS file to 100 (or a billion) pages. And when you want to make changes, you only have to update one file.
How cool is that?
1. In sublime text, create a new empty file and save it as custom.css in the css folder of your website.
2. Go back to the HTML page and remove the style tag.
3. Now back to custom.css. Create a css rule that targets all H1 elements (with an element selector) and set the color property of the element to red.
4. Do the same thing for the P element, but this time, set the color property to blue.
5. Also change the font-family property of the p elements to Arial
If you did this right, your custom.css file will look something like this:
h1 {
color: red;
}
p {
color: blue;
font-family: Arial;
}
Now head back to the browser and… Nothing! What’s going on?
Well, you forgot to link this .css file in the html document. Without this link, your index.html file knows nothing about the css rules in custom.css, so it won’t be able to apply them.
To do this, you add a “Stylesheet Link Tag” in the Head element of your html document.
This is what a Stylesheet Link Tag looks like:
<link rel=”stylesheet” type=”text/css” href=””>
The href attribute is where you specify the location of your .css file. In this case, it’s in “css/custom.css”. Now let’s update that Stylesheet Link Tag with this information.
<link rel=”stylesheet” type=”text/css” href=” css/custom.css “>
Aaaaah! That’s better. Now your Head Element should look something like this
<head>
<link rel=”stylesheet” type=”text/css” href=” css/custom.css”>
</head>
and if you open this up in the browser, you should see your styles neatly and accurately applied.
Voila.
Chapter 3 — A Deeper Understanding of HTML
Block and Inline Level Elements
Let’s go back to the website we created earlier. In the P Element, you should have the following paragraph “Yup! My name is Felix and this is my first web page. Thanks for stopping by.”
Go ahead and wrap the last sentence “Thanks for stopping by.” Around a Strong Element like so:
<p> Yup! My name is Felix and this is my first web page. <strong>Thanks for stopping by.</strong></p>
Now repeat this for all the P Elements on the page (you should have three in total).
The strong element has the effect of bolding text and if you open up this file in the browser, you’ll see that the text wrapped around the strong tag is now bolded.
Excellent.
Now let’s head back to custom.css. Add the following declaration to the H1, P selectors:
background-color: yellow;
this will change the background color of the element to yellow. Refresh the page in the browser so you can see the changes.
The first thing you should notice is that the color stretches all the way to the edge of the browser instead of stopping where the text seems to end.
Now create another CSS rule. This time, with a strong selector. Inside this rule,
1. create a declaration to set the background-color property of the strong element to blue.
2. Create another rule, to set the color property to white. This will change the text color.
3. Save the file and observe the changes in the browser.
Now something even stranger occurs. This time, the blue background only takes up the space filled up by the text, and nothing more.
So why did the yellow background stretch to the edge of the browser (the viewport) and the blue just take up enough space for the text?
That’s because the P element (and also the H1 and H2 elements actually) is a block level element and the strong tag is an inline element.
A Block-Level Element takes up as much space as it can by default, while the inline element takes up as much space as its contents need.
The Display Property
As with almost anything in HTML, the display property of an HTML element is customisable with CSS. The display property is what tells the element whether to behave like a block element or an inline element.
So for block level elements, their default display property is
Display: block;
But you can override this in CSS.
For inline elements, their default display property is
Display: inline;
So you can change this around to make an inline element behave completely like a block-level element and vice versa.
We have other types of display properties but they won’t make sense to you until you have a little more experience with building web pages, so I’ll introduce them to you much later.
This section should be in the next chapter where I talk about CSS, but I had to bring it up now after talking about Block and Inline elements. Forgive me.
Let’s do a little exercise before we move on. In the Strong Element inside the last P Element in your index.html file, add a style attribute (yeah, let’s use the style attribute this one time) and add the following CSS declaration:
Display: block;
Now reload your browser and what happens? You see that the text has jumped into it’s own line and the strong element now takes up as much space as it can, stretching all the way to the edge of the browser (the viewport).
That’s how block level elements behave. They like to be on their own line and they take as much space as they can.
Do one more thing for me.
Add a style attribute to the last P Element, and add the following declaration to it
Padding: 20px;
Don’t worry about padding for now, (I’ll explain that later). What I want you to notice is that you should now see some yellow at the bottom of the below the strong element.
I did this to show you that while the strong element is now a block level element, it still resides fully inside the P element. It (the strong element) will take up as much space as is available to it within its parent container (the P element).
Text Formatting
In this section, I’ll introduce you to a bunch of HTML elements for text formatting. If you think about it, most of the web is made up of text, with pretty images, colors and designs around it.
You’ll also learn a little bit more about how HTML works.
This is a learn by doing book, so
· open up a new index.html document (put it in a new folder called “textformatting”)
· Inside “textformatting”, create a css folder and an img folder
· Open index.html in sublime text
· Add the HTML Document Structure
· Give the page a Title (Text Formatting)
Now we’re ready to get started. BTW, do you know why I keep naming my web pages index.html?
Remember when we talked about how visiting google.com means that your browser is making a request for the files it needs to display the google.com web page in your browser.
Now Imagine that on google’s server, in the google.com folder (we call this the root directory of the website), we had 5 files
· Index.html
· Secondpage.html
· Thirdpage.html…
· And so on.
So imagine we had these 5 files in the google.com folder. How will the browser decide which one to send to us?
The default behaviour is to send the index.html file If you want to get to secondpage.html for example, you need to visit google.com/secondpage.html.
You get the idea?
Of course, as with almost everything else in web development, this default behaviour can be changed.
Finally, I do not intend for this book to be a glossary or an encyclopedia of code. You can always look up definations and elements when you need them. The point of this book is to teach you the practical skill of building websites. With that in mind, I’ll introduce you only to the essential elements. You’ll discover the rest as you need them while building websites.
Heading Elements
Copy the following into the body element of your index.html page
<h1>This is a H1</h1>
<h2>This is a H2</h2>
<h3>This is a H3</h3>
<h4>This is a H4</h4>
<h5>This is a H5</h5>
<h6>This is a H6</h6>
You’ll see that they are all headings, displayed in incrementally decreasing font sizes (see what I did there?).
Paragraph Text
Below that, add a P element, used to denote Paragraph text.
<p>Paragraph Text</p>
Bolded Paragraph Text
Below that, add a P element, add this one with some bolded text.
<p><b>Bolded Paragraph Text</b></p>
You can also use the <strong> element, but it has semantic meaning, implying that the text is of STRONG IMPORTANCE. If it’s just the bold effect you want, use the <b> element for now. Later, I’ll teach you how to bold text in CSS and that is the preferred option.
Underlined Paragraph Text
<p><u>Underlined Paragraph Text</u></p>
Again, I’ll teach you how to do this with CSS much later.
Italicised Paragraph Text
<p><i>Underlined Paragraph Text</i></p>
You can use the <i> or the <em> to italicise text, although that’s not what these elements were created for. The <i> tag defines a part of text in an alternate voice or mood and it’s usually displayed in italic. The <em> element also has the effect of italicising text but semantically, it should be used to stress emphasis.
“The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.” — From MDN
Lists
Sometimes in HTML (as with any other text document), you’ll need to organise things into a list. As you know from your regular text document, we have two types of lists. Numbered lists (called Ordered lists in HTML) and Bullet Point lists (called Unordered lists in HTML).
So let’s say I have a list of my favourite cars, this is how to arrange them in an Unordered (bullet point ) list.
We start with a <ul> element which stands for Unordered List, and inside the <ul>, we have <li> elements, which will hold your list items. Here’s how it looks:
<ul>
<li>Zonda</li>
<li>BMW i8</li>
<li>Arial Atom</li>
</ul>
This will render a bullet point list (unordered list) in your browser.
An ordered list will look almost exactly the same, except that the <ul> will be replaced by an <ol> (for Ordered List). It looks like this:
<ol>
<li>Zonda</li>
<li>BMW i8</li>
<li>Arial Atom</li>
</ol>
That’s all there is to it really.
The <pre> Element
This is the last text formatting element I’m going to introduce you to. By default, HTML ignores whitespace so in html, the following two paragraphs will display exactly the same in the browser
<p>Hi, my name is Felix</p>
<p>Hi, my
name is
Felix</p>
They’ll both display like this in the browser:
Hi, my name is Felix
The reason for this is that HTML ignores excess whitespace, so if fit sees more than one space, or even line breaks, it just treats them all as one space (dum right?).
The <pre> element is used to preserve whitespace so if you wrap the second <p> element above in a <pre> element like so:
<pre>
<p>Hi, my
name is
Felix</p>
</pre>
it’ll display exactly like this, with the whitespaces and line breaks preserved.
We have quite a few other text formatting elements, like <code> for code blocks, <quote> and <blockquote> for quotations, <strike> for strikethroughs and <sup> and <sub> for superscripts and subscripts.
In 99.9% of your web development career, these are all the text formatting elements you’ll need.
You can find an exhaustive list of HTML elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
Special elements — the <div> and the <span>
I believe these two elements were created 100% for the purpose of applying CSS to HTML documents. Of course, you can apply CSS to any HTML element you like, but when we start building websites, you’ll start to understand why these are necessary.
The <div> is a block-level element with no semantic meaning. You use it to group HTML elements together, so you can apply CSS styling to the block.
Exercise:
- Take the last 3 elements in your Body element and wrap them around a Div.
- Create a custom.css file in your CSS folder and link it in the <head> element in your HTML document
- Add a CSS rule with a Div selector and change the background color to yellow
Now you will see that the Div now has a background color of yellow which is behind all its child elements.
Awesome.
Then <span> is the inline sister to the <div>. You’ll use it to apply CSS to specific spans off text, or any other thing that you want to remain inline.
You can put any inline level element in a <span>, but avoid putting block-level elements inside spans. That’s just wrong use a <div> instead if your group needs to contain block level elements.
It also has no semantic meaning
Exercise:
- In the last P elements in your Body element, just cut half of the sentence off at any point and wrap it around a <span> element
- In your custom.css file, add a CSS rule with a Div selector and change the background color to blue, color to white (color: #fff;) and font-family to Arial.
You’ll see that everything remains inline and your CSS is applied just to the part of the text that you cut.
Simples.
The #id and the .class
We use the #id and the .class to apply CSS to specific HTML elements. In the previous example we used the Div Element-Selector to apply CSS to our HTML page. The problem with this approach (using Element Selectors to target HTML) is that it targets all the Divs on the page.
What if we only wanted to apply the CSS to just one element, or a few. That’s where the #id’s and .class selectors come in.
The main difference between the two, is that the #id must be unique. So if you are using the #id selector, you must target only one element with it.
With the .class selector however, you can target as many HTML elements as you desire and the CSS will be applied to them all.
One final thing. The #id is also commonly used to apply JavaScript to HTML documents.
Images
We use the <img> element to add images to our web pages. For the <img> tag to be valid, it needs to have two attributes.
1. The src=“” attribute to tell the browser where the img file is located, and
2. The alt=“” attribute to provide a descriptive alternative text in case the image fails to load.
A valid <img> element looks like this
<img src=“/img/cat.gif” alt= “Cat Picture”>
As you can see, the <img> element is a self-closing HTML element.
You’ll get to play with a live example when we get to the projects.
Chapter 4 — Your First Project
Step 1 — Background Color
We’ll change the background color of the entire page from white (the default background color) to light grey by styling the “BODY” in our custom.css file.
To do this, Open the custom.css file and create a body selector like so:
body{
}
In the body selector, create a background color property and add a value of #e7e7e7 like so:
body{
background-color: #e7e7e7;
}
This will change the background color of the document from white to light grey.
Step 2 — Add the top bar.
To add the little bar at the top of the page, we’ll add a DIV into the body element and give it a class of “heading” so we can style it in the CSS later.
<body>
<div class=“heading” ></div>
</body>
Why are we adding a div? A div is a block level element so if you don’t give the div a width in css, it will expand to the width of its parent container, or the view port. In this case, the div is not in any parent container, so it will expand to the width of the view port. In the custom.css file, we’ll create a class selector for “heading” so that we can add a background color to the div.
.heading{
background-color: #2e3639;
}
If save the page and open it in your browser right now, you’ll see that the the page looks exactly like it was before. The div we just added and styled seems to be missing. This is because when you add a div into a page and the div has no content it collapses to a height of 0px, so it will appear invincible in the page.
There are two ways to get around this. You could specify a height for the div in the css but its always bad practice to specify heights for containers because for example in the future, if you decide to add some content and convert that tiny header to a nav bar, your page will break because the div wont be able to expand to fit the content.
What we’ll do instead is add some padding to the bottom of the container like so:
.heading{
padding-bottom: 8px;
background-color: #2e3639;
}
If you look at the page again, you’ll see that there is some padding on the top and on the sides of the page. This is part of the default css styles that the browser adds to every web page. You can remove this by setting the paddings and margins on the body selector to zero in css like so:
body{
background-color: #e7e7e7;
padding 0;
margin 0;
}
Step 3 — The Body
HTML
Next, we’ll add the white box that contains all the content of the landing page by adding another div to the page and giving it a class of container.
CSS
<body>
<div class=”heading” ></div>
<div class=”container” ></div>
</body>
Again, we’ll create a .container selector in the css file and add our styling to it. We’ll give the container a background color of white(#fff) and a light grey(#ddd) 1px border to outline the container properly. Also, we want the container to have a visible width of 750px and the content area to have a width of 580px.
If you remember the “css box model”, you’ll remember that when we set a width of a box element, you are setting the width of the content area only and the paddings and borders are added to that. So to have a visible width of 750px for the container, we need to add padding of 85px to each side off the div which is set to 580px, to give a total of 750px.
If you have been listening, you’ll realise that the total is actually 752 because of the borders we added on each side, so we’ll account for the border by setting the width of the container to 578px instead of 580px to give us a total of 750px.
.container{
background-color: #fff;
border: 1px solid #ddd;
width: 578px;
padding-left: 85px;
padding-right: 85px;
}
Now if you save the files and open the page in your browser you wont be able to see the container div, because it has no content so its height collapses to zero. We’ll add some content in the next step.
Step 4 — Content
The only difference between the headings in the page and the paragraph text is that the headings are bolded, so we are going to use a P tag for each paragraph, a STRONG tag to make the headings bold and Ul’s and Li’s for the bullet points under “how it works”.
All the content will go inside the container div that we just created:
<body>
<div class=”heading” ></div>
<div class=”container” >
<p><strong>Get Things Done on-time… Everyday!</strong></p> <p>5Things helps you get things done by limiting your to-do list to 5
items, so you’re forced to focus only on the most important
things.</p>
<p><strong>How It Works:</strong></p>
<p>
<ul>
<li>Add the 5 most-important things you need to do to 5Things</li> <li>Start with #1 and</li> <li>Don’t stop until you’re done (except for breaks)</li>
</ul> </p>
<p><strong>Do this and you’ll never have an unproductive day again.
</strong></p>
<p>We’re making 5Things available FREE to a small list of early
adopters. If you’ll like to be on that list, enter you email address
below to get early access and start using 5Things to improve your
productivity</p>
</div>
</body>
Step 5 — Styling The Body
The content is in the page but it still looks very different from what we had in mind because it still has the default browser css applied to it… because we haven’t told the browser how we want it to be displayed.
First of all, we’ll change the font family and font size and ad a line height of 1.4 times the font-size, to make it a little more readable.
Finally, we’ll add more padding at the bottom of each paragraph, to space out the text properly and make it easy to read.
.container p {
font-family: georgia, “courier new”, courier, monospace, ‘Open Sans’,
sans-serif;
font-size: 17px;
line-height: 1.4em;
padding-bottom: 12px;
}
The font I want to use is Georgia, but its good practice to always specify “fallback” fonts in case the browser for some reason cannot load your specified fonts.
We also need to apply the same styling to the LI tag, so the text inside the LI tags look the same as the text inside the P tags
.container li {
font-family: georgia, “courier new”, courier, monospace, ‘Open Sans’,
sans-serif;
font-size: 16px;
line-height: 1.4em;
}
Also, in the name of readability, we’ll change the font color from black to dark grey to reduce the extreme black on white contrast; making it easy on the eye.
body{
background-color: #e7e7e7;
padding: 0;
margin: 0;
color: #222222;
}
Step 6 — Center the container
To center the main content container, we must set the margin on the container to be equal on both sides. The only way to do this is to set margin right and margin left to “auto”, so that regardless of the screen size, the browser will set the margins to be equal on both sides; centering the div like so:
.container{
background-color: #fff;
border: 1px solid #ddd;
width: 580px;
padding-left: 85px;
padding-right: 85px;
margin-right: auto;
margin-left: auto;
}
You can also use the css short hand form (margin: 0 auto;) which will set the top and bottom margins to 0, then left and right to auto. I want the bottom of the page to have a margin of 40px, so I’ll use (margin: 0 auto 40px) which sets the top to 0, left and right to auto and bottom to 40px.
Step 7 — Logo and More Margins.
As you can see, the content container is attached to the top bar. We can space it out by adding some margin to the top bar.
.heading{
padding-bottom: 8px;
background-color: #2e3639;
margin-bottom: 30px;
}
We’ll also add the logo to the top of the content container with an img tag
Download the logo here (http://pgproject1.herokuapp.com/img/lg5.png)
<body>
<div class=”heading” ></div>
<div class=”container” >
<div class=“logo”><img src=”img/lg5.png”></div>
.
.
.
</body>
We added a class “logo” so we can add some padding to space it out a little bit, and then align the image right.
.logo{
padding-top: 30px;
padding-bottom: 10px;
text-align: right;
}
Step 8 — The Box
First we add a div with a class of box into the html under the last P tag. In the div, there will also be bold paragraph with the text “Get Early Access”
<body>
. . .
<div class=”box” ><p><strong>Get Early Access:</strong></p></div>
.
.
</body>
In the css file, we set the background color, font color, width, padding and center it with margin 0 auto like so:
.box{
background-color: #2e3639;
color: #fff;
width: 460px;
border: none;
padding: 20px;
margin: 0 auto 30px;
}
and in the P tag, we set the font families, text position, text size and remove the 12px padding we added to all the P tags in the content container earlier.
.box p{
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
font-size: 16px;
padding-bottom: 0px;
}
Step 9 — The Form
In the box div, under the “Get Early Access” P tag, we add an input box and a submit button and the appropriate attributes to make them behave properly.
<form action=”” method=”post”> <input type=”email” placeholder=”Enter Your Email Address Here” /> <button type=”submit” >Get Invited</button>
</form>
Step 10 — Styling The Form
The input elements are inline elements by default, so they’ll sit beside each other initially. You can stack them on top of each other by changing the display property to “block”.
We’ll also set the width to 100% so it will take the full size of the box, change the text color of the input box to dark grey and then we’ll remove all the borders, add some padding so the text inside the box can breath, a margin to the bottom to push the button down a little bit and specify the fonts and font sizes like so:
.box input{
display: block;
width: 96%;
border: none;
color: #222222;
padding: 2%;
margin-bottom: 10px;
font-size: 16px;
font-family: georgia, “courier new”, courier, monospace, ‘Open Sans’,
sans-serif;
}
Notice that we set the width to 96% and padding around the text to 2%. This is because of the box model of css. The padding left and right will add to the sides of the container, giving it an overall width of 104% if we had set the width to 100%.
Setting the width to 96% will give it a 100% width because of the 2% padding on each side. Similarly, we’ll style the button like so:
.box button{
width: 100%;
font-size: 16px;
padding: 2%;
display: block;
margin: 0 auto;
font-family: georgia, “courier new”, courier, monospace, ‘Open Sans’,
sans-serif;
font-weight: bold;
color: #fff;
background-color: #5da423;
border: none;
}
Change the color of the button when you hover over it with your mouse:
.box button:hover{
background-color: #457a1a;
}
and add a top border that will only show up when you click:
.box button:active{
border-top: 2px solid #5da423;
background-color: #457a1a;
}
Your page should now look like this one: This One you can inspect the code and compare it to your work.
When you finish building it, delete your files and try to re-build the page using only a screenshot of the final page, without looking at this tutorial.
