Here I'm back with the next topic in my Web Development Intro series, where I introduce to you the fundamentals of web development; and clarify some of the core concepts that ain't easy enough for beginners to grasp.
So in this article, we're going to learn about CSS, which stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML. Basically, it describes the styling properties of elements inside a document.
Think of a web page like a room in your house. If you never painted the walls, windows and doors of that room, you would find it to be too boring to sit in. However, if you paint and decorate the room, the same room will attract you much more than before. This is true for web pages too. A web page without CSS is too boring (or even hard) to be able to convey information to the reader. And it's not just about colors; it also defines the layouts, positions, transitions, animations, and much more.
The Way CSS Works
The name Cascading Style Sheets alone describes itself really well. The styles here are applied from top to bottom in the order they are defined, just like a cascading waterfall. Any repeated style would override its previous corresponding values, as in the following example.
button {
color: white;
}
/* The the style below will override the value 'white' for property 'color' */
button {
color: black;
}
These styles come from different origins, also known as stylesheets. There're mainly two types of stylesheets that are applied to a web page- User Agent Stylesheets and Author Stylesheets. Let's discuss them individually:
- User Agent Stylesheets - These stylesheets are applied by the browsers to give default styles to a document. The styles often differ slightly across different browsers. For example, the button below has no custom styles, and uses the default styles from user agent stylesheets used by your current browser.
Try opening this page in a different browser, and you would see this button with slightly different styles.
- Author Stylesheets - These are the stylesheets that are used by web developers to apply custom styles to a document. The author stylesheets have higher preference over user agent stylesheets. For example, the following button uses the custom styles that I provided, which overrode the styles from user agent stylesheet.
How Do We Actually Use CSS In A Web Page?
We have 3 ways to use CSS in a web page. Let's take a look at each of them:
-
Internal CSS - We can declare the styles using the
<style>tag anywhere inside the HTML document but the thing to note is that these styles are not applied to elements that come before the<style>tag because those elements will get parsed before this tag while rendering the web page. For this reason, this tag is often declared before any other element inside the body.
<body>
<style>
button {
color: black;
}
</style>
</body>
-
Inline CSS - We can also declare style for an element by providing the
styleattribute to it. Inline styles have the highest preference over any other styles. We'll actually discuss about something known as specificity in the next article. Here's an example of inline style:
<body style="background-color: aliceblue;">
Hi! I'm a button
</body>
-
External CSS - The last and most efficient way to declare CSS in large projects is using external .css files. We declare the styles in different .css files, and link them in the HTML document using
linktag. Below is an example:
/* index.css */
body {
background-color: aliceblue;
}
<!-- index.html -->
<head>
<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
The text between
/and/is called a comment in css. The same goes for<!--and-->in html. A comment is made just for the reader to understand the code better, and it is ignored by the compiler. Here're some of the best practices that you should adopt while writing comments in any language.
Elements of Style Declaration
So, now that we can link our stylesheets to HTML document, it's time to know how to actually write these stylesheets. Any style declaration consists of 2 parts- selector(s) and property-value pairs. Each pair of property and value must be separated by a semicolon at the end of the line. You've already seen property-value pairs; hence, I want you to focus on just the
selectors for now.
Selectors
In order to apply any styles to an HTML element, we need to use a selector that would select the target element. A selector is kind of an identifier that tells the browser what HTML element are the styles for. The simplest type of selector is the type selector, i.e., the name of the element itself. We can, in fact, use a list of selectors if we want to declare the same styles for multiple elements.
An example could be-
/* The font-size will 16px for each of button, a, input and small elements */
button, a, input, small {
font-size: 16px;
}
Classes And IDs
Then we have class and id selectors. If you're unfamiliar with class and id attributes in HTML- the values given to class and id attributes provide us a way to identify an HTML element when making a JavaScript query, or specifying CSS styles for that element.
The only major difference between
classandidattributes is that an id is unique to an element, whereas multiple classes can be assigned to multiple elements; you can think of it as a many-to-many relationship. 😅 For more details, you can read this article by css-tricks.
In most cases, using class selectors is preferred than using id selectors for a reason that we would discuss in the next article. A class selector must begin with a . character; for example-
/* This style would be applied to any elements that have the `txt` class assigned to them. */
.txt {
color: red;
text-align: center;
}
An id selector must begin with a # character; for example-
/* This style would be applied the element that has the `btn` id assigned to it. */
#btn {
color: red;
text-align: center;
}
Attribute Selectors And Combinators
Now come the attribute selectors, which basically select the elements that have the specified attributes in their HTML. HTML attributes can be in the form key="value" or just key depending on the type of attribute. For example:
/* this style will apply to anchors pointing to "https://developer.mozilla.org" */
a[href="https://developer.mozilla.org"] {
text-decoration: underline;
}
/* this style will apply to only those buttons that have the `btn` class and have the `disabled` attribute. */
.btn[disabled] {
background-color: grey;
}
Next, we have combinators, which are used to target specific elements based on their relationship to the surrounding elements. Take a look at the following snippet:
/* 1. Descendant Combinator */
body p {}
/* 2. Child Combinator */
body > p {}
/* 3. Adjacent Sibling Combinator */
h1 + p {}
/* 4. General Sibling Combinator */
h1 ~ p {}
These are the only four combinators available in CSS. Here's what each of the selectors are supposed to do in the snippet above:
-
Descendant Combinator - selects the any
pelement found inside thebodyelement. -
Child Combinator - selects only those
pelements that are direct children ofbody. It doesn't select any other descendantpelements in the heirarchy. -
Adjacent Sibling Combinator - selects a
pelement that is a sibling ofh1element, and comes right next to it, i.e., is an adjacent sibling. -
General Sibling Combinator - selects any
pelement that is a sibling of anh1; it doesn't matter if it's adjacent toh1, or not.
Wrapping Up
Alright, so we now know how CSS works, how we can use stylesheets in HTML, and the type of selectors that we have in CSS. In the next article, we will learn some of the advanced concepts that newcomers struggle with a lot. If you enjoyed reading this article, be sure to follow me so you never miss any of my future posts! And you can also check me out on Twitter, Github and LinkedIn.
See you in the next one! 😉
Top comments (0)