Introduction
When learning web development, HTML, CSS, and JavaScript are the basic building blocks. While we have many frameworks and libraries, everything ultimately resolves into these core technologies in the browser. This means that a browser can only understand HTML, CSS and JAVASCRIPT only.Therefore, to master any framework, it is crucial to have a strong understanding of these fundamentals.
In this blog, I will focus on the basics of CSS, one of the essential building blocks of web development. We will explore what CSS is, how it is used, and why it is important.
What is CSS???
CSS is an acronym for Cascading Style Sheets. We know that HTML, CSS, and JavaScript are the basic building blocks of a website. HTML acts as the skeleton of the website, defining its structure. CSS, on the other hand, is used to enhance the appearance of the website—it gives it style, color, and layout, essentially giving the website a "makeover." A website without CSS is like a bare skeleton in a laboratory.
The term cascading can be loosely described as "overriding" (though this is not entirely accurate, it works as a basic concept for now). To better understand this, let’s take an example:
Below we have a index.html file (“index” is just file name, you are free to give any name you want) ,
If you open this file, you will see a button like this,
Right-click on the browser → select Inspect → click on the mouse pointer icon and then click on a button on the website. In the Chrome DevTools, you will see a few lines of code that look like this:
This is what we call CSS, but it was not added manually. In the index.html file, we only had HTML—there was no custom CSS. However, in the above picture, you can see “user agent stylesheet.” This indicates that the CSS was added by the browser itself.It is the default CSS that browsers always apply to ensure basic styling, even if you don’t include any CSS in your file. Interestingly, these “user agent stylesheets” cannot be removed because they are added by the browser at runtime and will always be applied.
So, how can we change these styles? This is where the “C” in CSS comes into play. As I mentioned earlier, “C” stands for “Cascading,” which can be loosely described as “overriding.” The user agent stylesheet can only be overridden by custom styles you define in your own CSS.
To do this, modify the button element like this:
As highlighted in the diagram, there is a style attribute (style="background-color:aqua") added, this overides the default style added by browser, the css changes property called “background-color” (as the name itself conveys it represents the background color of the button) to a color called “aqua”, the result once you open the index.html file:
NOTE: Just like background color, there are hundreds of other CSS properties. You can learn more about these in the MDN documentation.
Now, let’s say we want to add one more button to the website with the same or differnt background color. To achieve this, we would need to copy the same code and add the style attribute again and change the value of the color accordingly . However, in a large website with multiple buttons, this approach becomes repetitive and inefficient.
Actually this is one of the method of adding css and is called "Inline CSS" , where you include the CSS styles directly as an HTML attribute, there are other methods of adding CSS as well, One advantage of inline CSS is that it has the highest priority (we will discuss CSS priority in a later section). However, if you have 5–10 buttons or more, manually adding the style attribute to each element is tedious and error-prone.
To solve this problem, you can use one of the other two methods of adding CSS:
INTERNAL CSS
In this method, you collectively add all your CSS code in one place, inside a <style> tag. The <style> tag is placed within the <head> section of your HTML document.
The above example demonstrates "Internal CSS". In this method, we target specific elements (e.g., button) and define their styles collectively using curly braces {}.
The key advantage of Internal CSS is that it is more generalized. Unlike Inline CSS, where styles are applied individually to each element, Internal CSS allows you to target all elements of the same type (e.g., all button elements) at once. This eliminates the need to repeat the same style code for each element, making the code cleaner and easier to manage.
EXTERNAL CSS
The enhanced version of "Internal CSS" is "External CSS", where you create a separate, dedicated file for your CSS code. This file is then linked to your HTML document, allowing you to centralize and reuse styles across multiple pages of your website.
With External CSS, you store all your styles in a .css file, and link it using the <link> tag inside the <head> section of your HTML document. This approach makes it easy to manage and update styles without modifying individual HTML files.
Example:
Create a new file and call it index.css (again “index” is just file name, you are free to give any name you want) and below is the content of the file,
The contents of "External CSS" are similar to "Inline CSS" in terms of styling, but instead of writing styles directly in the HTML, we store them in a separate CSS file (e.g., index.css). To use this external file, we need to make a small change in the <head> section of the HTML document by adding a <link> element.
<link rel="stylesheet" type="text/css" href="index.css">
rel="stylesheet": This specifies the relationship between the current HTML file and the linked file. In this case, it indicates that the linked file is a stylesheet.type="text/css": This defines the type of file being linked. Whiletext/cssis the default for stylesheets and can be omitted in modern browsers, including it explicitly is good practice.href="index.css": This specifies the path to the external CSS file. Thehrefattribute contains the URL or relative path to the file.
NOTE :
In most modern websites, External CSS is the preferred method for styling, as it offers significant advantages in terms of organization, efficiency, and scalability. It is highly recommended to have a separate CSS file where all styles are written. This approach not only keeps the HTML clean but also makes it easier to maintain and update styles across large websites.
CSS SELECTOR
Let us now dive a little deeper into CSS. As we know, there are many buttons on a single website, each of which may have different styles. In the external method, we used the button selector to group all the styles for buttons. But what if we want different styles for different buttons? For example, we might want a red button to indicate a "Delete" action, signaling that something will be lost, or a green button to indicate a "Submit" action, signaling that something has been successfully completed. Therefore, it is not recommended to use the button selector to style all buttons in this case, because it applies the same styles to every button, which is not desirable in most situations.
CSS Selectors
For this, we use CSS Selectors, which allow us to target specific elements and apply styles as needed. There are two main types of selectors we'll focus on here:
Class Selector
The Class Selector is used when you want to apply common styles to multiple elements that share the same purpose or behavior. For example, let’s say you have two buttons that both perform a delete action: one deletes a user’s profile, and the other deletes a post. Both buttons need to have a red color to signify their destructive function.
If you use the button tag selector, it would apply the red color to all buttons, which is not what you want. Instead, you can create a class for these buttons that will apply the red color only to the delete buttons.
Example:
In this example, we have 3 buttons we want background color to be red for delete button and green color for submit button .
We define a new attribute in html file called “class” and assign a class name to it.
In CSS file , we target a particular class by adding “.”(dot ) before the class name and add the desired style that we want.
ID SELECTOR
The name itself is self-explanatory: the "ID" selector is a unique selector, meaning only one tag in the entire document can have that specific ID. We use this selector when we want to uniquely identify an element, and it helps us apply specific styles or target that element in JavaScript.
Scenario for Using the
IDSelector:Imagine you're building a webpage that has a navigation menu and a "Back to Top" button. You want to target the "Back to Top" button uniquely, as it has a distinct function. This is a perfect case for using an
IDselector.Example:
In this example, we have back to top button , i want to uniquely identify it , so that other styles wont be reflected to this button.
We define a new attribute in html file called “id” and assign a id name to it.
In CSS file , we target a particular id by adding “#”(hash) before the id name and add the desired style that we want.
End Note:
In this article, we have covered a lot of essential concepts related to CSS. We started by understanding the different ways to add CSS, such as Inline CSS, Internal CSS, and External CSS, and why the external method is preferred for most modern websites. We also explored the use of CSS Selectors, focusing on Class Selectors and ID Selectors, with practical examples.
However, CSS is a very broad topic, and there is still so much more to learn. For example, CSS specificity, which is an important concept to understand how styles are applied when there are conflicts, was not covered here. I will be writing another blog specifically about specificity soon. Additionally, I’ll also write a detailed blog on Flexbox, which is a powerful layout system in CSS for creating responsive designs.
Conclusion
CSS is a foundational tool for creating visually appealing and functional websites. While the concepts covered here provide a solid starting point, the journey to mastering CSS involves exploring its many features and capabilities. Stay tuned for my upcoming blogs as we dive deeper into these topics!