CSS or Cascading Style Sheet is one of the important technologies that is used in building websites. HTML helps create the structure of your webpage, and CSS brings life to your content by adding colors, fonts, spacing, and more. Whether you are creating a simple blog or a professional website, CSS is important to make your content visually appealing. In this blog, you will learn about what CSS is, how to link CSS to HTML, adding background images using CSS, and many more things. So no matter whether you’re a beginner or experienced, this blog contains everything you need to know about CSS.
Table of Contents:
What is CSS
CSS stands for Cascading Style Sheets. It is a language that is used to style HTML elements. It is helpful in changing colors, fonts, and spacing of HTML elements in the website.
Syntax:
<!-- HTML -->
<h1>Hello, World!</h1>
<!-- CSS -->
h1 {
color: red;
font-size: 24px;
}
Here, CSS is applied to the <h1> element. This can change the color of the text to red and the font size to 24 pixels.
Why CSS?
When you create a website using HTML, it looks plain and unstyled. This is the place where CSS comes into the picture. Here are some key reasons why CSS is so important:
- CSS allows you to add colors to the text and backgrounds.
- It helps in controlling spacing, padding, and margins.
- It helps in making a website responsive for all devices.
- It allows you to write one CSS file and use it across multiple pages.
Types of CSS
Attaching CSS to HTML documents is important for adding style to a website. There are three main ways to apply CSS to HTML documents:
1. Inline CSS
In this method, you’re adding styles or CSS properties inside an HTML tag by using the style attribute. It is used for applying quick styling to the elements
Syntax:
<p style="color: red;">This is red text using inline CSS.</p>
2. Internal CSS
Internal CSS is another way of writing CSS. It uses the <style> tag for styling HTML elements. The <style> tag is placed inside the <head> section of your HTML file.
Syntax:
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Hello From Intellipaat.</p>
</body>
</html>
3. External CSS
This is the best and most commonly used method. In this method, you make a separate CSS file with a .css extension, and that file is linked to your HTML. This is mostly used for large or multi-page websites.
Syntax:
//index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This text is blue using external CSS </p>
</body>
</html>
//style.css
p {
color: blue;
}
Launch Your Web Development Career
Start Learning Now
CSS Selectors and Types of Selectors
Selectors in CSS are used to target HTML elements on which you want to apply styling. In simple words, this will help you to define the elements on which styling is applied.
Syntax:
selector {
property: value;
}
These are some important CSS selectors that are used to apply styling to elements:
1. Element Selector
Element selector targets all HTML elements of a specific type, which means if you’re applying some CSS properties to the <p> tag, then it will apply to each <p> tag present in the code.
Example:
Output:
Explanation: This will turn all paragraph text color to purple. If your code contains 10 <p> tags, then the color of all those texts changes to purple.
2. ID Selector
It targets a single or unique element using the id attribute. It always starts with the # symbol.
Example:
Output:
Explanation: In this example, you’re creating the <p> tag with an id test, and in CSS, you can use this “id” attribute to add styling to <p> elements.
3. Class Selector
Class selectors help you in targeting one or more elements with a specific class, as you cannot do using ID selectors. It starts with the . (dot)
Example:
Output:
Explanation: In this example, a <p> tag is there with the class test, and you can use this test class in CSS for applying styling on the <p> tag.
4. Universal Selector
A special kind of selector in CSS. It will help you select all the elements present on the page or present inside the <body> tag.
Syntax:
* {
margin: 0;
padding: 0;
}
5. Group Selector
It helps the developer to apply the same styling to multiple elements at once.
Syntax:
h1, h2, h3 {
color: teal;
}
Common CSS Examples
Let us look at some more easy examples of CSS. These examples will help you understand how it works and how it styles a web page:
1. Changing Text Color
You can change the color of any text in CSS by using the color property.
2. Font Weight Property
You can make your text bold using the font-weight property.
3. Changing Background Color
You can change the background color of any HTML element using the background-color property in CSS.
4. Centering Text
You can use text-align: center to horizontally center text inside its container.
5. Hover Effects
You can dynamically change styles when users hover (put the cursor on elements) over elements. It is great for showing buttons and links on a website.
6. Font Size Property
You can change the size of the text using the font-size property in CSS.
7. Flexbox in CSS
You can use flexbox to arrange different HTML elements one-dimensionally (in rows or columns). In other words, you can use Flexbox to center or align elements with ease.
Common CSS Units
For styling HTML elements, you have to put values in some units like font-size: 10px, where px (pixel) is a unit in CSS. Here are some of the units in CSS:
| Units |
Description |
| px (pixels) |
It is the most common unit in CSS. 1 pixel means one dot on the screen. |
| % (percentage) |
It is relative to the parent element size. If you write the width of the element as 50%, then i.e. 50% of the parent element’s width. |
| em |
It is relative to the font size of the parent element. 1 em is 100% of the parent font size. |
| rem |
It is similar to the em, but it is not relative to the parent. It is relative to the <html> element. |
| auto |
It tells the browser to automatically calculate the value. |
Best Practices of Using CSS
Writing CSS is not only about making things good. It is also doing it the right way. Here are some best practices that every developer needs to follow while writing code:
- It is good to put your CSS code in a separate CSS file with a .css extension. This makes your code cleaner.
- Avoid using inline styles because this makes the code harder to read.
- Use classes instead of IDs because classes are reusable.
- Start creating styles for mobile devices first, then use media queries to create styles for larger screens.
- Use tools like CSS Minifier or build tools like Webpack to reduce file size and improve loading time.
Advantages of Using CSS
CSS is one of the most important tools in web development. Here are some of the advantages of CSS:
- CSS helps you to keep the structure separate from presentation (CSS).
- By using class selectors, you can write a CSS rule once and apply it to multiple pages or elements.
- External CSS files help in improving the performance of the website.
- You can easily create layouts that fit different screen sizes using media queries in CSS.
Disadvantages of Using CSS
Here are some of the disadvantages of using a cascading style sheet (CSS) in HTML:
- Different web browsers (like Chrome, Firefox, Safari, and Microsoft Edge) may understand CSS rules differently.
- As the project grows, the number of CSS files increases, which makes difficult for developers to manage those files.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
CSS, or Cascading Style Sheet, helps in making a website visually appealing. It helps you change colors, fonts, spacing, and layouts. Instead of writing style rules in every HTML tag, you can use a class selector and apply that class to multiple elements. It makes your code neat, easy to update, and gives your website a better design. Thus, if you want to create a good-looking website, then learning CSS is a great choice for you.
Q1. What is a CSS job?
CSS is used for adding styles to the website. It helps in changing colors, fonts, and layouts, and also helps in making the website mobile-friendly.
Q2. What is CSS, and 3 types?
CSS (Cascading Style Sheets) is a language used to style HTML elements. There are 3 types of CSS – Inline, Internal, and External CSS.
Q3. What is the full form of PHP?
PHP stands for Hypertext Preprocessor
Q4. What is margin in CSS?
Margin is the space outside the border of an element. In simple words, using a margin pushes the element away from the other elements.
Q5. What is padding in CSS?
Padding is defined as the space inside an element, between its content and its border.