Thread by @Kynsofficial

Congratulations again for seeing one of the best Tweets you will read online today: We're are starting our CSS coding Journey from scratch.

Course: HTML, CSS & JAVASCRIPT
Topic: CSS

I'll break this down for you like you're two, kindly retweet for others, and let's begin.

Hello students', Welcome to your first class on CSS. To avoid missing subsequent classes, kindly follow me and on tweet notifications.

If you are seeing this for the first time, you can take all the 3 previous HTML classes we've had using the Twitter Moment in my pinned Tweet.

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

-Access to Internet and Twitter to check and recheck my threads
-IDE tool and I recommend VsCode
-Unshiverable Determination and InshAllah

Here is everything we did in HTML

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

One way, which we’ve already explored in previous lessons, is to use the style attribute on an HTML element:
Check example below

This video tutorial will give an in-depth explanation of the entire thread, creating external CSS files and more

akinolaakeem.com/introduction-t…

Let’s deconstruct the above example. CSS files comprise a set of rules, each consisting of a selector (to indicate which elements you are trying to modify), followed by a declaration block that contains a set of properties and those properties’ values.

Notice the use of the “style” HTML element nested in the head. “style” can be used to place CSS rules inline with an HTML document, like in the example above.

Although this is a perfectly valid way of adding CSS to your web pages, it would be better to use external CSS

If you are using a mobile phone. The Sololearn IDE already linked this so just copy and paste a CSS for your HTML code on the CSS side.

For those using VsCode IDE

In your VsCode, create another file named style.css and link to it to your HTML code like this.

CSS SELECTOR

The three basic kinds of selectors are:
1. type selectors: used to select HTML elements by element name
2. class selectors: used to select HTML elements by a specific class value
3. id selectors: used to select an HTML element associated with a specific id value

Using a type selector is as simple as typing the name of the element:

Use the code below as an example.

Using a class selector is done by placing a . followed by the name of the class value: See example:

Using an id selector is done by placing a # followed by the id value: Example below.

Let’s take another look at “type,” “class,” and “id” selectors in action to see how CSS rules are applied:

Multiple Element Selection in CSS

To select multiple elements, separate the selectors by commas, like this:

From the above picture, you will notice I selected (h1 and p) tag together and (ingredientslist and instructionslist), then I applied a single CSS. Let’s

We have come to the end of today's class; I hope you enjoyed it. See you on Wednesday

Do not forget to retweet the main tweet for others to find it and follow @SwiftspeedT for your upcoming Scholarship

Excercise: Screenshot your code and Output and quote or reply in the comment

Video summary of todays class.

It’s just one 😉, detailed, short and simple. Watch and share

You can read full details here akinolaakeem.com/introduction-t…

Oh, don’t read class thread like you’re reading every other thread or gist. Focus and read over and over again.

It’s absolutely fine to read more than 4 times if that is required to grab the information and lessons being passed.

There’s been awful lots of questions about your understanding of this class and that’s perfectly fine.

I am hosting a class on Twitter space by 6pm today. Please be there 👍 twitter.com/i/spaces/1YqGo…