For working professionals
For fresh graduates
Study abroad
More

Introduction to CSS Tutorial

Updated on 30/01/2025799 Views

Table of Content

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.