How to code with html and CSS
Table of Contents
We all browse and surf the web with our mobile or our computers. When browsing and visiting sites, we see the layout of the sites, the words on the pages you browse and arrangement of pictures and so on. This is made possible by HTML and CSS.
Html in full means, hypertext markup language.
This is the language which your browser in your laptop or mobile device understands when surfing the web. Html is just the frame of the web, the skeletal system of the web. For example, we have the human body. The human body is made up of various part. The skeleton is the part of the human body that gives it its shape. That is what HTML is on the website. Html gives the website its shape.
CSS is an acronym that stands for means Cascading Style Sheets.
This has to do with the website’s styling, colours and display. CSS gives colour and beauty to the website. Without CSS, a website will be plain text scattered everywhere and pictures in straight lines or placed anyhow. With CSS, we have what we see when you log into a site. CSS give beauty to a website.
When coding HTML, we use tags meant for HTML. Tags like head, title, body, div etc. Before you do this you will need a code editor. Are various kinds of code editors for download?
After installation, open the code editor and create a new file, then save the file name ending it with .html this will enable the editor to read this file as an HTML file.
Example
<head>
<\head>
<title>
<\title>
<> this is known as the opening tag. When you see this, it is always used to indicate opening tags
Example
<div>
That indicates an opening, text and whatever is placed in it and it ends with a closing tag <\div>
Example
<div> this is my first website and i want to be able to code more websites. <\div>
Paragraph tag
<p><\p>
What so ever is in this tag starts a new paragraph completely, separating it from the old paragraph.
Header tag
<h1><\h1>
This tag, when words are placed inside it, it increases the size and boldness of the text making it look like a header or title of a paragraph. The header tag ranges from different sizes.
H1 h2 h3 h4 h5 h6
H1 is the largest size while h6 is the smallest size. You can try out the sizes so you could know which suits your context.
Div
<div><\div>
This tag acts like a container which holds many things. In this tag, more tags can be in it. It acts as a separation from other things on the site. Elements in this tag are always separated on the screen from other tags.
The body
<body><\body>
This is always at the beginning. What so ever is to be displayed on your site should be found in this tag. When you open the body tag, after coding you have to close the body tag.
They are so many tags in HTML you just have to know which one works for what you want to do.
When coding CSS, you also need a code editor just like HTML. The same editor works for both. CSS is just picking elements on your HTML and modifying it. Adding colours and beautifying it.
When you create a new file on your editor, safe the file as .css so the editor recognises this as a CSS file.
Before you begin coding, you have to link your CSS file to your HTML file.
When linking your CSS to your HTML, you use the code below.
<link rel=”stylesheet” href=”styles.css”>
This goes in the head tag.
Before you can use CSS, you have to give elements in your HTML classes or id, to make it possible to identify what you are editing. This classes and id are always added to the opening tags in your HTML.
Calling a class in CSS, you use a dot(.)
While you use a # symbol to call an id.
Example
If you gave an element a class called a picture, you go to your CSS and call the class like this
.picture{
}
Then the codes and commands will be inside the curly brackets.
<html>
<head>
</head>
<body>
<\body>
</html>
Example of css
<style>
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
/* IE hack */
* html #left {
left: 150px;
}
/* Make the columns the same height as each other */
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
/* Fix for the footer */
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
/* Aesthetics */
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 1.5em;
}
p {
color: #555;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
}
#header, #footer {
font-size: large;
padding: 0.3em;
background: #BCCE98;
}
#left {
background: #DAE9BC;
}
#right {
background: #F7FDEB;
}
#center {
background: #fff;
}
#container .column {
padding-top: 1em;
}
</style>
In conclusion, HTML and CSS are the basics of a website. You need to understand and learn how to use them before you can learn other programming languages.
Do you have a question or an input on How to code with html and CSS? Kindly use the comment box below.
Sappi Bursaries and Scholarship 2024 For African Students; See the Criteria for Eligibility The Sappi…
Fake UTME 2024 Result Slip Printout: JAMB Gives Warning The Joint Admission and Matriculation Board…
DSSC Course 2024: The Nigerian Army Releases List of Successful Candidates and Announces Date to…
How to Correct Your Name, Date of Birth and Other Mistakes in Your NIN Do…
PwC Bootcamp Nigeria Software Engineering Career Program 2024: See Eligibility Criteria The PwC Bootcamp Nigeria…
KPMG Graduate Trainee Program 2025: See the Application procedure and eligibility criteria All qualified individuals…
This website uses cookies.