HTML Essentials

HTML stands for Hypertext Markup Language.

It is use to provide structure to the content on a webpage. Also called a declarative language because its code declare what the browser should do to each part of the program.

CSS, Cascading Style Sheet, is use to provide styling to a web page.

It is use to give color, typography and some animation to the page.

JavaScript provides interactivity to the web page.

HTML Syntax

HTML is made up of tags like this <p>, the paragraph tag.

The syntax usually have an opening and closing tag like <p> to open, </p> to close. 

For example:

<p> This is a paragraph </p>

Is a complete HTML syntax.

HTML Attribute

Class  <p class = “hello”> Hello World </p>

Id  <p id = “ hello”> Hello World </p>

Lang  <p lang = “ en-GB”> Hello World </p>

Dir <p dir = “ ltr”> Hello World </p>

CSS Essential Training

While HTML is use to give structure to a page.

CSS is use to style HTML and beautify the appearance of the page.

There are 4 ways you can reference CSS in your work.

External, Internal, Inline and @import

External – have a separate file for the CSS.

<link rel = “stylesheet” href = “css/style.css”>

Internal – placed in the HEAD section of the HTNL document.


                h2 {

                                color: green;



Inline – place inline along with an HTML element.

< p style = “color: green;”> Hello Nigeria </p>

@import – this is mostly use with CSS pre-processors

Project Overview and Setup

The first thing to keep in mind is that the HTML part of your webpage should be in place before you plan to add the styling.

ALSO READ ABOUT  10 Ways To Escape Tutorial Hell of Programming

Optimizing Images for Modern Screens

It is important to put modern screens in the back of your mind.

In places where you need an image with 300px width, you should use 600px width image and resize it with CSS.

CSS Specification and W3C

It is next to impossible to know all the commands in CSS and there is constant minor upgrades in most programming languages.

So a way to keep updated and learn whatever you need anytime is using the World Wide Web Consortium W3C guide on CSS.

You can access the documentation on W3C website however, the Mozilla developer CSS documentation is recommended by Mrs. Truong.

CSS Syntax

CSS syntax consist of two parts. The selector and the declaration box.

The selector can be HTML tag like img, h1, etc or class, id and so on.

The declaration box is made up of CSS property and value, and enclosed in two curly braces.

img {

                width: 300px;


Color and Property Value

Color is one of the commonly used property in CSS and there are several ways to give it a value.

The basic value can be naming the color like color: green; or color : blue;

There are other ways of naming the value e.g. using rgb, rgba, hsl, hsla.

CSS Selectors

Universal selector: use to select all the elements on the webpage.

* {…}

Type selector: use to select specific element.

h1 {…}

Class selector: in cases where you need to be more specific that just using the element tag, you can use the class selector. It is places in the HTML tag as an attribute to the tag. It can be used many times on the page.

ALSO READ ABOUT  How To Prevent Cyber-Attacks In Your Company

<p class = “intro”> My name is Ganiyu Sidiq </p>

.intro {…}

ID selector: this is similar to class selector but id class can only be used ones on the page. It is use to link to a section on the HTML page too, so some people prefer to use it just for link and not as CSS selector.

<h3 id = “intro”> My name is Ganiyu Sidiq </h3>

#intro {…}

Inheritance and Specificity

CSS has an order of respecting inheritance or selector organization.

id -> class -> type -> universal

CSS gives more recognition to id then class then type then universal selector.

Project Tip

Note down the color you want to use beforehand: you can look at similar website on behance/dribble to get idea of what to create. Sketch your own creation. Get d color y’d like.

Every section in your code must have comment that indicates the section. Both while writing the HTML and the CSS.

The color property gives text color in CSS.

Pseudo-class selector



a:focus when tab is use to move around link

a:hover when the mouse icon moves over the link

a:active just when clicked before dropping

How Element Occupy Space in HTML

Inline and Block

INLINE elements

Takes up space that their content needs.

Elements are arranged in line from the left.

Elements will only wrap when item cannot fit.

Common examples of inline elements: <a> <span> <strong>

BLOCK elements

Same height as content but width extends to the whole screen with.

Each of this elements stays on its own block by default.

ALSO READ ABOUT  Allow Previously Unused ActiveX Controls To Run Without Prompt

Most HTML elements are block.

Common examples are: <p> <h1> <article> <section>

The display property

This is what is use to modify the display property of HTML element.

You can use it to change an inline element to block element and vice versa.

display: inline;

display: block;

You can assign the two properties to an element.

display: inline-block;

Box Model

This consist of …

Content: the stuff in the HTML element like text, image, link etc.

Padding: the space area immediately after the content.

Border: the space between the padding and margin, usually after the padding.

Margin: the space outside the whole box

How to Center a Content

width: 950px;

margin: 0 auto;

Leave a Reply

Your email address will not be published.