Scribd
Upload
6 views

CSS

Uploaded by

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

CSS

Uploaded by

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

Here's a sample CSS code with an explanation of each part:

Code

/* Global Styles */

body {

font-family: Arial, sans-serif; /* Sets a clean, readable font */

background-color: #f4f4f4; /* Sets a light gray background */

margin: 0; /* Removes default browser margin */

padding: 0; /* Removes default browser padding */

line-height: 1.6; /* Improves readability with consistent line spacing */

/* Header Styles */

header {

background: #333; /* Sets a dark background color */

color: #fff; /* Makes the text white */

padding: 20px 10px; /* Adds space inside the header */

text-align: center; /* Centers the text */

/* Navigation Bar */

nav {

background: #444; /* Slightly lighter background than the header */

color: #fff; /* White text */

padding: 10px 0; /* Vertical padding for spacing */

text-align: center; /* Centers navigation items */

nav a {
color: #fff; /* White link color */

margin: 0 15px; /* Adds space between links */

text-decoration: none; /* Removes underline from links */

nav a:hover {

color: #00bcd4; /* Changes the link color when hovered */

/* Main Content Area */

main {

background: #fff; /* White background for content */

padding: 20px; /* Adds space inside the content area */

margin: 20px; /* Adds space outside the content area */

border-radius: 5px; /* Slightly rounds the corners */

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */

/* Footer Styles */

footer {

background: #333; /* Dark background */

color: #fff; /* White text */

text-align: center; /* Centers footer content */

padding: 10px; /* Adds padding inside the footer */

font-size: 0.9em; /* Makes the text slightly smaller */

margin-top: 20px; /* Adds space above the footer */

}
Explanation

1. Global Styles (body)

○ font-family: Sets the font for the entire document to Arial, with sans-serif as a
fallback.
○ background-color: Defines the light gray background color.
○ margin and padding: Removes default spacing applied by the browser.
○ line-height: Improves readability by increasing the space between lines of text.
2. Header Styles (header)

○ background: Applies a dark background.


○ color: Sets the text color to white.
○ padding: Adds spacing inside the header.
○ text-align: Aligns the text to the center.
3. Navigation Bar (nav and nav a)

○ nav: Styles the navigation bar with a dark background and white text.
○ nav a: Styles individual links to be white, removes underlines, and spaces them evenly.
○ nav a:hover: Changes the link color when hovered, adding an interactive effect.
4. Main Content Area (main)

○ background: Sets the content area to have a white background for better readability.
○ padding and margin: Adds spacing inside and outside the content block.
○ border-radius: Rounds the corners slightly for a modern look.
○ box-shadow: Adds a subtle shadow for a "card" effect.
5. Footer Styles (footer)

○ background and color: Matches the footer's design with the header for consistency.
○ text-align: Centers the text.
○ font-size: Reduces the font size for footer text.
○ margin-top: Separates the footer from the content above.

This CSS can be applied to create a simple yet visually appealing webpage layout. Let me know if you'd
like an HTML example to pair with it or further details!

You might also like