Scribd
Upload
2 views

CSS

Uploaded by

Amith G Nair
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS

Uploaded by

Amith G Nair
Copyright
© © All Rights Reserved
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