Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
Website Styling
Goal
The next step is to add styles to our site so it doesn't look like raw HTML. We will also provide the colors we want to see on the website.
We can use the following source (https://colorhunt.co/) to select the color palette we like most.
We have selected such a color palette:
| #32012F | #524C42 | #E2DFD0 | #F97300 |
Possible Prompt
Create a CSS stylesheet that can be applied to that HTML, ensuring that it includes styling elements and adheres to the following color palette: #32012F, #524C42, #E2DFD0, and #F97300. Write the complete CSS code to achieve this, incorporating best practices for a visually appealing design.
Result
Important: The only change we need to make in our code is to connect the CSS file to the HTML file in the head.
index.html
index.css
index.js
Code Description
index.html
Line 9: Connecting CSS file to the HTML file.index.css
Lines 2-9: This block resets the default margin and padding for the specified elements (body, h1, h2, p, img) to zero.
This is a common practice to ensure consistent spacing across different browsers. Lines 12-16: The
body selector sets the default font, background color, and
text color for the entire document.
-
font-family: Arial, sans-serif;: Sets the font to Arial, with sans-serif as a fallback. background-color: #e2dfd0;: Applies a light beige background color.color: #32012f;: Sets the text color to a dark maroon.
<header> element.
background-color: #524c42;: Sets a dark brown background color.padding: 20px;: Adds 20 pixels of padding inside the header.text-align: center;: Centers the text within the header.
<main> element. padding: 20px;:
Adds 20 pixels of padding inside the main content area. Lines 31-33: Styles the
<article> elements.
margin-bottom: 30px;: Adds 30 pixels of margin below each article, creating space
between them. Lines 36-40: Styles the
<h2> elements within each article.
color: #32012f;: Sets the color to dark maroon.font-size: 24px;: Sets the font size to 24 pixels.margin-bottom: 10px;: Adds 10 pixels of margin below the article title.
<p> elements within each article.
-
line-height: 1.6;: Sets the line height to 1.6 times the font size for better readability. margin-bottom: 15px;: Adds 15 pixels of margin below each paragraph.
<img> elements within each article.
-
display: block;: Ensures the image is displayed as a block element, preventing inline behavior. -
max-width: 100%;: Ensures the image does not exceed the width of its container. height: auto;: Maintains the aspect ratio of the image.margin-bottom: 15px;: Adds 15 pixels of margin below the image.
<p> element within each article, which
represents the category.
-
line-height: 1.6;: Sets the line height to 1.6 times the font size for better readability. margin-bottom: 15px;: Adds 15 pixels of margin below each paragraph.
<footer> element.
-
background-color: #524c42;: Sets a dark brown background color, matching the header. color: #e2dfd0;: Sets the text color to light beige.text-align: center;: Centers the text within the footer.padding: 10px;: Adds 10 pixels of padding inside the footer.
Website State
Video Tutorial
Everything was clear?
Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
Website Styling
Goal
The next step is to add styles to our site so it doesn't look like raw HTML. We will also provide the colors we want to see on the website.
We can use the following source (https://colorhunt.co/) to select the color palette we like most.
We have selected such a color palette:
| #32012F | #524C42 | #E2DFD0 | #F97300 |
Possible Prompt
Create a CSS stylesheet that can be applied to that HTML, ensuring that it includes styling elements and adheres to the following color palette: #32012F, #524C42, #E2DFD0, and #F97300. Write the complete CSS code to achieve this, incorporating best practices for a visually appealing design.
Result
Important: The only change we need to make in our code is to connect the CSS file to the HTML file in the head.
index.html
index.css
index.js
Code Description
index.html
Line 9: Connecting CSS file to the HTML file.index.css
Lines 2-9: This block resets the default margin and padding for the specified elements (body, h1, h2, p, img) to zero.
This is a common practice to ensure consistent spacing across different browsers. Lines 12-16: The
body selector sets the default font, background color, and
text color for the entire document.
-
font-family: Arial, sans-serif;: Sets the font to Arial, with sans-serif as a fallback. background-color: #e2dfd0;: Applies a light beige background color.color: #32012f;: Sets the text color to a dark maroon.
<header> element.
background-color: #524c42;: Sets a dark brown background color.padding: 20px;: Adds 20 pixels of padding inside the header.text-align: center;: Centers the text within the header.
<main> element. padding: 20px;:
Adds 20 pixels of padding inside the main content area. Lines 31-33: Styles the
<article> elements.
margin-bottom: 30px;: Adds 30 pixels of margin below each article, creating space
between them. Lines 36-40: Styles the
<h2> elements within each article.
color: #32012f;: Sets the color to dark maroon.font-size: 24px;: Sets the font size to 24 pixels.margin-bottom: 10px;: Adds 10 pixels of margin below the article title.
<p> elements within each article.
-
line-height: 1.6;: Sets the line height to 1.6 times the font size for better readability. margin-bottom: 15px;: Adds 15 pixels of margin below each paragraph.
<img> elements within each article.
-
display: block;: Ensures the image is displayed as a block element, preventing inline behavior. -
max-width: 100%;: Ensures the image does not exceed the width of its container. height: auto;: Maintains the aspect ratio of the image.margin-bottom: 15px;: Adds 15 pixels of margin below the image.
<p> element within each article, which
represents the category.
-
line-height: 1.6;: Sets the line height to 1.6 times the font size for better readability. margin-bottom: 15px;: Adds 15 pixels of margin below each paragraph.
<footer> element.
-
background-color: #524c42;: Sets a dark brown background color, matching the header. color: #e2dfd0;: Sets the text color to light beige.text-align: center;: Centers the text within the footer.padding: 10px;: Adds 10 pixels of padding inside the footer.
Website State
Video Tutorial
Everything was clear?
