A Gentle Intro to CSS in HTML — Inline Styles — Build Your First Website (Part 2)
156 بار بازدید -
ماه قبل
-
🚀 In this video, we
🚀 In this video, we dive deep into styling HTML using CSS! 🎨 Whether you're a beginner aiming to make your website uniquely yours or a budding developer keen on understanding web aesthetics, this tutorial is crafted just for you.
📝 What we'll cover in this video:
* Introduction to CSS: Learn the basics of CSS and how it can transform the look of your HTML from simple to spectacular.
* Styling Techniques: We'll explore three different methods to apply CSS, ensuring your sites not only function well but also look appealing.
* Hands-On Examples: Follow along as we add colors, resize elements, and position items on our sample webpage.
🔗 In our previous sessions, we constructed a basic HTML document. Now, we’ll expand on that foundation by integrating styles that enhance user interaction and visual appeal. Don't worry if you missed our earlier videos; you can catch up right here: [Insert link to the playlist or previous video].
👨💻 Why this video is a must-watch:
* Practical Learning: Code along with the tutorial in your text editor and apply what you learn immediately.
* From Basics to Advanced: Start with simple CSS properties and advance to complex styling techniques.
* Prepare for Bigger Projects: Every step takes you closer to building full-scale applications that are both functional and visually engaging.
👍 Like this video, share it with friends who are keen on learning web development, and subscribe to ModernNerd Code for more insightful tutorials. Your engagement helps us grow and continue providing quality content!
💬 Got questions or feedback? Leave a comment below or just say hi! Your interactions help boost our presence and ensure we're delivering content that meets your learning needs.
🌟 Stay tuned: By the end of this tutorial, you'll be equipped to add personalized styling to your websites, making them not just operational but also aesthetically pleasing.
Remember, learning by doing is key—so open your text editor, and let’s get coding!
⏳ Timestamps:
0:00 Intro
0:41 Subscribe to ModernNerd Code
1:15 Text Editor Video
2:58 Start of Styling With CSS
4:45 Quick Review of HTML Element Attributes
4:58 Introduction to the style attribute for HTML Elements
5:46 How to Add Border CSS to Image HTML Element
10:02 How to Make HTML Elements Round Using CSS Border Radius
12:14 How to Style a Container Element in HTML Using CSS
14:19 How to Add a Background Color to an HTML Element
15:23 How to Add Padding to an HTML Container Element Using CSS
16:49 What is Margin in CSS?
18:03 Margin vs Padding in CSS Explained
18:41 Margin Pushes Other Elements Away
19:23 How to Define Margin on Each Side of an HTML Element Using CSS
20:04 An Illustration of Padding vs. Margin in CSS
22:02 It's Important to Understand the Difference Between Padding and Margin
24:04 How to Add Padding to Different Sides of an HTML Element Using CSS
25:20 How to Set the Font Size of Text in HTML Elements Using CSS
27:01 CSS Property Names With Multiple Words Must Use Dashes Between
28:20 Setting the Font Size of a Paragraph HTML Element Using CSS
28:41 How to Make Text in HTML Elements Bold
29:23 How to Set the Color of Text in HTML Elements Using CSS
31:12 Summary of Using the CSS Style Attribute on HTML Elements
32:40 Next Video: Another Way to Add CSS to HTML Using the Style Tag
33:03 We Will Learn How to Add CSS Using the Style Tag and Separate CSS
33:26 Subscribe to ModernNerd Code to Learn More HTML, CSS, and JavaScript
34:16 Don't Copy and Paste Code. Type Your Code Yourself to Learn Better
34:52 Final Thoughts
Read the video transcript on our blog: medium.com/modernnerd-code/a-gentle-intro-to-css-i…
ماه قبل
در تاریخ 1403/05/06 منتشر شده
است.
156
بـار بازدید شده