XQA
Back to Web Development
2026-04-135 min read

Style (Web Development)

Learn Style (Web Development) step by step with clear examples and exercises.

Title: Mastering Web Styling with HTML and CSS: A full guide for Beginners

Why This Matters

In web development, style plays a crucial role in creating visually appealing and user-friendly websites. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is employed to control the layout, colors, fonts, and other visual aspects of a website. Understanding HTML and CSS is essential for any aspiring web developer as it forms the backbone of front-end development.

Prerequisites

Before diving into HTML and CSS styling, you should have a basic understanding of:

  1. HTML syntax and tags
  2. How to create and save an HTML file
  3. Basic text editing tools like Notepad or Sublime Text
  4. The difference between HTML and CSS

Core Concept

HTML `` tag

The ` tag is used within the ` section of an HTML document to include style rules that apply to the entire document or specific parts of it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a simple example of HTML and CSS styling.</p>
</body>
</html>

In the above example, we've added a ` tag within the ` section to define two style rules:

  1. The background-color property sets the background color of the body element to light blue.
  2. The font-family property sets the default font for the entire document to Arial, sans-serif.

CSS External Stylesheets

While it's possible to include styles directly within an HTML file using the `` tag, a more efficient approach is to create separate CSS files and link them to your HTML documents. This makes managing styles easier and allows for reusability across multiple pages.

To create an external stylesheet:

  1. Create a new file with the extension .css (e.g., styles.css).
  2. Write your CSS rules in this file.
  3. Link the stylesheet to your HTML document using the ` tag within the ` section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a simple example of HTML and CSS styling.</p>
</body>
</html>

In the above example, we've created an external stylesheet named styles.css and linked it to our HTML document using the ` tag. The content of the styles.css` file would contain the same style rules as in the previous example.

Worked Example

Let's create a simple web page with an image, text, and custom styling:

  1. Create a new HTML file named index.html.
  2. Add the following code to index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Custom Web Page</title>
<style>
body {
background-color: lightgray;
font-family: Verdana, sans-serif;
}
h1 {
color: navy;
}
img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<h1>Welcome to My Custom Web Page!</h1>
<img src="image.jpg" alt="A beautiful landscape">
<p>This is a simple example of HTML and CSS styling with an image.</p>
</body>
</html>
  1. Save the file and open it in a web browser to see the result.

Common Mistakes

  1. Forgetting to close the ` tag: Ensure that you always close your tags with an ending tag (e.g., `).
  2. Incorrectly linking the stylesheet: Make sure the file path and name in the href attribute of the `` tag are correct.
  3. Not specifying units for CSS properties: Always include units (px, em, %, etc.) when setting values for CSS properties like width, height, margin, padding, font-size, etc.
  4. Overriding styles unintentionally: Be aware of specificity in CSS rules and use the !important keyword sparingly to avoid unintentional overrides.
  5. Ignoring browser compatibility issues: Test your web pages in multiple browsers to ensure consistent styling across different platforms.

Practice Questions

  1. What is the purpose of the `` tag in HTML?
  2. How can you create an external CSS file and link it to your HTML document?
  3. Write a CSS rule to set the font size of all headings (`, , ..., `) to 2em on your web page.
  4. How can you center an image within an HTML container using CSS?
  5. What is the difference between inline, internal, and external styles in HTML/CSS?

FAQ

--

  1. Why should I use CSS instead of directly styling HTML elements with attributes like style="color: red;"?
  • Using CSS allows for easier management of styles across multiple pages, better organization, and reusability of styles.
  1. What is the proper way to write comments in HTML/CSS?
  • In HTML, you can use ` to create single-line or multi-line comments. In CSS, you can use / /` for single-line or multi-line comments.
  1. How do I target specific elements within my HTML document using CSS selectors?
  • You can use various CSS selectors like class, id, tag name, and more to target specific elements in your HTML document. For example: .myClass, #myId, h1, etc.
  1. What is the box model in CSS, and how does it affect my web page layout?
  • The box model consists of content, padding, border, and margin areas that together define the size and positioning of an HTML element on a web page. Understanding the box model is essential for creating accurate layouts in CSS.
  1. How can I make my web page responsive to different screen sizes using CSS?
  • You can use media queries in CSS to apply different styles based on the width, height, or orientation of a user's device. This allows your web page to adapt to various screen sizes and devices.
Style (Web Development) | Web Development | XQA Learn