Scribd
Upload
16 views

HTML Structure for Css

Uploaded by

Tamrat Gashaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

HTML Structure for Css

Uploaded by

Tamrat Gashaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Certianily below are a simple css stylesheet that styles basic html tags this will gives your

webpage a
clear and modern look you can customize the styles as needed.

Html structure

Here is a simple html structure to demonstrate how CSS can be applied.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Basic CSS Styling</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Welcome to My Website</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section>

<h2>About Us</h2>
<p>This is a simple webpage to demonstrate CSS styling.</p>

</section>

<section>

<h2>Our Services</h2>

<p>We offer various services to help you achieve your goals.</p>

</section>

</main>

<footer>

<p>&copy; 2023 My Website</p>

</footer>

</body>

</html

Css structure style.php

Here is a basic CSS stylesheet that styles the above HTML

/* Reset some default styles */

body, h1, h2, p, ul {

margin: 0;

padding: 0;

/* Body styles */

body {

font-family: Arial, sans-serif;

line-height: 1.6;

background-color: #f4f4f4;

color: #333;

}
/* Header styles */

header {

background: #35424a;

color: #ffffff;

padding: 20px 0;

text-align: center;

header h1 {

margin-bottom: 10px;

nav ul {

list-style: none;

padding: 0;

nav ul li {

display: inline;

margin: 0 15px;

nav ul li a {

color: #ffffff;

text-decoration: none;

nav ul li a:hover {

text-decoration: underline;

}
/* Main content styles */

main {

padding: 20px;

section {

margin-bottom: 20px;

background: #ffffff;

padding: 15px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

h2 {

color: #35424a;

/* Footer styles */

footer {

text-align: center;

padding: 10px 0;

background: #35424a;

color: #ffffff;

position: relative;

bottom: 0;

width: 100%;

You might also like