CSS101 - Introduction to CSS

Hello Senior Devs!

This is Henry Uzor, and it is my pleasant delight to bring you my weekly newsletter once again on Frontend Development. I recently concluded the HTML module with the last edition of the newsletter and starting this week, the newsletter will be commencing a new module, the CSS module. And what better way to kickstart the module, than with the Introduction to CSS?

As you are aware, the HTML module was completed with the last edition of this newsletter. The module has 14 editions and in those 14 editions, we got to learn about a whole lot of things there is to learn on HTML. We covered topics like HTML Elements, Page Structure, and Classifications of HTML Elements where we categorized HTML elements into inline and block elements. We also got to learn about how to embed HTML multimedia content such as images, audio, and videos into a webpage. We spent about 2 editions on HTML Tables alone, and then we went on to learn about Lists, Layout Elements & Techniques, and Semantic Elements and then we concluded the module by learning about HTML Forms.

But as we must have observed, becoming a Frontend Developer doesn’t stop at learning only HTML. Though it is very important to understand how contents are embedded in a webpage using HTML, there just must be more to it. How do we add life, colour, style, and beautification to whatever content we have added to the webpage? That, my friends, is where CSS comes in!

If this is your first time reading my article and you don’t really have a full understanding of what HTML is all about, I’d suggest you take the time to learn about it, or you can read my previous 14 articles on the subject. I took time to simplify the concept, providing comprehensive lessons and I did this using practical examples. Learning HTML is very important for you if you want to really understand this new module on CSS, so I suggest you go check it out, otherwise, you’d pretty much be wasting your time trying to learn this one. Below is a link to my very first article and you can take it up from there. Trust me, you will appreciate it:

If you recall, when we were learning HTML, there were a few times when I had to make use of CSS to add more visual meaning to our content, a very good example is the very last edition of the HTML module where we learnt about HTML forms. Now we need to understand what CSS all is about, and how to use it to add style to our web pages.

INTRODUCTION

CSS is short for Cascading Style Sheet, and it is a styling language used to define the appearance and layout of HTML documents on a screen. Like HTML, it is not a programming language, but it does allow you to control various aspects of web pages, such as colours, fonts, spacing, positioning, and more. CSS works by selecting HTML elements and applying specific styles to them.

So how does a typical CSS code look? Have a look at the anatomy of a CSS ruleset below:

This picture is labelled and from the picture, you will observe that the CSS syntax basically comes in two halves – the “selector” half and the “declaration” half.

• CSS Selector: This is used to select or target HTML elements for styling. They allow you to specify which elements in the HTML document should be affected by the CSS rule you define. Elements can be targeted based on their element name as we have in the picture above. That syntax is targeting the <p> element in the document. Elements can also be targeted based on their identification attributes such as their “class name” or “id”. When targeting an element using the element’s “class” attribute, you will need to precede the selector with a period or dot(.) character. But if you’re targeting an element with its “id” attribute, you’ll need to precede the selector with the pound sign(#) character.
• CSS Declaration: This consists of a “property” and a “value”. It is used to define the styling rules for the selected elements. In the labelled syntax above, the <p> elements in the document are selected, and the text colour is then set to “red”. There are a few things to notice though, with the CSS Declaration, and these things are vital if you want the ruleset to work. One thing to notice is that the declaration is enclosed in curly braces – { }. You can write as many property–value pairs within a block of curly braces as possible or as needed. But each pair must be separated by a colon (:) and must end with a semi-colon (;). Let’s see another example to demonstrate this:

From this example, the element with the class name “container” is selected for styling, and five styling ruleset is written for it. All five declarations have the property–value pair, each separated by a colon (:) and ending with a semi-colon (;).

It is important to note that the entire ruleset can be written on a single line and the code will still work, provided it is written properly, just like this below:

However, for the sake of your sanity and that of every other developer you might be working with on the project, I would advise against this, for various reasons. You see, when you write the entire declaration on a single line, if there is an error in the code, it can become very difficult to detect the error, especially if the number of declarations is a whole lot more than just five rules. Besides, you don’t want to have to be scrolling your code horizontally just to see the rest of it, that doesn’t really make a lot of sense now, does it? And lastly, just look at the two snippets, you can’t help but agree that the previous one where the declarations are written on different lines, certainly looks better and well arranged to the eye, than the latter.

The CSS Universal Selector (*)

The CSS Universal Selector (*) is used to select all elements in an HTML document. It matches every single element type in the HTML document and applies the written ruleset to all of them. The universal selector is often used to apply global styles or to reset default styles for all elements in the HTML. Here is what it looks like using the CSS Universal Selector:

In this example, the universal selector is used to select all elements in the HTML document, and the declaration within the ruleset block set the margin, padding, and box-sizing properties to specific values. While the universal selector has this behaviour of selecting every single element in the HTML document as a group and styling all of them together, you can also select different elements and style them with one ruleset in a practice that is called “CSS Selectors Grouping”.

Let me try and make this more understandable. Take for instance the following piece of code:

As you can see from the code, the <h1> element, another element with “id” attribute – “para1”, and all elements with the “class” name – “center”, all have the same styling ruleset. So, it will only be optimally better, or it will only make more logical sense to group these selectors and write the same declaration to style them. Just like this:

Looks better and simpler, doesn’t it? Sure, it does! Grouping CSS Selectors helps to minimize your code, and when doing this, ensure to separate each selector with a comma (,).

There is something else I’d just like to touch on before we move on, and that is - how to select elements that are nested in varying kinds of ways.

1. Separated by a single space – element1 element2 { ruleset . . . }:- this is written to select all “element2” nested inside all “element1”, regardless of how deep the nesting goes. This syntax is known as the “descendant combinator” in CSS and it is basically used to apply CSS rules to specific elements that are descendants of another element.
2. Separated by the greater-than sign (>) – element1 > element2 { ruleset . . . }:- this is written to select all “element2” having “element1” as a direct parent. This syntax is known as the “child combinator” in CSS and it is used to target only the immediate children of an element and does not go deeper in the nested structure.
3. Separated by the plus sign (+) – element1 + element2 { ruleset . . . }:- this is written to select any “element2” that is written exactly after an “element1”. This syntax is known as the “adjacent sibling combinator” in CSS and it is used to target specific that immediately follows another specific element.

Other categories of CSS Selectors are:

• Pseudo-class Selectors: this is used to select elements based on certain states or conditions. Examples are “:hover”, “:last-child”, “:first-child”, etc. Do you want to see these in action? No problem!

In this example, the “:hover”pseudo-class is used to change the background-color and font-size of the <button> element when it is hovered over with the mouse cursor. The “:first-child” pseudo-class is used to change the text color and decoration of all <p> elements that are the first child of any element. And the “:last-child” pseudo-class is used to change the text alignment and color of all <li> elements that are the last child inside the element they exist in.

There is so much to learn about “CSS Pseudo-classes” that I can not really cover it all. But you can definitely read all about it on the following link:

• Pseudo-elements Selectors: this is used to select and style a specified part of an element. In other words, it can be used to style the first letter, or line, of an element. And it can also be used to insert content before, or after, the content of an element. You can read all about it here:

• Attribute Selectors: this is used to select elements based on an attribute or attribute value, attributes that are different from the “class” or “id” attributes. You can also read all about this right here:

And that’s a wrap, Folks! There you have it for this week! I hope you had fun. I always do!

Next week, we will be looking at how we can add or link CSS to our HTML code.

?

Feel free to drop your comments in the comments section and share this Newsletter with anyone you know that might be interested in learning about Frontend Development. If you have any questions that you’d like to ask on any of the subjects I’ve discussed so far or anything at all that has to do with Frontend Development, I am just a DM away.

Today is Friday, so TGIF and I hope you had a great week. Until I come your way again next week, have a blessed and productive weekend. See you in a bit!

#FrontendDeveloper #CSS #Developer #SoftwareEngineer #YoungEngineer #YEFoN #NSE #Leadership #Service #Development