Introduction to HTML and CSS for Beginners

Domenico Colandrea

7 min read

•

Feb 3

html css web development beginner

Cover Image for Introduction to HTML and CSS for Beginners

Domenico Colandrea

7 min read

•

Feb 3

htmlcssweb developmentbeginner

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the fundamental building blocks of every website. HTML provides the structure and content of a webpage, while CSS defines the presentation and visual styling. In this comprehensive introduction to HTML and CSS, we'll cover the basics of both languages, provide code examples, and guide you through the process of creating your first webpage.

What is HTML?

HTML is a markup language used to structure the content of a webpage. It consists of a series of elements, represented by tags, that define the different parts of a webpage. Each HTML element serves a specific purpose and can contain text, images, links, and other media.

Here's an example of an HTML document structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="Image description" />
    <a href="https://www.example.com">Visit Example.com</a>
  </body>
</html>

In the code above, we have a basic HTML structure with a document type declaration (<!DOCTYPE html>), an <html> element that wraps the entire document, <head> and <body> sections, and various HTML elements within the body.

What is CSS?

CSS is a stylesheet language used to describe the visual presentation of an HTML document. It defines how HTML elements should be displayed, such as their colors, sizes, fonts, and layout. CSS works by selecting HTML elements and applying styles to them using selectors and property-value pairs.

Here's an example of CSS code that changes the color and font size of headings:

h1 {
  color: blue;
  font-size: 24px;
}

h2 {
  color: green;
  font-size: 20px;
}

In the code above, we select the <h1> element and apply the styles of blue color and a font size of 24 pixels. Similarly, we select the <h2> element and apply a green color and a font size of 20 pixels.

Creating Your First HTML Webpage

Let's create a simple webpage using HTML. Follow these steps:

Open a text editor and create a new file. Save it with a .html extension (e.g., index.html).
Add the following HTML code to the file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="Image description" />
    <a href="https://www.example.com">Visit Example.com</a>
  </body>
</html>

Create a new file in the same directory called styles.css.
Add the following CSS code to the styles.css file:

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: gray;
  font-size: 16px;
}

img {
  width: 200px;
}

Save the styles.css file.

Now, open the HTML file in a web browser, and you'll see your first webpage with the specified styles applied.

HTML Tags and Elements

HTML is made up of various tags that define different elements and their purpose. Here are some commonly used HTML tags:

<h1> to <h6>: Headings of different levels.
<p>: Paragraphs of text.
<a>: Links to other webpages.
<img>: Images.
<ul> and <li>: Unordered lists.
<ol> and <li>: Ordered lists.
<div>: Generic container for grouping elements.
<span>: Inline container for small text or styling.

HTML tags can also have attributes that provide additional information. For example, the <a> tag has an href attribute that specifies the URL of the link.

CSS Selectors and Styles

CSS uses selectors to target specific HTML elements and apply styles to them. Here are some commonly used CSS selectors:

Element selector: Selects elements by their HTML tag name.
Class selector: Selects elements with a specific class attribute.
ID selector: Selects a single element with a specific ID attribute.
Descendant selector: Selects elements that are descendants of another element.
Pseudo-classes: Selects elements based on their state or position.

CSS styles are defined using property-value pairs. Here are some commonly used CSS properties:

color: Specifies the text color.
font-size: Sets the size of the font.
background-color: Sets the background color.
margin and padding: Controls spacing around elements.
border: Defines the border properties.

Summary

In this comprehensive introduction to HTML and CSS, we covered the basics of both languages. HTML provides the structure and content of a webpage, while CSS defines the presentation and visual styling. HTML consists of elements represented by tags, and CSS uses selectors and property-value pairs to target elements and apply styles.

By understanding HTML and CSS fundamentals, you have a solid foundation for creating and styling webpages. As you progress, you'll learn more advanced techniques and concepts to build interactive and responsive websites.

Now that you have created your first webpage, experiment with different HTML elements and CSS styles to enhance your design. Keep practicing and exploring to become proficient in HTML and CSS.