Introduction to HTML and CSS: Everything You Need to Know

Updated on Aug 31, 2024 · 7 min read

Introduction

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies used to create and design web pages. They work together to structure and style content on the web. HTML is the language in which every content in a webpage is surrounded by. It is used to tell browsers about headings, lists, tables and more. CSS serves as the language used to style the page in the way you want it to be such as the colour, font, layout and much more.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and design web pages. HTML defines the structure of web content by using a system of tags and attributes. It tells the web browser how to display text, images, links, and other elements.

Basic HTML Structure

An HTML structure is made up of elements enclosed in angle brackets.

< !DOCTYPE html >: Declares the document type and version of HTML.

< html >: The root element of an HTML page.

< head >: Contains meta-information about the document, such as the title.

< title >: Sets the title of the web page.

< body >: Contains the content of the web page.

< h1 >: Defines a top-level heading.

< p >: Defines a paragraph.

< a >: Creates a hyperlink.

< img >: Embeds an image into the page.

< div >: Defines a division or section in the document.

< span >: Used to group inline-elements in a document.

Common HTML Tags

Headings: < h1 > to < h6 > define headings, with < h1 > being the largest and < h6 > the smallest.

Paragraphs: < p > tags define paragraphs of text.

Links: < a > tags create hyperlinks to other pages or resources.

Images: < img > tags embed images, using the src attribute to specify the image source.

Lists: < ul > for unordered lists and < ol > for ordered lists, with < li > for list items.

Key Concepts in HTML

HTML Tag

These are keywords that shows the web browsers how to format data given to them. This tag help the web browser differentiate between the HTML content and the normal plain content. HTML content are however enclosed in tags which are angular brackets < and >
Example;
< h1 > how to become an entrepreneur? < /h1 >
Here the < h1 > is the HTML content while 'how to become an entrepreneur?' is the normal plain content which will later be displayed on the website.

Elements and Tags:

HTML is composed of elements, which are defined using tags. Tags are enclosed in angle brackets, like < tagname >. Most HTML elements come in pairs: an opening tag and a closing tag. For example:
< p >This is a paragraph.< /p >
Here, < p > is the opening tag, and < /p > is the closing tag. The text "This is a paragraph." is the content of the element.

Attributes:

Elements can have attributes that provide additional information about them. For example:
< a href="https://www.example.com" >Visit Example < /a >
In this link element (< a >), the href attribute specifies the URL the link points to.

Structure:

An HTML document typically starts with a < !DOCTYPE html > declaration, followed by < html >, < head >, and < body > sections. The < head > contains metadata and links to CSS files, while the < body > contains the content that appears on the web page.
< !DOCTYPE html >
< html >
< head >
< title >My First Web Page
< /head >
< body >
< h1 >Welcome to My Website< /h1 >
< p >This is my first webpage using HTML!< /p >
< /body >
< /html >

HTML Vs Output

HTML

< h3 > how to become an entrepreneur < /h3 >
< p > In the world today there has been a swift shift in the number of individuals working a 9-5. So many salary earners have quick switched to entrepreneurship ventures. < /p >
< p > For some entrepreneurship is a more lucrative venture. For others it is a means to exploration and freedom. Whichever the case maybe, this article discusses the meaning of entrepreneurship, types and why you should choose to become an entrepreneur in the face of this rising swift changes. < /p>
< h4 > What is entrepreneurship? < /h4 >
< p > Entrepreneurship is the act of.... < /p >

Output

how to become an entrepreneur

In the world today there has been a swift shift in the number of individuals working a 9-5. So many salary earners have quick switched to entrepreneurship ventures.

For some entrepreneurship is a more lucrative venture. For others it is a means to exploration and freedom. Whichever the case maybe, this article discusses the meaning of entrepreneurship, types and why you should choose to become an entrepreneur in the face of this rising swift changes.

What is entrepreneurship?

Entrepreneurship is the act of ....

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall look of web pages. By separating content (HTML) from presentation (CSS), it allows for greater flexibility and control over the design.

Basic CSS Syntax

CSS rules are composed of selectors and declarations. A basic CSS rule looks like this:
selector {
property: value;
}
Example:
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}

Selector: Specifies the HTML element to be styled (e.g., body, h1).

Property: Defines the style attribute to be applied (e.g., background-color, color).

Value: Specifies the value for the property (e.g., lightblue, navy).

CSS Selectors

Element Selector:

Targets HTML elements directly (h1, p). Example p { colour: red; }

Class Selector:

Targets elements with a specific class attribute ( .classname ). Defined in HTML as class = "classname".

ID Selector:

Targets a unique element with a specific ID attribute (#idname). Defined in HTML as id="idname".

Attribute Selector:

Targets elements with specific attributes ([type="text"]).

Descendant Selector:

Selects elements that are descendants of another element. Example: div p { margin: 0; }

Common CSS Properties

Here are some commonly used CSS properties:

Color and Background

color: Sets the text color.

background-color: Sets the background color.

background-image: Sets a background image.

Font

font-family: Sets the font of the text.

font-size: Sets the size of the text.

font-weight: Sets the weight (boldness) of the text.

Text

text-align: Sets the horizontal alignment of text.

text-decoration: Adds decoration to text (e.g., underline).

width and height: Sets the width and height of an element.

Layout

display: Sets the display behavior of an element (e.g., block, inline, flex).

position: Sets the positioning method of an element (e.g., static, relative, absolute, fixed).

float: Specifies whether an element should float to the left, right, or not at all.

CSS Box Model

The CSS box model describes the rectangular boxes generated for elements in the document tree. Each box is composed of:

Content:

The actual content of the box (e.g., text, images).

Padding:

Space between the content and the border.

Border:

Surrounds the padding (if any) and content.

Margin:

Space outside the border, separating the element from other elements.

Combining HTML and CSS

HTML and CSS are used together to build and style web pages. HTML provides the content structure, while CSS enhanced the visual appearance. There are three primary ways to integrate CSS into HTML: inline CSS, internal CSS, and external CSS.

Inline CSS

Inline CSS involves adding CSS directly to the HTML element using the style attribute.
< p style="color: blue;" >This is a blue paragraph.< /p >

Internal CSS

Internal CSS involves adding CSS within the < style > tag in the < head > section of the HTML document.

< head >
< style >
p {
color: blue;
}
< /style >
< /head >

External CSS

External CSS involves linking an external CSS file to your HTML document using the < link > tag.

< head >
< link rel="stylesheet" href="styles.css" >
< /head >
Copy
styles.css:

p {
color: blue;
}

Responsive Design

With the increasing use of mobile devices, responsive web design is crucial. Responsive design ensures that web pages look good and function well on a variety of devices and screen sizes (desktops, tablets, and phones). This is achieved through the use of flexible grids, flexible images, and media queries. CSS media queries are commonly used to apply different styles based on device characteristics.

Media Queries

Media queries allow you to apply different styles based on the device's characteristics, such as its width, height, and orientation.

Example of a media query:
@media only screen and (max-width: 600px) {
body {
background-color: lightgreen;
}
}

In this example, the background color of the body element will change to light green when the screen width is 600 pixels or less.

Conclusion

HTML and CSS are essential technologies for web development. HTML provides the structural foundation for web pages, while CSS enhances their appearance and layout. Understanding both languages is crucial for creating effective, visually appealing, and well-structured web content. With these basics, you can start building your own web pages and experimenting with design and layout.