Today marks the 8th day of my full-stack development journey, and it was packed with exciting new concepts and hands-on learning! Here's a rundown of what I achieved:
1. Learning about the Style Tag in HTML (Inline Styles)
I started the day by diving into the <style> tag in HTML, specifically focusing on inline styles. Inline styles allow you to apply CSS directly within an HTML element, which is useful for quick styling or overriding existing styles. Here's an example of how I used inline styles:
<h1 style="color: red">Suhan</h1>
<p style="color: blue;">Iam a Tech Enthusiast</p>
**
2. Diving into CSS**
The real adventure began when I dipped my toes into CSS (Cascading Style Sheets). CSS is like the magic wand that transforms plain HTML into something visually striking. It’s the tool that lets you control the look and feel of your web pages—everything from layout and colors to fonts and spacing. Think of CSS as the artist that adds personality and flair to your website, making it not just functional but also beautiful and engaging
3. Linking HTML with CSS Using the Link Tag
Next, I learned how to link an HTML file with a CSS file using the <link> tag. This is an essential skill as it separates content (HTML) from design (CSS), promoting cleaner and more maintainable code. Here’s how I linked my HTML to a CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS chapter-1</title>
<link rel="stylesheet" href="style.css">
</head>
4. Exploring the Color and Background-Color Properties
To wrap up the day, I delved into two fundamental CSS properties: color and background-color. These properties are crucial for setting the text color and background color of HTML elements. I experimented with various colors to see how they change the appearance of elements.
Here's a snippet of what I practiced:
h1{
color: blue;
background-color: aquamarine;
}
p{
color: green;
background-color:cornsilk;
}
button{
color: chocolate;
background-color: black;
}
Conclusion
Today's session was immensely productive and fun. I now have a solid understanding of how to use inline styles in HTML, the basics of CSS, linking CSS files to HTML, and styling elements using color and background-color properties. I'm excited to continue this journey and dive deeper into CSS, exploring more properties and techniques to enhance the visual aspects of web development.
Stay tuned for more updates as I continue to learn and grow in my full-stack development journey!