• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • News
  • Business
  • Dictionary
  • Example of
    • How to
    • List of
    • What is?
    • Where is?
    • Who is?
    • Why is?
  • Health
  • Religion
  • Technology
  • Shop
    • My account
    • Basket
    • Checkout
Example of anything

Example of anything

Find out the example of anything you wish to know. Ranging from words, places or things either in existence or non-existence

You are here: Home / Example of / How to code with html and CSS

How to code with html and CSS

by Ugabi Igbaji Leave a Comment

How to code with html and CSS

How to code with HTML and CSS

Table of Contents

  • How to code with HTML and CSS
  • Introduction
  • What is HTML?
  • What is CSS?
  • How to code with html and CSS -How to code HTML 
  • How to code with html and CSS -Different tags we have in HTML
  • Coding CSS
  • How to code with html and CSS -How to link CSS to HTML
  • How to use CSS
    • Example of HTML 
    • Related Example.NG posts:

Introduction

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. 

What is HTML?

Html in full means, hypertext markup language. 

This is the language which your browser in your laptop or mobile devices 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. 

What is CSS?

CSS is an acronym that stands for means Cascading Style Sheets.

This has to do with the styling, colours and display of the website. CSS gives colour and beauty to the website. Without CSS a website will just be plain text scattered everywhere and pictures in straight lines or placed anyhow. With CSS we have what we see presently when you log into a site. CSS give beauty to a website. 

How to code with html and CSS -How to code HTML 

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>

How to code with html and CSS -Different tags we have in HTML

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. 

Coding CSS

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. 

How to code with html and CSS -How to link CSS to HTML

When linking your CSS to your HTML, you use the code below. 

<link rel=”stylesheet” href=”styles.css”>

This goes in the head tag. 

How to use CSS

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.

Example of HTML 

<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.

Share this:

  • WhatsApp
  • Pinterest
  • Facebook
  • Twitter
  • LinkedIn
  • Telegram
  • Email

Related Example.NG posts:

How to use font awesomeFont awesome and 8 steps to use them in CSS, HTML without being an expert Check BVNCheck BVN with these 2 simple steps -Mobile phone USSD code is best How to use bootstrapHow to use bootstrap and why they are important How to Design a letterheadHow to Design a letterhead – 3 Points you should know What is sbar?What is SBAR and its examples? Physical Activity and Calorie ExpenditurePhysical Activity and Calorie Expenditure -3 steps to know the number of calories to maintain your weight Online MeetingsOnline Meetings – 7 Things to do and 5 things to avoid OBESITY AND OVERWEIGHTOBESITY AND OVERWEIGHT – Know your stand Epilepsy and SeizuresEpilepsy and Seizures – 4 causes and 5 things to avoid when giving first aid FORMAL AND INFORMAL MEETINGSFORMAL AND INFORMAL MEETINGS – 5 Dos and Don’ts affidavitAffidavit meaning and 7 types of affidavit How to write a CVHow to write a CV Example 7th Edition APA Paper formatExample 7th Edition APA Paper format Motivational letter exampleMotivational letter example WAEC Result Checker 2020/2021waecdirect.org WAEC Result Checker 2020/2021

Filed Under: Example of, How to, What is? Tagged With: how to code a carousel with html css and javascript, how to code a website in html and css, how to code a website using html and css, how to code a website with html and css, how to code html and css for beginners, how to code html and css in visual studio, how to code html and css on ipad, how to code in html and css, how to code in html and css pdf, how to code using html and css, how to combine html and css code, how to connect css code with html, how to copy html and css code from a website, how to get html and css code, how to link html and css code, how to merge html and css code, how to organize html and css code, how to run html and css code, how to test html and css code, How to use css, how to use html, learn how to code html and css, what is css, what is html

Reader Interactions

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Join Example.NG on Facebook

Join Example.NG on Facebook

Follow Example.NG on Twitter

My Tweets

Recent Posts

  • Pregnancy and things to avoid
  • 10 Hilarious Inventions II
  • Alcohol withdrawal -Facts about alcohol and withdrawal
  • Vitamins -Definition, types, 9 functions, 8 sources and 8 side effects of vitamin
  • The Rainbow -Rainbow colours, the Christian, Islamic and Hindu belief, 5 ways rainbow form
  • Production and destruction of blood cells
  • Skin colour – 4 things you wont believe affects your skin colour
  • Sickle cell anemia -6 Signs and manifestations of sickle cell anaemia
  • Rusting – definition, formation, enhancers, and prevention
  • Bleeding – Overview, classification, types and dangers

Products

  • WAEC Result Checker PIN Online WAEC RESULT CHECKER PIN Online ₦3,000.00 ₦2,500.00

Footer

About Example.NG

Example.NG is a blog focusing on examples of anything there is; ranging from people, places and things. Read more.

All images as seen and used on this site are properties of their respective owners. For DMCA Report or takedown, Contact Us.

Site Navigation

Example of Home
How to Business
List of Dictionary
What is Education
Where is Health
Who is Religion
Why is Technology

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 26 other subscribers.

Copyright © 2020–2021 · Example of Anything . About Example.NG . Privacy Policy . Archive . Contact Us

We use cookies to remember your preferences to provide the needed experience. By clicking “Accept”, you consent to the use of ALL the cookies.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.