←

Web Development

Html with CSS for Beginners

Html with CSS for Beginners

Creating an HTML page with CSS for beginners involves understanding the basic structure of an HTML document, how to link a CSS stylesheet, and how to apply styles to HTML elements. Below is a step-by-step guide with examples to help absolute beginners get started.

Algogenz logo

8m · 5min read

Creating an HTML page with CSS for beginners involves understanding the basic structure of an HTML document, how to link a CSS stylesheet, and how to apply styles to HTML elements. Below is a step-by-step guide with examples to help absolute beginners get started.


Folder Structure

When starting a web development project, it's crucial to organize files properly. Below is an expanded version of the folder structure with additional files and comments:



MyWebsite/  # Folder
│
├── index.html  # The main HTML file
├── about.html  # An additional HTML page for 'About Us'
├── contact.html  # A contact page with a form
│
├── css/  # Folder
│   ├── styles.css  # Main CSS file for styling the website
│   ├── about.css  # Specific styles for the About page
│   ├── contact.css  # Specific styles for the Contact page
│
├── js/  # Folder
│   ├── script.js  # JavaScript file for interactive elements
│
├── images/  # Folder
│   ├── logo.png  # Company logo
│   ├── background.jpg  # Background image for the site
│
└── fonts/  # Folder
    ├── OpenSans-Regular.ttf  # Custom font for the website

HTML Structure and Elements

HTML is the skeleton of your webpage. It defines the structure and content. Here are some common HTML elements:

  • <h1> to <h6>: Header tags that define headings, with <h1> being the most important.
  • <p>: Paragraph tag for text.
  • <a>: Anchor tag for creating links.
  • <img>: Image tag for embedding images.
  • <ul> and <ol>: Unordered (bullets) and ordered (numbers) list tags.
  • <li>: List item tag used within <ul> or <ol>.

Example of a simple HTML page with various elements:

Quick trick: use Shift + ! to generate the basic HTML5 template.



<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>About Us</title><link rel="stylesheet" href="css/about.css">
</head>
<body>

    <h1>About Our Company</h1><p>We are a company that values innovation and customer satisfaction.</p>

    <h2>Our Team</h2><ul><li>CEO: Jane Doe</li><li>CTO: John Smith</li><li>Lead Developer: Alice Johnson</li></ul>

    <h2>Contact Us</h2><p>Email: <a href="mailto:contact@ourcompany.com">contact@ourcompany.com</a></p>

    <img src="images/team-photo.jpg" alt="Our Team">

</body>
</html>

CSS Basics and Styling

CSS allows you to add style to your HTML elements. It controls layout, colors, fonts, and more. Here's how you might style the above HTML:



/* about.css */
body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    background-color: #fff;
}

h1 {
    color: #0275d8;
    text-align: center;
}

ul {
    list-style-type: none;
}

ul li {
    background-color: #f8f9fa;
    padding: 10px;
    margin-bottom: 5px;
    border-left: 5px solid #0275d8;
}

a {
    color: #d9534f;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

Linking CSS to HTML

You link a CSS file to an HTML document using the <link> tag within the <head> section. Note that each HTML file should link to a CSS file that styles that particular page. Here is an example of linking the "about.css" file to the "about.html" document:



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


HTML Classes

A class is a selector that allows you to apply a set of styles to multiple elements within an HTML document. Unlike an ID selector which is unique and can be applied to only one element per page, a class can be used on multiple elements. You can also apply multiple classes to a single element to combine styles. Classes are defined in CSS with a period (.) followed by the class name and can be referenced in the HTML by using the class attribute.

  • It is applied to HTML elements via the class attribute and can be used multiple times throughout the document.
  • Classes allow for the reuse of styles across different elements without having to write the same CSS rules again, thus keeping the stylesheet DRY (Don't Repeat Yourself).


Here's how you can use classes in HTML:



<div class="content-box">This is a content box.</div>
<div class="content-box">This is another content box.</div>

CSS Classes

In your CSS, a class is represented with a period . followed by the class name. Here's how you can style the .content-box class from the HTML example:



.content-box {
    border: 1px solid #000;
    padding: 20px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

Combining Classes

You can also combine classes to apply multiple sets of styles to a single element. For example:



<div class="content-box highlight">This is an important content box.</div>

And in CSS:



.highlight {
    border-color: #ff0;
    background-color: #fff8dc;
}

The div will have styles from both .content-box and .highlight.


Creating a Responsive Layout

Responsive design ensures that your website looks good on all devices. Use media queries in CSS to apply different styles based on the screen size. Here's an example:



/* Use a mobile-first approach: default styles are for mobile, then adjust for larger screens */

/* Styles for screens larger than 600px */
@media (min-width: 600px) {
    .container {
        width: 80%;
        margin: auto;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav {
        display: flex;
    }

    nav a {
        margin-left: 20px;
    }
}

Adding Interactivity with JavaScript

JavaScript can be used to add dynamic behavior to your website. Link a JavaScript file just before the closing </body> tag in your HTML:



<!-- At the bottom of your HTML file -->
<script src="js/script.js"></script>

In your script.js file, you might have a simple script to react to a button click:



document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});


Conclusion

This guide has provided an introduction to HTML and CSS for beginners, with examples of code and folder structure. However, there is much more to learn. Beginners should practice by building simple websites and gradually incorporating more complex features like forms, tables, and CSS animations.


For further learning, consider exploring resources like:

  • W3Schools for tutorials on HTML, CSS, and JavaScript.
  • MDN Web Docs for comprehensive documentation and learning resources.
  • Codecademy and freeCodeCamp for interactive coding lessons.

Related Tags

CSSHTMLFrontend

Recommended

TypeScript Types vs Interfaces

4m · 5min read

Web Development

TypeScript Types vs Interfaces

Types vs Interfaces: Types in TypeScript are more flexible and can define a wider range of data types, including primitives, unions, intersections, tuples, and more, while interfaces are primarily used to describe the shape of objects and support declaration merging and extending, making them ideal for object-oriented programming and complex data structures

The this Keyword in JavaScript

5m · 3min read

Web Development

The this Keyword in JavaScript

The this keyword in JavaScript is a reference to the object that a function is a property of. It's a fundamental concept in JavaScript, especially in object-oriented programming. Unlike in languages like Java, C#, or PHP, where this typically refers to the current instance of the class, JavaScript's this behaves differently and can be quite versatile.

Next pages:

1

2

3

4