There are two fundamental technologies that anyone who wants to step into the world of web development should know: HTML and CSS. These two languages form the skeleton and appearance of websites. HTML (HyperText Markup Language) structures the content, while CSS (Cascading Style Sheets) determines how this content will be displayed. In this article, we will examine the basics, importance, and usage of HTML and CSS in detail.

What is HTML?

HTML is a markup language that forms the basis of web pages. HTML tags are used to structure text, images, links, and other content elements. Each HTML tag tells the browser how the content should be displayed. HTML forms the skeleton of a web page, defining the meaning and structure of the content.

Basic HTML Tags

There are many different tags in HTML, but some are more basic and frequently used. Here are some of the most important:

<html>: The root tag of the HTML document.
<head>: Contains metadata about the document (title, character set, style files, etc.).
<title>: Defines the title that appears in the browser tab.
<body>: Contains the content of the web page (text, images, links, etc.).
<h1> - <h6>: Defines headings (<h1> is the largest heading, <h6> is the smallest heading).
<p>: Defines paragraphs.
<a>: Defines hyperlinks (links). The href attribute specifies the target URL.
<img>: Defines images. The src attribute specifies the URL of the image file. The alt attribute specifies alternative text used when the image cannot be loaded or by screen readers.
<ul> and <li>: Defines unordered lists. The <li> tags specify list items.
<ol> and <li>: Defines ordered lists. The <li> tags specify list items.
<div>: Defines divisions. Used to group content and apply styles.
<span>: Defines spans of text. Used to apply styles to a specific section within the text.

HTML Example

The following example shows the structure of a simple HTML document:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a simple HTML document.</p>
    <a href="https://www.example.com">Example Website</a>
    <img src="image.jpg" alt="Descriptive Image">
</body>
</html>

What is CSS?

CSS (Cascading Style Sheets) is a style language used to control the appearance of web pages created with HTML. CSS defines colors, fonts, layout, animations, and other visual properties. CSS separates from HTML, making it easier to control the presentation of content and ensuring that websites have a consistent look.

CSS Selectors and Properties

In CSS, style rules are defined using selectors and properties. Selectors specify which HTML elements to style, while properties define how those elements will look.

Selectors: Used to target HTML elements (e.g., p (paragraph elements), .class-name (elements with a class name), #id-name (elements with an id name)).
Properties: Used to control the appearance of elements (e.g., color (text color), font-size (font size), background-color (background color), margin (margin), padding (padding)).

CSS Usage Methods

CSS can be applied to an HTML document in three different ways:

Inline CSS: Styles are defined directly within HTML tags using the style attribute. Generally not recommended because it makes the code harder to read and maintain.
Internal CSS: Styles are defined within the <style> tag in the <head> section. May be suitable for small projects.
External CSS: A separate .css file is created and linked to the HTML document with the <link> tag. This is the best practice method because it keeps the code organized and manageable.

CSS Example

The following example shows how to use an external CSS file and basic style properties:

HTML (index.html):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph styled with CSS.</p>
</body>
</html>

CSS (style.css):


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

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

p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

HTML and CSS Together

HTML and CSS work together to create both the structure and appearance of websites. HTML defines the content, while CSS determines how that content will be displayed. This separation allows web developers to manage content and presentation separately, making it easier to update and maintain websites.

Responsive Design

Today, it is important for websites to display properly on different devices (desktop, tablet, mobile). Responsive design uses CSS to ensure that websites automatically adapt to the screen size. Media queries are used in CSS to define different style rules for different screen sizes.

Example Media Query:


/* Style rules for small screens */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 2em;
    }
}

/* Style rules for large screens */
@media (min-width: 992px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5em;
    }
}

Conclusion and Summary

HTML and CSS are the cornerstones of web development. HTML defines the structure and content of web pages, while CSS determines how that content will be displayed. The combined use of these two languages allows web developers to create impressive, user-friendly, and accessible websites. Learning HTML and CSS is the most important step to take to enter the world of web development. In this article, we examined the basics, importance, and usage of HTML and CSS. We wish you success on your web development journey!