Create styles.css

Adding a test styles.css file

styles.css

@@ -0,0 +1,55 @@
+/* General Styles */
+body {
+    font-family: Arial, sans-serif; /* Sets the font for the entire page */
+    line-height: 1.6; /* Increases line height for better readability */
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4; /* Light gray background color */
+}
+
+/* Header Styles */
+header {
+    background: #35424a; /* Dark background for the header */
+    color: #ffffff; /* White text color */
+    padding: 20px 0; /* Padding for the header */
+    text-align: center; /* Center-aligns the header text */
+}
+
+nav ul {
+    list-style: none; /* Removes bullet points from the list */
+    padding: 0; /* Removes default padding */
+}
+
+nav ul li {
+    display: inline; /* Displays list items in a row */
+    margin: 0 15px; /* Adds space between the items */
+}
+
+nav ul li a {
+    color: #ffffff; /* White text color for links */
+    text-decoration: none; /* Removes underline from links */
+}
+
+/* Main Content Styles */
+main {
+    padding: 20px; /* Adds padding around the main content */
+}
+
+article {
+    background: #ffffff; /* White background for articles */
+    padding: 15px; /* Padding inside articles */
+    margin-bottom: 20px; /* Space between articles */
+    border-radius: 5px; /* Rounded corners for articles */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
+}
+
+/* Footer Styles */
+footer {
+    text-align: center; /* Center-aligns footer text */
+    padding: 10px 0; /* Padding for the footer */
+    background: #35424a; /* Dark background for the footer */
+    color: #ffffff; /* White text color */
+    position: relative; /* Positions footer at the bottom */
+    bottom: 0;
+    width: 100%; /* Full width for the footer */
+}