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.
10m · 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
classattribute 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.
Recommended
