Getting Started with HTML and CSS: A Beginner’s Guide

WebGetting Started with HTML and CSS: A Beginner’s Guide

Getting Started with HTML and CSS: A Beginner’s Guide

8 mins Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

What is HTML?

HTML stands for HyperText Markup Language. It is used to create the structure of web pages. HTML elements are the building blocks of HTML pages. Tags enclose content and determine its function on the page. For more details, click here.

Example of HTML Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a simple paragraph of text.</p>
  </body>
</html>

<!DOCTYPE html>: This declares the document type and ensures the browser renders the page correctly.
<html>: The root element that wraps all the content on the page.
<head>: Contains meta-information about the page (like the title).
<body>: This is where the page's visible content goes.
<h1>: Heading tags (h1 to h6) are used for titles and subtitles.
<p>: Paragraph tags are used to display blocks of text.

What is CSS?

CSS stands for Cascading Style Sheets and is used to control the appearance of HTML content. While HTML structures the content, CSS styles it by defining things like colors, fonts, and layout.

Example of Basic CSS:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div {
    border: 2px solid green;
    padding: 40px;
}

h1 {
    color: rgb(15, 128, 0);
    font-family: Arial, sans-serif;
    font-size: 50px;
}

p {
    color: rgb(10, 10, 10);
    font-size: 30px;
    text-align: center;
}

<style>: This tag allows you to write CSS inside an HTML document.
Selectors like body, h1, p CSS selectors target specific elements to apply styles.
Properties like background-color, colorThese define what aspects of the element you want to change.

Types of CSS

When styling a website, there are three main ways to apply CSS to your HTML document: Inline CSS, Internal CSS, and External CSS. Each method has its own advantages and is suitable for different situations.

1. Inline CSS

Inline CSS allows you to add styles directly to individual HTML elements using the style attribute. It’s useful for quick fixes or when you want to apply unique styles to specific elements without affecting the rest of the page.

Example of Inline CSS:

<p style="color: red; font-size: 20px;">This is a styled paragraph.</p>

Pros:

Quick and easy for small, specific style changes.
Doesn’t require an additional file or block of code.

Cons:

Difficult to maintain and scale, especially for larger projects.
Violates the principle of keeping content and style separate.

2. Internal CSS

Internal CSS involves writing your styles inside the <style> tag, located within the <head> section of your HTML document. This is useful when you want to style a single HTML document and don’t want to create a separate CSS file.

Example of Internal CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS Example</title>
    <style>
      body {
        background-color: lightgray;
      }
      h1 {
        color: darkblue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This page is styled using internal CSS.</p>
  </body>
</html>

Pros:

Great for single-page applications or small projects.
Keeps HTML and CSS together for easy management when working on simple documents.

Cons:

Styles are limited to the current HTML file.
It can be difficult to handle if the file gets too big.

3. External CSS

External CSS uses a separate .css file to store all your styles. This file is then linked to your HTML document using the <link> tag inside the <head> section. This method is the most efficient for large websites, as it allows you to apply consistent styles across multiple pages.

Example of External CSS:

Create a file called style.css:

body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

Link the CSS file to your HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This page is styled using internal CSS.</p>
  </body>
</html>

Pros:

Styles can be reused across multiple HTML documents.
Keeps HTML and CSS separate, promoting cleaner and more maintainable code.

Cons:

Requires additional HTTP requests to load the CSS file, which could affect page load time (though this can be mitigated with caching).

Step-by-Step Guide to Building Your First Web Page

Setting Up Your Project

Before you begin, you’ll need a text editor (such as VSCode, Sublime Text, or Notepad++) and a browser (like Chrome or Firefox).

Create a folder on your computer named my-first-website.
Inside the folder, create a file named index.html.
Open the file in your text editor.

Writing Basic HTML

Let’s start by creating the structure of your web page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

<meta charset="UTF-8" /> ensures that your page can display all types of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> makes sure your page is mobile-friendly.

Adding CSS for Styling

Next, you’ll want to make your page visually appealing with some basic CSS.

Inside the same folder, create an 'assets' folder. Within 'assets', make a 'css' folder and then create a styles.css file inside it.
Add the following code to styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
  text-align: center;
  margin-top: 50px;
}

p {
  color: #666;
  text-align: center;
}

Now, link the CSS file to your HTML by adding the following line inside the <head> tag of index.html:

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

This will link your styles.css file to your HTML, applying the styles to your page.

Viewing Your Web Page

Open index.html in your web browser by double-clicking the file. You should now see a styled web page with centered text.

Understanding HTML Tags

HTML uses a variety of tags, each serving a different purpose. Let’s explore some commonly used tags:

Headings (<h1> to <h6>): These define the titles and subtitles of your content. <h1> is the most important, while <h6> is the least important.

<h1>Main Title</h1>
<h2>Subtitle</h2>

Paragraphs (<p>): Used to define blocks of text.

<p>This is a paragraph of text.</p>

Links (<a>): Links are used to navigate to other web pages.

<a href="https://www.example.com">Visit Example</a>

Images (<img>): Displays images.

<img src="image.jpg" alt="A description of the image" />

Lists (<ul>, <ol>,<li>): These tags create unordered (bulleted) and ordered (numbered) lists.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

CSS: Styling Your HTML

CSS allows you to create visually appealing web pages by customizing the look and feel of your HTML content.

CSS Box Model

Understanding the box model is key to controlling layout in CSS. Every HTML element is considered a box that has:

Content: The actual content inside the element.
Padding: Space between the content and the border.
Border: A line surrounding the padding (or content if no padding is specified).
Margin: Space between the border and surrounding elements.

div {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

CSS Layout Techniques

There are several layout techniques in CSS:

Flexbox: A modern layout system that allows for easy alignment of elements.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid: A powerful two-dimensional layout system.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

Conclusion

HTML and CSS are the foundational technologies behind every web page. By mastering these two languages, you can start building your websites and experimenting with web design. As you gain confidence, you’ll be able to move on to more advanced topics like JavaScript and backend development.

Now that you have a basic understanding of HTML and CSS, the best way to learn is to start building! Experiment with different tags and styles, and don’t be afraid to make mistakes—that’s how you’ll grow as a developer.

If you need any help along the way, feel free to reach out to Radial Code for expert guidance on your web development journey!