HTML with CSS
HTML with CSS.
When building websites, HTML and CSS go hand in hand. HTML provides the structure of the page, while CSS adds the styling. Together, they make web pages both functional and visually appealing. If you’re new to web development, learning how HTML and CSS work together is one of the first steps.
What is HTML?
HTML, or HyperText Markup Language, is the backbone of any webpage. It defines the structure of the content you see—like headings, paragraphs, images, and links. For example, a simple HTML page might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
In this example, HTML is being used to create the basic structure, including a heading (<h1>) and a paragraph (<p>).
What is CSS?
CSS, or Cascading Style Sheets, is the language used to style and visually format HTML elements. CSS controls things like colors, fonts, layouts, and spacing. You can think of HTML as the skeleton of a webpage, while CSS is the clothing that makes it look good.
Here’s an example of how you might use CSS to style the HTML we just created:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
This CSS code changes the font of the body, sets a background color, styles the <h1> tag with a darker color and centers it, and adjusts the font size and color for the paragraph.
How to Use HTML and CSS Together
To make CSS work with HTML, you need to link the two. There are three ways to do this:
- Inline CSS: This is where you put the CSS directly inside the HTML element. It’s not commonly used because it mixes structure with styling, which isn’t ideal for large projects.htmlCopy code
<h1 style="color: blue;">This is a Blue Heading</h1> - Internal CSS: This method involves placing your CSS inside the
<style>tags in the<head>section of your HTML document. It’s useful for styling a single webpage.htmlCopy code<head> <style> body { background-color: lightblue; } </style> </head> - External CSS: The most common and recommended method is using an external CSS file. You create a separate
.cssfile, then link it to your HTML document. This keeps your HTML and CSS separate, making your code cleaner and easier to maintain.Here’s how to link an external CSS file:htmlCopy code<head> <link rel="stylesheet" href="styles.css"> </head>And inside yourstyles.cssfile, you’d write your CSS:cssCopy codebody { background-color: lightyellow; }
A Simple Example of HTML with CSS
Let’s combine HTML and CSS to create a simple webpage:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Stylish Page</h1>
</header>
<section>
<p>This page is styled using CSS!</p>
</section>
<footer>
<p>Created with love by You!</p>
</footer>
</body>
</html>
CSS (styles.css):
/* General Styles */
body {
font-family: 'Verdana', sans-serif;
margin: 0;
padding: 0;
background-color: #e0f7fa;
}
header {
background-color: #00796b;
color: white;
text-align: center;
padding: 20px 0;
}
section {
padding: 20px;
margin: 20px;
background-color: white;
border-radius: 8px;
}
footer {
text-align: center;
padding: 10px;
background-color: #00796b;
color: white;
}
CSS also allows you to make websites responsive, meaning they look good on all devices—desktops, tablets, and phones. For example, using media queries in CSS, you can change how a page looks depending on the screen size:
@media screen and (max-width: 768px) {
body {
background-color: lightpink;
}
}
This simple example changes the background color to light pink on screens that are 768px wide or smaller.
In Conclusion
HTML and CSS work together to make your websites not only functional but also visually appealing. HTML structures the content of your page, while CSS styles it and controls its layout. By mastering these two languages, you’ll be able to build attractive, user-friendly websites. Whether you’re creating a simple page or a complex site, learning how to use HTML with CSS is one of the most important skills for a web developer.