posts html css basics
Posted on: September 7, 2017
HTML and CSS basics for beginners
Anyone trying to make a website will have to go through HTML and CSS, there is simply no way around it. And anyone with a basic knowledge of HTML and CSS can practically make a type of website that doesn't include interactivity with users, such as portfolio sites, information or presentation sites, bascially anything that doesn't require user input can be done with just a markup language that is HTML but you will still need CSS to style the colors, fonts, positions, paddings, etc...That is why these two are inseparable when it comes to web development.
In this tutorial we will look at the basic HTML elements such as headings, paragraphs, hyperlinks, images and later on about the HTML structure that can be done either with tables which are kind of old school or divisions, used by most developers to optimize the code or in other words, you basically need less code with divisions to achieve the same effect as with tables. In HTML5, however, most of the divs can be replaced by other more appropriate tags such as header, footer, article, section that gives a better perspective on the code itself but can be styled as if it were divs in CSS. Simple enough, anyway, we will also look at basic CSS tags such as coloring, font stlying, positioning and floating.
PART 1 - HTML structure, heading, paragraph, image and link
We will take a look at the structure first so you can get a picture in your head. If you are beginner, then perhaps it would be best to open a text editor, create 2 files inside the same folder and name one index.html and the other style.css. The plan is to define a structure first, inside the index.html file:
<!-- First is always document type in case you want to specify it. -->
<!DOCTYPE>
<!-- Then comes HTML wrapper -->
<html>
<!-- Then the head section where things such as title and meta description are or links to style sheets or other libraries -->
<head>
<title> Basic HTML&CSS tutorial</title>
<!-- We will include our style.css file into it so everything defined in css will have an effect in the current file
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<!-- Then comes the body part where our code will actually be seen when we load the file via browser -->
<body>
</body>
<!-- All that's left is to close the html tag and the file is ready to load with browser -->
</html>
Perhaps you've noticed that nothing is being displayed when you open the file with browser? It's nothing to worry about since we actually haven't done anything yet. So what we will do is to add a heading into it and, afterwards, refresh the browser.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- Adding h1(first heading) as our first html element -->
<h1> Our tutorial</h1>
</body>
</html>
After refreshing the site, our heading appears. It's a heading, big and black as it supposed to be but it comes with default styling. Let's say we want it to be bigger, of a different color and different font. So open up the style.css file and add this:
/* Note how CSS comment syntax is different to HTML. It uses angled line and a star compared to HTML arrows */
/* Adding global style for h1 */
h1 {
color:blue;
font-family: Comic sans MS;
font size: 35px;
}
After refreshing, we can now see the CSS effect on our heading. Speaking of which, now all the <h1> will have the same effect. To resume the tutorial, we are going to add a paragraph and an image to be displayed below the heading. But before, we need to make a folder inside a folder where index.html and style.css are located. Why? Well, we will name the folder images and store an image called tutorial.jpg in there that will be later called by the code. For the best representation, I recommend a picture of 600x400 pixels.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1> Our tutorial</h1>
<!-- Adding paragraph below heading-->
<p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>
<!-- Adding image, leaving original dimensions, to limit without ration you can use width="" and height="" parameters. -->
<img src="images/tutorial.jpg" />
</body>
</html>
Refreshing the page now shows us heading, paragraph and image but let's say we want to make Lorem Ipsum clickable and link it to wikipedia. Not only that but we want to style the hyperlink to be underlined, orange colored and on hover red colored. Furthermore, we also want to make blue rounded borders around the image.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1> Our tutorial</h1>
<!-- Adding hyperlink on Lorem Ipsum to point to wikipedia. -->
<p> "<a href="https://wikipedia.com" > Lorem Ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>
<!-- Adding class to the image -->
<img class="tutorial" src="images/tutorial.jpg" />
</body>
</html>
Did you notice that hyperlink tag does not contain a class like image tag does now? It means we will make hyperlink style global that will apply to all hyperlinks without a specific class. Contrary, the image will be of a specific class and any image not using this class will ignore the style specified. So let's add to the CSS file:
h1 {
color:blue;
font-family: Comic sans MS;
font size: 35px;
}
/* Hyperlink style, global */
a {
text-decoration:underline;
color:orange;
}
/* Creating on mouse hover effect */
a:hover {color:red;}
/* Creating class tutorial for the image. Class always uses a dot before the name */
.tutorial {
border: 8px solid blue;
border-radius:6px;
}
After refreshing, things are looking pretty good but now you probably agree with me that we need to reorganize these tags into a meaningful way, perhaps adding some basic design and navigation to it.
PART 2 - HTML tables, divisions and CSS basics
This is where tables or divisions with CSS come into play. Both are pretty simple to understand but divisions are more flexible once you get a grip on it. With divisions and CSS you are able to make responsive layout for all devices while using tables for this is a hard task, not impossible, but it seriously depends on the layout. Tables are still used these days but many people avoid them because they take up a lot of space in the code. But to understand the whole issue, we will take a look at both tables and divisions.
For example, if we take the above code and its output into consideration, you'll notice that the output was from top to bottom, just like the code, or even more precisely, from top-left to bottom-right. Now imagine the coordinate system in two dimensional space. It has x as horizontal axis and y as vertical axis. It's the same here, it's just that we start moving into positive x and negative y, from top-left to bottom-right.
2.1 - TablesSo, with that in mind, let's take a look at the tables:
<!-- Create table with border, no spacing, no padding, with one row and one cell -->
<table border="1" spacing="0" padding="0" >
<!-- tr stands for a new row. -->
<tr>
<!-- td stands for a new cell in the row that is enclosed in. -->
<td> </td>
<!-- close the row. -->
</tr>
<!-- close the table. -->
</table>
That is the basic but if your run the code, you'll see only one dot at the top left corner. Why? Well, because we have not set, neither table width or cell width and height. So now as a test we will make a table with 2 rows and 5 cells, first row will have 3 cells that will be colored red, yelow and blue and the second row will have white and black cells. In this example, we will code everything into HTML, no CSS, so you can see how it was done in the past.
<table border="1" spacing="0" padding="0" >
<tr>
<!-- setting width, height(in pixels) and background color -->
<td width="200" height="100" bgcolor="red" > </td>
<td width="200" height="100" bgcolor="yellow" > </td>
<td width="200" height="100" bgcolor="blue" > </td>
</tr>
<tr>
<!-- if background color is white by default, we don't need to add anything extra -->
<!-- We also don't need to add width anymore, it is being handled by the first row in the table -->
<td height="100" > </td>
<td height="100" bgcolor="black" > </td>
</tr>
</table>
This would output the following:
Did you notice the third cell in the second row? This is because the first row forces it but we don't want that. We want second row to be evenly displayed so we need to join the cells in the second row and create a new table with 2 cells in there.
<table border="1" spacing="0" padding="0" >
<tr>
<td width="200" height="100" bgcolor="red" > </td>
<td width="200" height="100" bgcolor="yellow" > </td>
<td width="200" height="100" bgcolor="blue" > </td>
</tr>
<tr>
<!-- Colspan is being used to join 3 cells together and then inside the cell we create a new table -->
<td colspan="3" >
<table border="1" spacing="0" padding="0" >
<tr>
<!-- Now we make 2 cells and add width to them since this is the first row in a new table -->
<td width="300" height="100" > </td>
<td width="300" height="100" bgcolor="black" > </td>
</tr>
</table>
</td>
</tr>
</table>
|
|
||||
That's much better. Creating new tables in cells can be done indefinitely to achieve what you want but if we go back to our tutorial, now we want to make a table where the first row will have 2 cells, one for logo, other for navigation. The second row will have one cell in which a new table will be created with 2 cells of different width. Left cell to contain heading and paragraph and right cell the image. This time classes will be used to get the styling from CSS file.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<table border="1" spacing="0" padding="0" >
<tr>
<td class="logo" > Logo</td>
<td class="navigation" >
<!-- We will create a basic navigation, # wiil be added as a placeholder, you can replace these with actual links -->
<ul class="mainnav" >
<li><a href="index.html" > Home</a></li>
<li><a href="#" > Page 1</a></li>
<li><a href="#" > Page 2</a></li>
<li><a href="#" > Page 3</a></li>
<li><a href="#" > Page 4</a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" >
<table border="1" spacing="0" padding="0" >
<tr>
<td class="text" >
<h1> Our tutorial</h1>
<p> "<a href="https://wikipedia.com" > Lorem Ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."</p>
</td>
<td class="image" >
<img class="tutorial" src="images/tutorial.jpg" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
After refreshing the page, the code now has its effect but we need to define those classes in CSS file.
/* Previous code */
h1 {
color:blue;
font-family: Comic sans MS;
font size: 35px;
}
a {
text-decoration:underline;
color:orange;
}
a:hover {color:red;}
.tutorial {
border: 8px solid blue;
border-radius:6px;
}
/* Adding width and height, then centering it horizontally and vertically, adding font style */
.logo {
width: 200px;
height: 100px;
vertical-align: middle;
text-align: center;
font-size: 25px;
font-weight: bold;
}
/* Styling ul, more specifically, its enclosed tags */
.mainnav li {
/* Inline means horizontally, block is vertically, inline-block same as inline but respects top bottom margin, among other things */
display:inline-block;
/* Margin each li element(always clockwise): top right bottom left */
margin: 10px 25px 0px 25px;
}
/* Styling ul hyperlinks, our main navigation */
.mainnav a {
font-size:24px;
color:white;
text-decoration:none;
background:black;
padding: 10px 10px 10px 10px;
border-radius:6px;
}
.mainnav a:hover {background:blue;}
.text {
vertical-align:top;
padding:20px 10px 0px 10px;
}
There you have it, pretty basic but now you can see how it's done. To finish it off, table borders can now be set to 0. Some of you with smaller or larger screen resolution might find the result out of proportions so we will enclose all the code into a division where we will set the width to 1200px and set it to center itself horizontally, no matter the screen resolution.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper" >
<!-- All previous code between the body tags now comes between div tags -->
.
.
.
</div>
</body>
</html>
To make it all work, we need to define the division class width and to center itself horizontally. To CSS file add:
.wrapper {
width: 1200px;
margin: 0 auto;
}
Those with smaller screen resolution might still not see the full effect but now at least the page won't disassemble itself into multiple rows. Instead you'll need to scroll right to see the full page. If that's the case, don't worry because this is how it is supposed to be.
2.2 - DivisionsThis brings us to divisions since we just used one. For starters, I'll show some basic things you need to know. Now that we don't have rows and cells and new tables to position elements, we will have to rely on CSS. It is still the same principle, from top left to bottom right and division below another division in code will be displayed below the upper division. That is by default. However, CSS does let us manipulate divisions almost in any way we want. So, for example, we will try to replicate the multi-colored table above.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="red" > </div>
<div class="yellow" > </div>
<div class="blue" > </div>
<div class="white" > </div>
<div class="black" > </div>
</body>
</html>
We need to add the styling to the CSS file.
.red {
background:red;
width:200px;
height:100px;
}
.yellow {
background:yellow;
width:200px;
height:100px;
}
.blue {
background:blue;
width:200px;
height:100px;
}
.white {
background:white;
width:300px;
height:100px;
}
.black {
background:black;
width:300px;
height:100px;
}
Now this won't output the desired effect because each next division will go below another. So what we'll do is to wrap first three in a separate division than the last two just to achieve the line break effect. Then we will add float to all of them to fill out the remaining space in the parent division that will be exactly 600 pixels.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="box" >
<div class="red" > </div>
<div class="yellow" > </div>
<div class="blue" > </div>
</div>
<div class="box" >
<div class="white" > </div>
<div class="black" > </div>
</div>
</body>
</html>
In CSS file we have to create a box class.
.box {
width:600px;
height:100px;
}
.red {
background:red;
width:200px;
height:100px;
float:left;
}
.yellow {
background:yellow;
width:200px;
height:100px;
float:left;
}
.blue {
background:blue;
width:200px;
height:100px;
float:left;
}
/* For better effect we will change background to orange */
.white {
background:orange;
width:300px;
height:100px;
float:left;
}
.black {
background:black;
width:300px;
height:100px;
float:left;
}
That's it. If you change all the floatings to right, for example, the order will be changed because first element will now be on the right. Note that this is just an example and it's usually not how things are done with divisions. You should avoid using width and height to style each division because you might miscalculate at some point and the page will break apart. So for the purpose of the tutorial, we will re-create our newly created website from above. This time with divisions. The wrapper division will be left as is, rest is to be re-coded.
<!DOCTYPE>
<html>
<head>
<title> Basic HTML&CSS tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper" >
<-- Create a header container to handle the logo and navigation -->
<div class="header" >
<div class="logo" > Logo</div>
<ul class="mainnav" >
<li><a href="index.html" > Home</a></li>
<li><a href="#" > Page 1</a></li>
<li><a href="#" > Page 2</a></li>
<li><a href="#" > Page 3</a></li>
<li><a href="#" > Page 4</a></li>
</ul>
</div>
<-- Create a content container to handle the content and image -->
<div class="content" >
<img class="tutorial" src="images/tutorial.jpg" />
<h1> Our tutorial</h1>
<p> "<a href="https://wikipedia.com" > Lorem Ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."</p>
</div>
<-- Close wrapper -->
</div>
</body>
</html>
As you can see, the code is pretty neat and minimal compared to the tables. It is because positioning happens in the CSS file where we will define both containers and set floatings for the elements.
h1 {
color:blue;
font-family: Comic sans MS;
font-size: 35px;
margin:0px;
padding:0px;
}
a {
text-decoration:underline;
color:orange;
}
a:hover {
color:red;
}
.wrapper {
width: 1200px;
margin: 0 auto;
}
/* Header container */
.header {
height:100px;
margin:0px;
padding:10px 0px 0px 0px;
}
/* Image is floated right compared to text. */
.tutorial {
border: 14px solid blue;
border-radius:8px;
float:right;
margin:5px 0px 10px 15px;
}
.logo {
width: 200px;
height: 100px;
text-align: center;
font-size: 25px;
font-weight: bold;
float:left;
margin-top:25px;
}
/* Both logo and mainav are left floated but since logo comes first it in HTML it will be display first */
.mainnav {
float:left;
}
.mainnav li{
display:inline-block;
margin: 10px 25px 0px 25px;
}
.mainnav a{
font-size:24px;
color:white;
text-decoration:none;
background:black;
padding: 10px 10px 10px 10px;
border-radius:6px;
}
.mainnav a:hover{background:blue;}
/* Content container with left float */
.content {
float:left;
padding: 0px 0px 20px 20px;
}
With this demonstration, we have concluded the tutorial. Now it is up to you to figure out the rest with practice. Once you get going with divisions, consider replacing them with HTML5 tags. As for future posts regarding HTML and CSS tutorials, you may still expect some but they will be very specific, mostly to show some tricks or how to resolve certain browser bugs, just in case you've missed them in your learning process.
