Episode 13: Enhancing HTML with CSS Properties - Color, Text, Background, and Font | Web Development
Welcome to Episode 13 of our Web Development series! In this episode, we dive deep into the use of CSS (Cascading Style Sheets) properties to enhance and beautify HTML pages. We'll explore various properties such as Color, Text, Background, and Font, with practical examples.
🔹 *Topics Covered:*
**Using CSS Properties**: How to apply CSS properties effectively.
**Color in CSS**: Setting and managing colors in your web pages.
**Text in CSS**: Styling text to improve readability and appearance.
**Background in CSS**: Enhancing backgrounds with colors, images, and gradients.
**Font in CSS**: Customizing fonts to match your design needs.
Whether you're a beginner aiming to understand the basics of CSS properties or looking to refine your web design skills, this episode provides practical knowledge and examples.
📌 *Key Points:*
Detailed explanation of various CSS properties.
Practical examples demonstrating the use of Color, Text, Background, and Font properties.
Tips on how to effectively beautify your HTML pages using CSS.
👨🏫 **Instructor**: Sagar Choudhary, Assistant Professor in the Department of Computer Science and Engineering.
📚 *Related Videos:*
[Web Development Episode 12: Inclusion of CSS and Beautifying HTML Pages]
[Web Development Episode 14: Advanced CSS Layout Techniques]
👍 If you find this video helpful, please like, comment, and subscribe to stay updated with our latest content.
Thank you for watching!
#WebDevelopment #CSS #CSSTutorial #WebDesign #FrontendDevelopment #LearnCSS #CSSProperties #BeautifyingHTML #CSSExamples #CascadingStyleSheets #WebDevelopmentSeries #SagarChoudhary
CSS-2 Code: -
/* Font family */
body {
font-family: 'Arial, sans-serif';
background-color: #f0f0f0; /* Light gray background */
color: #333; /* Dark gray text */
margin: 0;
padding: 0;
}
/* Font style */
em {
font-style: italic;
color: #555; /* Medium gray italic text */
}
/* Font variant */
.small-caps {
font-variant: small-caps;
}
/* Font weight */
strong {
font-weight: bold;
}
/* Font size */
h1 {
font-size: 2.5em;
color: #FFFFFF;
}
h2 {
font-size: 2em;
color: #cc0000; /* Red color for subheadings */
}
p {
font-size: 1.2em;
color: #333; /* Dark gray text for paragraphs */
}
/* Font shorthand */
header {
font: italic small-caps bold 24px/30px Georgia, serif;
background-color: #0044cc; /* Blue background for header */
color: white; /* White text for header */
text-align: center;
padding: 20px 0;
}
footer {
font: normal 14px Arial, sans-serif;
background-color: #333; /* Dark gray background for footer */
color: white; /* White text for footer */
text-align: center;
padding: 10px 0;
}
/* Additional styling */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
padding: 10px;
background-color: white; /* White background for sections */
border: 1px solid #ccc; /* Light gray border for sections */
border-radius: 8px; /* Rounded corners for sections */
}
h2 {
border-bottom: 2px solid #cc0000; /* Red underline for subheadings */
padding-bottom: 5px;
}
CSS-3 Code: -
/* Font family */
body {
font-family: 'Arial, sans-serif';
background-color: #f0f0f0; /* Light gray background */
color: #333; /* Dark gray text */
margin: 0;
padding: 0;
}
/* Font style */
em {
font-style: italic;
color: #555;
}
/* Font variant */
.small-caps {
font-variant: small-caps;
}
/* Font weight */
strong {
font-weight: bold;
}
/* Font size */
h1 {
font-size: 2.5em;
color: #0044cc;
}
h2 {
font-size: 2em;
color: #cc0000;
}
p {
font-size: 1.2em;
color: #f9f8f8; /* Dark gray text for paragraphs */
}
/* Font shorthand */
header {
font: italic small-caps bold 24px/30px Georgia, serif;
background-color: #0044cc;
color: white;
text-align: center;
padding: 20px 0;
}
footer {
font: normal 14px Arial, sans-serif;
background-color: #052f01;
color: white;
text-align: center;
padding: 10px 0;
}
/* Additional styling */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
}
h2 {
border-bottom: 2px solid #cc0000;
padding-bottom: 5px;
}
/* Color property */
h1, h2, p {
color: #333; /* Dark gray text */
}
/* Letter spacing */
h1, h2 {
letter-spacing: 2px;
}
/* Word spacing */
p {
word-spacing: 4px;
}
/* Text indent */
p {
text-indent: 20px;
}
/* Text align */
header, footer, section {
text-align: center; /* Center alignment */
}
/* Text decoration */
h2 {
text-decoration: underline; /* Underline subheadings */
}
/* Text transform */
h1 {
text-transform: uppercase; /* Uppercase main heading */
}
/* Text shadow */
h1, h2 {
text-shadow: 2px 2px #aaa; /* Shadow effect for headings */
}