Let's create a simple webpage with a heading, title,
and subtitles. We'll style these elements with different colors using CSS, and
I'll explain the guidelines for adding color to text effectively.
colorsToText.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colorful Webpage</title> </head> <body> <header> <h1 class="main-heading">Welcome to My Colorful Webpage</h1> </header> <section> <h2 class="title">Understanding Color in Web Design</h2> <p class="subtitle">Subtitle 1: Importance of Color</p> <p>Color is a powerful tool in web design. It can convey emotions, create hierarchy, and enhance user experience.</p> <p class="subtitle">Subtitle 2: Choosing the Right Colors</p> <p>When choosing colors for your text, consider contrast, readability, and the overall theme of your design.</p> <p class="subtitle">Subtitle 3: Implementing Colors in CSS</p> <p>CSS allows you to style your text with various colors using the <code>color</code> property.</p> </section> </body> </html>
Above snippet generate below screen.
Let’s apply styles to the main heading.
body { margin: 5; padding-left: 5px; font-family: Arial, sans-serif; } /* Main Heading */ .main-heading { color: #3498db; /* A calm blue color */ text-align: center; margin-top: 20px; }
This CSS snippet styles an element with the class main-heading, setting its text color to a calm blue (#3498db), centering the text horizontally with text-align: center, and adding a 20px margin above the element to create space between it and any elements above it.
With above styles, the page looks like below.
Let’s apply below styles to title and subtitle sections.
.title { color: darkblue; margin-top: 30px; font-size: 24px; } .subtitle { color: maroon; font-size: 20px; margin-top: 15px; font-weight: bold; }
After adding above styles, page looks like below.
Let’s change the color of paragraph text by applying below styles.
p { color: #555555; /* A neutral dark gray color */ line-height: 1.6; margin-bottom: 10px; padding-left: 15px; }
With this change, the screen looks like below.
Complete application looks like below.
colorsToText.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colorful Webpage</title> <style> body { margin: 5; padding-left: 5px; font-family: Arial, sans-serif; } /* Main Heading */ .main-heading { color: #3498db; /* A calm blue color */ text-align: center; margin-top: 20px; } .title { color: darkblue; margin-top: 30px; font-size: 24px; } .subtitle { color: maroon; font-size: 20px; margin-top: 15px; font-weight: bold; } p { color: #555555; /* A neutral dark gray color */ line-height: 1.6; margin-bottom: 10px; padding-left: 15px; } </style> </head> <body> <header> <h1 class="main-heading">Welcome to My Colorful Webpage</h1> </header> <section> <h2 class="title">Understanding Color in Web Design</h2> <p class="subtitle">Subtitle 1: Importance of Color</p> <p>Color is a powerful tool in web design. It can convey emotions, create hierarchy, and enhance user experience.</p> <p class="subtitle">Subtitle 2: Choosing the Right Colors</p> <p>When choosing colors for your text, consider contrast, readability, and the overall theme of your design.</p> <p class="subtitle">Subtitle 3: Implementing Colors in CSS</p> <p>CSS allows you to style your text with various colors using the <code>color</code> property.</p> </section> </body> </html>
No comments:
Post a Comment