Introduction to CSS: Heartfelt congratulations to you because you’re reading this Tweet. It’s another big programming class on Twitter threads. Let’s take a step further in our coding journey.
Topic: Introduction to CSS
Heartfelt congratulations to you because you’re reading this Tweet. It’s another big programming class on Twitter threads.
Let’s take a step further in our coding journey.
Kindly retweet, open and learn.
— Àgbà Akin (@Kynsofficial) November 15, 2021
Dear students welcome to your first class on CSS. Firstly, I want to congratulate you on the completion of your HTML course by following my previous threads. If you’re new to this whole thing, kindly follow me to join us and avoid missing classes.
Suppose you are thinking of closing your browser because you’ve already missed classes; please don’t. We can find common ground, and I can bring you up to speed. Click on this link in my bio or start from the very beginning.
We’ve had just five previous classes on HTML, and they were straightforward and well explained. Before I dabble into CSS and commence its total destructions, let’s do a bit of recap on HTML and refresh our memory. Remember that in the previous classes.
I talked about what you’d need to go on this journey with us, and I’ll do it again.
- -Access to Internet and Twitter to check and recheck my threads
- -IDE tool, and I recommend VsCode
- -Unshiverable Determination and InshAllah
You can download VsCode from here. After that, we went deep into HTML, and I taught and explained the following topics in full
- -What is HTML?
- -Attributes and Hyperlinking
- -Headings + Lists -inline Vs Block element
- -Id + Class Attributes
- -HTML semantics
- -HTML Form
- -HTML buttons
- -HTML Tables
If you remember all of these, which I assume you will as you’ve been taught and given exercises, then let’s get into CSS. What is CSS? CSS: Cascading Style Sheet It is basically used to beautify your web pages after writing the HTML. see the image below for before and after CSS application
Happy you’re seeing this tweet. Let’s take a step further on our coding journey today.
In case you aren’t familiar with this handle, I teach web development from scratch using twitter threads.
Pls retweet & get in👇🏽
— Àgbà Akin (@Kynsofficial) November 17, 2021
- 1 type selectors: used to select HTML elements by element name
- 2 class selectors: used to select HTML elements by a specific class value
- Three id selectors: used to select an HTML element associated with a specific id value
Using a class selector is done by placing a . followed by the name of the class value: See example: Due to long wording in my code, it’s impossible to see some tags being closed, don’t forget to close them in yours the </h1> and </p>
- A ‘type‘ selector with properties for ‘font-size and ‘color.‘
- A ‘class‘ selector with a ‘color‘ property
- An ‘id‘ selector with a ‘color‘ property
In the case where two (or more) selectors target the same element and property, the cascade will select which property to apply based on its “importance.” id selectors are the most important, followed by class selectors, and finally, type selectors.
The second p element’s color is blue since the class has more importance than type. The third p element’s color is green since id has more importance than both class and type. However, the font-size property is not overwritten by either the class or id selectors, so it remains the same for all p elements
Multiple Element Selection in CSS
Selecting Nested Elements
INPUT HTMLINPUT CSSOUTPUT
- •Apply the border-bottom CSS property to h1 elements with a class or id attribute
- •Apply the font-style CSS property to p elements with a class or id attribute
I’m sure by now you can figure which code is HTML and CSS