Introduction to CSS [Cascading Style Sheets]
"CSS' journey begins with Selectors"
![Introduction to CSS [Cascading Style Sheets]](https://cdn.hashnode.com/res/hashnode/image/upload/v1671125890540/MKW1G8OAj.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
In my previous articles, I talked about What is Html? and Some Html tags (Here is a link to the articles:- Video & Audio tags and Form-Input elements).
Now we will start CSS to make our more attractive. In CSS, first, we will see how to attach CSS to our Html codes, and then we will learn about CSS Selectors.
At the end of this article, you can find links to the GitHub repository where you can find code files and websites.
Why CSS?
Well! let's understand this with a simple analogy of a Car. As we know every car is made of Chassis, body, and engine. Similarly, in web development, Html plays the role of chassis (structure of website), and CSS is Like the car body which gives the website an aesthetic look. Javascript is an engine for websites.
CSS stands for Cascading Style Sheets, it's a language used to make elegant web pages. Styling is a significant property for any web page. It enhances the overall look of the website that makes it presentable and easier for the user to interact with it.
CSS is a powerful tool that web developers use to add style and visual appeal to HTML documents. It allows developers to define styles for various HTML elements, such as font types, sizes, colors, borders, and backgrounds.
There are three types of CSS which are given below:
1. Inline: Inline CSS contains the CSS property in the body section of Html attached to the Html element known as inline CSS.
<P
style="color: #42f135 ;
background-color: #000000 ;
text-align: center;" > Inline CSS
</P>
Output:
Let's see Internal & External CSS with a basic example
2. Internal or Embedded: The CSS <style> element should be within the Html file in the head section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selector</title>
<style>
body {
text-align: center;
background-color: chartreuse;
}
h1 {
color: rgb(211, 18, 112);
}
</style>
</head>
<body>
<h1>Why CSS?</h1>
<p>Styling is a significant property for any web page. CSS enhances the overall look of the website that makes it presentable and easier for the user to interact with it. </p>
</body>
</html>
3. External: External CSS contains a separate CSS file that contains only <style> properties with the help of tag attributes.
In Html <head> section, the CSS file is attached with the help of <link> the tag: <link rel="stylesheet" href="style.css">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selector</title>
<link rel="stylesheet" href="separate.css">
</head>
<body>
<h1>Why CSS?</h1>
<p>Styling is a significant property for any web page. CSS enhances the overall look of the website that makes it
presentable and easier for the user to interact with it. </p>
</body>
</html>
Separate CSS file with name (separate.css) :
body {
text-align: center;
background-color: chartreuse;
}
h1 {
color: rgb(211, 18, 112);
}
Both Internal & External CSS ways have the Same Output: Have a look at the Screenshot
If you are planning to start with CSS then this question probably came into your mind "Where to begin with?" I would highly recommend that you must be learning Selectors first.
What is Selector?
A CSS selector is a pattern of elements that are used to tell the browser which HTML element should pick for styling purposes. It selects the Html element according to its Id, class, type, attributes, etc. CSS provides several ways to do this. Let's see...
Basic different types of selectors:
1. Universal Selector:
This selector is used to select all the Html elements including both parent and child elements. CSS rule will be applied to every HTML element on the page: It's can be addressed by an asterisk (*) as shown:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
* {
background-color: aqua;
color: brown;
}
</Style>
</head>
<body>
<H1>Universal Selector</H1>
<P>This selector is used to select all the Html elements</P>
</body>
</html>
Output:
2. Individual Selector:
This element selector selects Html elements based on the tag such as p, h1, div, span, etc. And the CSS rules applied to all same tag that has been selected. For example, if decide to render the paragraphs it will render all the paragraph tags on the website as shown in the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
h1 {
color: red;
font-size: 3rem;
}
p {
color: white;
background-color: gray;
}
</Style>
</head>
<body>
<h1> Individual Selector</h1>
<p>This element selector selects Html elements</p>
<div> based on the tag such as p, h1, div, span, etc.</div>
<p> And the CSS rules applied to all same tag that has been selected </p>
</body>
</html>
Output:
As we can see from the above example both paragraph tags got rendered. But sometimes we don't want to have the same styling for all Paragraphs or headings instead we want to select only desired element (for example first heading only) so we can't do it with an individual selector pattern. But there is one selector who can select a particular tag. Let me introduce you to Class and Id Selector.
3. Class and Id Selector:
Class-selector: The class selector selects HTML elements with a specific class attribute. In CSS, to use this selector you must use dot ( . ) followed by the class name.
Id selector: The Id selector will pick the Html element that has a unique Id attribute. We use # (hash) followed by the Id name to use the Id selector in the CSS.
Note: An id of the element is unique on a page to use the id selector.
The following code is the illustration of the Class and Id Selector:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
#heading {
color: rgb(232, 244, 7);
font-size: 3rem;
background-color: burlywood;
text-align: center;
}
.Class-selector {
color: rgb(223, 17, 17);
background-color: rgb(252, 164, 164);
}
#Id-selector {
text-align: center;
color: chartreuse;
background-color: rgb(5, 131, 47);
}
</Style>
</head>
<body>
<h1 id="heading">Class and Id Selector</h1>
<p class="Class-selector">The class selector selects HTML elements with a specific class attribute.</p>
<p id="Id-selector">The Id selector will pick the Html element that has a unique Id attribute.</p>
</body>
</html>
Output:
I hope you get a clear idea about the Class and Id Selector from the above example let's move to the next type of selector.
4. Chained Selector:
A chained selector is also known as an And selector. It allows us to select the elements with more than one class attribute.
Let's take an example where we make a list of 4 products and give common class attributes class="Main" to each one and among those four we are also provided the first product with another class class="Main important" because we need to highlight it from the other three. Now refer to the code and output below for a better understanding.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
.Main {
color: brown;
}
.Main.important {
font-size: x-large;
background-color: aqua;
}
h1 {
text-align: center;
color: chartreuse;
background-color: brown;
}
</Style>
</head>
<body>
<h1>Chained Selector:</h1>
<ol>
<b> List of product</b>
<li class="Main important">Laptop</li>
<li class="Main">Keyboard</li>
<li class="Main">mouse</li>
<li class="Main">printer</li>
</ol>
</body>
</html>
Output:
As you can see here we gave the same style to all four products using a common class attribute and an additional style to only the first one.
5. Combined Selector:
It's also known as Group-selector. This selector is used to style more than one element at once. Suppose you want to apply common styles to the different selectors then you don't need to write the CSS rules separately instead you can write them in groups using commas ( , ) in between, as shown in the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
h1,
h3,
p,
.CSS {
text-align: center;
color: chartreuse;
background-color: brown;
}
</Style>
</head>
<body>
<h1>Combined Selector</h1>
<h3>It's also known as Group-selector.</h3>
<p>This selector is used to style more than one element at once. </p>
<div class="CSS">you can write them in groups using commas ( , ) in between.</div>
</ol>
</body>
</html>
Output:
6. Inside an element Selector:
It is also known as a descendant Selector. It is used to select all child elements inside the element (not a specific element) i.e. it combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Have a look at the code & its output then you will get clarity.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
div li {
color: chartreuse;
background-color: brown;
list-style-type: circle;
}
</Style>
</head>
<body>
<h1 style="color: green; text-align: center;">
Inside an element Selector:
</h1>
<h4 style="text-align:center;">In this example two Combined selectors <b>div</b> and <b>li</b> we are taking.</h4>
<div>
<ol>
<h3>List No. 1</h3>
<p>Below List will be getting selected as its elements are matching with 2nd selector ( li ) and its
ancestor element matches with the first selector ( div ). </p>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
</div>
<hr>
<ul>
<h3> List No. 2 </h3>
<p>Below list will not be getting selected as its ancestor element doesn't match with the first selector ( div ).</p>
<li>item2</li>
<li>item2</li>
<li>item3</li>
</ul>
<hr>
</body>
</html>
Output:
7. Direct Child Selector:
This selector is used to match all the children elements of the specified elements. Unlikely descendant Selector, it will only select direct child elements. Using sign ( > ) we can define the parent and child elements. The operand on the left side of > is the parent and the operand on the right is the children element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
div>p {
color: white;
background: green;
font-size: x-large;
}
</Style>
</head>
<body style="text-align: center;">
<h1>
Direct Child Selector</h1>
<div>
<p>
This paragraph will be styled
</p>
<p>
This paragraph will too.
</p>
</div>
<hr>
<p>But this paragraph will not be styled because it's not the child of parent element ( div ).</p>
<hr>
</body>
</html>
Output:
8. Adjacent Sibling Selector ( + ):
This selector selects and applies CSS rules only to the elements that are adjacent to specified elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
.sibling+li {
color: white;
background-color: green;
list-style: disc;
}
em+i {
color: rgb(81, 26, 134);
background-color: rgb(203, 161, 243);
}
</Style>
</head>
<body style="text-align: center;">
<h1>Adjacent Sibling Selector:</h1>
<ul><b>First example</b>
<hr>
<li class="sibling">Next item will be styled</li>
<li>Styled Item </li>
<li>Item with no effect</li>
<hr>
</ul>
<b>Second example</b>
<br>
<em>Adjacent sibling sentence will be styled.</em>
<i>This line will be highlighted.</i>
<i>This line will not be affected by selector.</i>
<hr>
</body>
</html>
Output:
9. General Sibling Selector (~):
A general sibling selector is similar to an Adjacent sibling selector but it will select all elements that are siblings to a specified element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selctor types</title>
<Style>
.sibling~li {
color: rgb(238, 18, 194);
list-style: disc;
}
</Style>
</head>
<body style="text-align: center;">
<h1>General Sibling Selector:</h1>
<ul><b class="sibling">List of items</b>
<hr>
<li>Item 1</li>
<li>Item 2 </li>
<li>Item 3</li>
<p>This will not get selected. Because it's diff element. </p>
<hr>
</ul>
</body>
</html>
Output:
So far we have covered all selectors with examples. Now let's see what pseudo-elements are.
Pseudo-elements:
A Pseudo element in CSS is used to define the particular state of an element. Based on their states they can be combined with a CSS selector that lets you style a specific part of the selected elements.
There are many Pseudo-elements in CSS. But we will see the most commonly used two Pseudo-elements;
1. ::before Pseudo-element
It will create a pseudo-element before the selected element. It's generally used to attach some additional content to an element with content property.
2. ::after Pseudo-element
As the name suggests, it will create a pseudo-element after the selected element and work like ::before Pseudo-element.
Both Pseudo-elements are inline by default
Refer to the following code. It will help you to comprehend both Pseudo-elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo-elements</title>
<style>
body {
text-align: center;
}
h1,
h3 {
color: orange;
}
/* ::before Pseudo-element */
.before::before {
content: '"';
color: green;
font-size: 30px;
}
/* ::after Pseudo-element */
.after::after {
content: '"';
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Pseudo-elements</h1>
<h3>::before Pseudo-element</h3>
<i class="before">We used Pseudo-element ( ::before ) to add Quotation marks before this line in green color.</i>
<hr>
<h3>::after Pseudo-element</h3>
<i class="after">We used Pseudo-element ( ::after ) to add Quotation marks after this line in green color.</i>
<hr>
</body>
</html>
Output:
Conclusion:
In this article, we've covered the basics of CSS and its usage in web design. By now, you should have a solid understanding of how CSS works and how to use it to style your web pages. And we've also discussed the different types of selectors in CSS, including element selectors, class selectors, ID selectors, attribute selectors, and pseudo-class selectors. Each selector has a specific syntax and is used to target and apply styles to different HTML elements.
By understanding the different types of selectors in CSS, developers can create responsive and visually appealing web pages that are optimized for a range of devices and user preferences. CSS is an essential skill for any web developer looking to create professional and user-friendly websites.
If you want to expand your knowledge of CSS, I recommend checking out my articles on the following topic:
These articles will provide you with the necessary knowledge to create complex and responsive designs for your web pages. So keep learning and experimenting with CSS to take your web design skills to the next level!
Congratulations to you for coming this far! 🎉🎉
Here is link to code files including there hosted websites.
- Code files:- ( GitHub )
Please comment, If you find it helpful. Thankyou😇😇