CSS Tutorial: A Comprehensive Guide
Master CSSS with our in-depth tutorials. From beginner to advanced topics, explore essential concepts and upskill yourself.
- 23
- 4
Tutorial Playlist
23 Lessons1. CSS Tutorials
Now Reading
2. CSS Media Queries
3. CSS Selectors
4. CSS Navigation Bar
5. CSS Transition
6. CSS Text
7. How to Center a Div in CSS
8. CSS Images
9. CSS Float
10. CSS Form
11. CSS Inline Block
12. CSS Examples
13. CSS Dropdown
14. CSS Flexbox
15. Responsive Web Design
16. CSS Cheat Sheet
17. CSS Variables
18. CSS Grid Layout
19. CSS Animation
20. CSS Frameworks
21. CSS Positioning
22. CSS Comment
23. CSS Gradients
Introduction to CSS Tutorial
CSS (Cascading Style Sheets) is a fundamental part of web design since the late 1990s. This language takes a plain HTML document and transforms it into visually stunning web pages. With CSS, you can customize the font, color, size, and spacing of content. CSS not only makes your website look good but makes it function well.
As an essential component of current web development, CSS is used in some form or the other across most websites on the internet. If you are eager to create modern and unique websites, you should start with CSS for beginners and master the topic.
In this CSS tutorial, I am going to cover everything you need to know about CSS, right from the basics to advanced techniques.
CSS is the base of creative web design. It is a tool that helps you breathe life into your HTML tags and helps you make websites that are visually mesmerizing.
CSS is widely used to create web design, alongside HTML and JavaScript. You can style HTML elements easily using CSS so that your web pages look polished and function seamlessly. At the end of this CSS tutorial, you will have a good grasp of CSS concepts such as CSS properties, selectors, functions, media queries, etc.
What is CSS?
CSS is a stylesheet language that takes raw HTML elements like text, images and buttons, and transforms them into beautifully styled pages you interact with.
Let’s say you have a plain HTML document. CSS helps you add colors, adjust fonts, and arrange elements with precision. It helps turn a plain document into a captivating webpage.
What is the CSS Syntax?
CSS syntax consists of 3 components:
- Selector
- Property
- Corresponding value
selector { Property: value; }
The selector acts like a pointer, indicating which HTML element the CSS style should be applied to. The property, separated by semicolons, defines the specific aspect of the element you want to style—be it the color, size, or position. The value assigned to the property determines how that aspect should be styled.
Let's take a practical example.
Suppose you want to style the heading tags (h1) on your webpage. You start with the selector, in this case, "h1". Then, within curly braces, you need to define the properties you want to apply, such as color and font-family, followed by their respective values.
Your CSS rule will look like:
h1 {
color: green;
font-family: sans-serif;
}
In this example, each h1 element will be styled with a green color and the Sans-serif font.
This is a glimpse into the power of CSS syntax and how it can transform your web content with some code.
Using CSS: Examples
Let's use examples to understand how CSS can be used to style web pages.
CSS can be applied externally, internally, or directly within your HTML document.
1. CSS in External Style Sheet
Use an external CSS file linked to your HTML document via the <link> tag.
For example:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- Importing External CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Welcome to my website!</p>
</body>
</html>
style.css
/* Style for the <p> element */
p {
font-size: 18px;
color: #333;
text-align: center;
margin-top: 100px;
}
2. CSS Inline
You can apply styles directly to individual elements within your HTML document using inline CSS. Notice how this example uses the style attribute within the <h2> tag to apply inline CSS.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<!-- Using Inline CSS -->
<h2 style="text-align: center;">Welcome to my Website!</h2>
</body>
</html>
3. CSS Embedded in HTML
Embedded CSS offers a middle ground between external and inline styles. In this example, CSS rules are embedded within the <style> tags in the <head> section of the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
<!-- Style on h1 elements -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website!</h1>
</body>
</html>
CSS Selectors and Properties
When you understand CSS selectors and properties, you unlock the potential of styling your web content. Here, we will discuss these two important CSS topics.
CSS Selectors
These allow you to target particular elements within your HTML document. They are as follows:
Selector Type | Description | Example |
Element Selector | Targets HTML elements directly. | p selects all <p> paragraphs. |
Attribute Selector | Targets elements depending on their attributes. | [type="text"] selects all elements with type="text". |
ID Selector | Targets elements by their unique IDs. | #header selects the element with id="header". |
Class Selector | Selects elements by their class attribute. | .btn selects all elements with class="btn". |
Universal Selector | Selects every element in the document. | * selects every element. |
Pseudo-Class Selector | Targets elements based on their state or position. | When the mouse hovers over an element, it is selected using :hover. |
Pseudo-Element Selector | Allows you to modify a specific portion of an element. | ::first-line picks the first line of text within an element. |
For example:
/* Selecting all paragraphs */
p {
color: blue;
}
/* Selecting elements with class "btn" */
.btn {
background-color: yellow;
}
Common CSS Properties
CSS properties are tools used to style selected elements. Some common properties are as follows:
- color: Sets the text color.
- font-family: Defines the font family.
- font-size: Sets the font size.
- background color: Defines an element’s background color.
- margin: Sets an element’s margin space.
- padding: Defines padding space around an element's content.
- border: Sets an element’s border properties.
- width: Sets an element’s width.
- height: Sets an element’s height.
Example of using CSS properties:
/* Styling paragraphs */
p {
color: black;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f0f0f0;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
height: 100px;
}
Techniques for CSS Styling
You can transform a bare HTML document into a stunning digital masterpiece by using key techniques for CSS styling. Here’s a look at some important CSS topics to learn related to styling:
1. CSS Fonts
Fonts help shape the look and feel of a website’s text. With CSS, you can specify font families, sizes, styles, and weights to create the perfect typography.
For example:
/* Setting font family and size */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
2. CSS Colors
Colors set the mood and tone of a website. CSS enables you to choose from a variety of colors and apply them to text, backgrounds, borders, and more. This adds visual flair and personality to a web page.
For example:
/* Applying color to text */
h1 {
color: blue;
}
/* Setting background color */
body {
background-color: #f0f0f0;
}
3. CSS Backgrounds
Backgrounds add depth and richness to a website. With CSS you can create an immersive user experience by customizing the background colors, images, gradients, and animations.
For example:
/* Using background image */
.hero-section {
background-image: url('hero-image.jpg');
background-size: cover;
background-position: center;
}
4. CSS Borders
CSS allows you to customize border styles, colors, and widths, and create complex border effects.
For example:
/* Adding border to a div */
.box {
border: 2px solid black;
border-radius: 10px;
}
5. CSS Grid
CSS Grid is a powerful system that helps develop challenging, grid-based designs. CSS programming allows you to arrange content into rows and columns, enabling responsive layouts suitable for different screen sizes.
For example:
/* Creating a grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}/* Creating a grid
6. CSS Flexbox
Flexbox is a layout model that simplifies the process of building flexible and responsive layouts.
For example:
/* Creating a grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
7. CSS Images
CSS lets you style and manipulate images, control their size, position, and add effects like shadows and overlays.
For example:
/* Adding box shadow to an image */
img {
box-shadow: 0 7px 2px rgba(0, 1, 0, 0.1);
}
CSS Responsive Design and Media Queries
Responsive design allows a website to adapt seamlessly to different screen sizes, like desktops and smartphones. CSS coding language for media queries is important as it allows you to apply specific styles based on a device's screen width and orientation.
For example:
/* Media query for displays lower than 768 pixels */
@media screen and (max-width: 768px) {
/* Styles for smaller screens */
.menu {
display: none;
}
}
CSS Advanced Techniques
Some of the CSS advanced techniques with examples are given in the table below.
Technique | Description | Example |
CSS Transforms | Transform elements in 2D or 3D space. | css .box { transform: rotate(45deg); } |
CSS Transitions | Animate changes to CSS properties over time. | css .button { transition: background-color 0.3s; } |
CSS Animations | Create complex animations using keyframes. | css @keyframes slide-in { from { transform: translateX(-50%); } to { transform: translateX(0); } } |
CSS Functions | Utilize built-in functions for calculations and values. | css .container { width: calc(100% - 20px); } |
CSS Preprocessors | Extend CSS functionality with preprocessors like Sass or Less. | scss $primary-color: #3498db; .button { background-color: $primary-color; } |
CSS Conditional Rules | Apply styles based on specific conditions. | css @supports (display: grid) { .container { display: grid; } } |
Box Model and Layout | Understand CSS box model and layout techniques. | css .box { padding: 10px; margin: 20px; border: 1px solid #ccc; } |
CSS Frameworks and Libraries
CSS frameworks and libraries are important for efficiency and consistency in web design.
Notable examples of CSS frameworks include Bootstrap and Foundation, renowned for their pre-built components and responsive grid systems. While they speed up development by offering ready-made solutions, they may limit customization and introduce bloated code.
To kick start your journey with a CSS framework, ensure you check their documentation and tutorials and use built-in classes and components to expedite your projects.
Wrapping Up
This CSS tutorial for beginners and experts is useful as it covers the basics such as syntax, as well as more complicated procedures. This knowledge should allow you to build captivating and immersive web pages. Get ready to use CSS strategies and frameworks to set a higher benchmark for website development initiatives. This CSS tutorial will help you get started!
FAQs
- What is CSS?
Cascading Style Sheets (CSS) is a language that describes the look of documents written in markup languages like HTML. CSS governs the appearance of a webpage; such as the layout or style of different elements.
- Why use CSS?
CSS allows you to style and format web pages that are visually appealing and user-friendly. It allows you to use code to separate content from design.
- How do I include CSS in my HTML document?
You can include CSS in your HTML document by using the <link> tag to link an external CSS file, or by using the <style> tag to embed CSS directly within the HTML file.
- How many days will it take to learn CSS?
With consistent practice and proper resources, you can grasp the basics of CSS within a few days.
- What is the best way to learn CSS?
The best way to learn CSS is to go sign up for a good CSS course. This will give you access to learning materials and practical assessments. Gradually you can tackle advanced concepts.
- How much is a CSS full tutorial?
The CSS full tutorial is free of cost.
- How to use CSS easily?
To use CSS easily, start by understanding its syntax and basic principles. Then, practice style application to HTML elements and experiment with different properties. Go through a CSS full course to grasp concepts easily.
mukesh
Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.
Talk to Career Expert
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...