Skip to main content

HTML and CSS - The Basics

The Basics of HTML and CSS - introduction for beginners.

For Beginners, here are some HTML and CSS basics along with coding samples to get started:

✅ HTML (HyperText Markup Language)​

HTML is the standard markup language used to create web pages. It consists of elements, which are represented by tags. Here are some fundamental HTML concepts:

HTML Document Structure​

An HTML document is structured with an opening <html> tag, including a <head> section for metadata and a <body> section for content.

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Headings and Paragraphs​

Use headings (<h1>, <h2>, <h3>, ...) for titles and <p> tags for paragraphs.

<h1>Main Heading</h1>
<p>This is a paragraph.</p>

Lists​

Create unordered lists (<ul>) and ordered lists (<ol>) with list items (<li>).

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Create hyperlinks using the <a> tag with an href attribute.

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

Images​

Display images with the <img> tag and the src attribute.

<img src="image.jpg" alt="An example image">

✅ CSS (Cascading Style Sheets)​

CSS is used to style and format HTML elements. It defines how HTML elements are displayed. Here are some basic CSS concepts:

Inline CSS​

You can add inline styles directly to HTML elements using the style attribute.

<h1 style="color: blue;">Blue Heading</h1>

Internal CSS​

You can include CSS within the <style> element in the document's <head> section.

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

External CSS​

Create a separate CSS file and link it to your HTML document using the <link> element.

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

In styles.css:

h1 {
    color: green;
}

Selectors and Properties​

Selectors are used to target HTML elements, and properties define how they should look. For example, to change the font size:

p {
    font-size: 16px;
}

Classes and IDs​

You can apply styles to specific elements using classes and IDs.

<p class="highlight">This is a highlighted paragraph.</p>
<p id="special">This is a special paragraph.</p>

In CSS:

.highlight {
    background-color: yellow;
}
#special {
    font-weight: bold;
}

✅ In Summary​

These are some basic HTML and CSS concepts. You can create and style web pages by combining HTML for content structure and CSS for presentation.

As you progress, you can learn more advanced techniques to build dynamic and responsive websites.

✅ Resources​