Software Training Institute in Chennai with 100% Placements – SLA Institute

Easy way to IT Job

Share on your Social Media

CSS Tutorial for Beginners

Published On: August 9, 2025

Ever wonder how sites are converted from text to beautiful visual masterpieces? Do you get frustrated with getting web pages to look decent, spending hours adjusting things just to have little effect? CSS scares a lot of new users, and it feels like they are drowning in an ocean of selectors and properties. 

This CSS tutorial for beginners is here to make CSS understandable, changing your coding frustrations into artistic victories. We’ll walk you through step-by-step so cascading style sheets in HTML will be a piece of cake! Want to create stunning web experiences? Get all the details in our thorough CSS Course Syllabus.

CSS Tutorial: Zero to Styling Hero!

  • CSS, or Cascading Style Sheets, is the language we employ to design an HTML document. 
  • It guides how HTML elements must appear on screen, paper, or other media. 
  • Imaginise HTML to be the structure of your webpage, and CSS to be clothing, makeup, and accessories that dress it up. 
  • The “cascading” refers to how styles inherit from parent elements, and rules are cascaded based on an order of precedence. 
  • That’s the cascading style sheets meaning in brief.

Why is CSS So Important?

  • Separation of Concerns: It makes your code clearer, easier to manage, and more structured by keeping your presentation (CSS) and content (HTML) distinct.
  • Efficiency: You can save a ton of time and work by defining styles only once and applying them to many HTML elements or even the entire website.
  • Consistency: It improves user experience by guaranteeing a consistent appearance and feel throughout your website.
  • Responsiveness: CSS is essential for using responsive design strategies to make websites adjust and display beautifully on a range of devices, including PCs, tablets, and smartphones.

Recommended: HTML Online Course.

The Basics: A Beginner’s Guide to CSS

To use CSS on your HTML, you have three primary options:

Inline CSS: 

Placing styles directly on an HTML element with the style attribute.

When to use: Suitable for rapid, one-off styles, but usually avoided in bigger projects since it confuses content and presentation.

<p style=”color: blue; font-size: 16px;”>This text is blue and 16px.</p>

Pros:

  • Applying a distinctive style to a single piece is quick and simple.
  • It is helpful for evaluating specific style attributes.

Cons:

  • Not advised for extensive projects: Because it blends presentation and content, HTML becomes crowded and challenging to maintain.
  • Poor reusability: To make every element look the same, you would need to copy and paste the same style.
Internal CSS: 

Putting CSS rules inside a <style> tag in the <head> section of your HTML.

When to use: Good for applications that are only one page long or when you have styles that are unique to a single HTML document.

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Example</title>

<style>

  p {

    color: green;

    font-family: Arial, sans-serif;

  }

</style>

</head>

<body>

  <p>This text is green and uses Arial font.</p>

</body>

</html>

Pros:

  • Excellent for individual HTML pages with styles that are exclusive to that page.
  • It keeps HTML and CSS in a single file, which is useful for tiny, independent applications.

Cons:

  • It does not permit using a single CSS source to style many pages.
  • It can still result in a lengthy HTML file if you have several styles.
External CSS: 

It is connecting an external CSS file to your HTML document is known as external CSS. This approach is the most suggested for combining real-world tasks with blended learning in CSS.

  • When to use it: For the majority of projects, since it keeps your HTML tidy and encourages reusability and maintainability.

HTML:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>External CSS Example</title>

    <link rel=”stylesheet” href=”styles.css”>

</head>

<body>

    <header>

        <h1>My Awesome Website</h1>

    </header>

    <nav>

        <ul>

            <li><a href=”#”>Home</a></li>

            <li><a href=”#”>About</a></li>

            <li><a href=”#”>Contact</a></li>

        </ul>

    </nav>

    <main>

        <p>This content is styled by our external stylesheet. Imagine how easy it is to update the look of your entire website just by changing one file!</p>

        <p class=”highlight”>This paragraph has a special highlight class.</p>

    </main>

    <footer>

        <p>&copy; 2025 My Website</p>

    </footer>

</body>

</html>

CSS:

/* Basic styles for the whole page */

body {

    font-family: ‘Open Sans’, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #e9ecef;

    color: #495057;

}

/* Header styling */

header {

    background-color: #343a40;

    color: white;

    padding: 20px;

    text-align: center;

}

h1 {

    margin: 0;

    font-size: 2.5em;

}

/* Navigation styling */

nav {

    background-color: #495057;

    padding: 10px 0;

    text-align: center;

}

nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

nav ul li {

    display: inline-block;

    margin: 0 15px;

}

nav ul li a {

    color: white;

    text-decoration: none;

    font-weight: bold;

    transition: color 0.3s ease; /* Smooth hover effect */

}

nav ul li a:hover {

    color: #007bff;

}

/* Main content styling */

main {

    padding: 20px;

    max-width: 960px;

    margin: 20px auto;

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

p {

    font-size: 1.1em;

    line-height: 1.7;

    margin-bottom: 1em;

}

.highlight {

    background-color: #fff3cd;

    color: #856404;

    padding: 5px 10px;

    border-radius: 4px;

    font-weight: bold;

}

/* Footer styling */

footer {

    text-align: center;

    padding: 20px;

    background-color: #343a40;

    color: white;

    margin-top: 30px;

}

Pros:

  • Clean Code: Makes it easier to comprehend and manage by keeping HTML and CSS entirely apart.
  • Reusability: To ensure uniformity throughout a website, a single CSS file can style hundreds or even thousands of HTML pages.
  • Faster Loading (after the first visit): The browser caches the CSS file once it has been downloaded once, which speeds up subsequent page loads.
  • Cooperation: There are no disputes when several developers work on HTML and CSS files at once.

Explore: Web Designing Online Course.

Core CSS Concepts

After linking your CSS, it’s time to explore the fundamental ideas:

Selectors: The HTML elements you wish to style are chosen using selectors, which are patterns.

  • element selector: All instances of an HTML element (such as p and h1) are targeted by the element selector.

p {

    color: darkslategray;

    font-family: Georgia, serif;

}

/* This styles ALL <p> tags *

  • class selector: A class selector focuses on components that have a particular class attribute, like.my-class.

HTML

<h2 class=”section-title”>Our Services</h2>

<p class=”section-text”>Detailed explanation of services.</p>

<p class=”section-text”>Another paragraph with the same style.</p>

CSS

.section-title {

    color: #1a1a1a;

    font-size: 2em;

    text-transform: uppercase;

}

.section-text {

    color: #555;

    font-size: 1.1em;

}

  • id selector: A unique element with a particular id property (such as #my-id) is targeted by an id selector.

HTML

<div id=”main-header”>Welcome!</div>

CSS

#main-header {

    background-color: #f8f9fa;

    padding: 30px;

    text-align: center;

    border-bottom: 5px solid #007bff;

}

  • Universal Selector (*): All HTML components on the page are selected using the Universal Selector (*). It can affect performance and override other styles, so use it carefully.

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box; /* A common and very useful reset rule */

}

  • Attribute Selector: It selects elements with a particular attribute or attribute value.

a[target=”_blank”] { /* Selects all <a> tags with target=”_blank” */

    color: orange;

    text-decoration: none;

}

input[type=”text”] { /* Selects all text input fields */

    border: 1px solid #ccc;

    padding: 8px;

}

  • Descendant Selector: It selects an element that is a descendant of another element (e.g., ul li selects <li> elements inside <ul> elements).

ul li { /* Styles all list items inside any unordered list */

    list-style-type: square;

    color: #333;

}

  • Child Selector (>): It selects an element that is a direct child of another element.

div > p { /* Styles only <p> elements that are direct children of a <div> */

    font-weight: bold;

}

  • Adjacent Sibling Selector (+): It selects an element that is immediately preceded by a particular element.

h2 + p { /* Styles a <p> element immediately following an <h2> */

    margin-top: 0;

    font-style: italic;

}

  • General Sibling Selector (~): It selects all elements that are siblings of a specified element.

h2 ~ p { /* Styles all <p> elements that are siblings of an <h2> (not necessarily immediate) */

    text-indent: 20px;

}

  • Pseudo-classes (:): It selects elements based on their state or position.
    • :hover: When the mouse pointer is over an element.
    • :active: When an element is clicked.
    • :focus: When an element receives focus (e.g., input field).
    • :first-child, :last-child: The first/last child of its parent.
    • :nth-child(n): The nth child of its parent.

a:hover {

    color: #0056b3;

    text-decoration: underline;

}

input:focus {

    border-color: #007bff;

    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

}

li:first-child {

    font-weight: bold;

}

li:nth-child(odd) {

    background-color: #f9f9f9;

}

  • Pseudo-elements (::): A particular portion of an element is styled by pseudo-elements (::).
    • ::before: Places content before an element’s content.
    • ::after: Adds content after an element’s content.
    • ::first-line: Styles a block-level element’s first line.
    • ::first-letter: Styles a block-level element’s initial letter.

p::first-letter {

    font-size: 2em;

    color: #dc3545;

}

h2::after {

    content: ” ✨”;

}

  • Properties: Properties are the specific characteristics you want to change (e.g., color, font-size, margin).
  • Values: These are the settings or measurements for those properties (e.g., red, 16px, 20px).

A colon (:) separates each property and value that make up a CSS rule.

Examples: color: red;, font-size: 18px;, margin-top: 20px;

property: value;

Example:

p {

  /* styles for all paragraphs */

}

.highlight {

  /* styles for elements with class=”highlight” */

}

#main-title {

  /* styles for the element with id=”main-title” */

}

Suggested Upskill: JavaScript Online Course.

Essential CSS Properties: Your Styling Toolkit 

Let’s explore some of the most commonly used CSS properties that will enable you to control virtually every aspect of your web page’s appearance.

Text and Font Styling

color: It is used to set the text color.

p {

    color: #333; /* Hexadecimal value */

}

h1 {

    color: rgb(255, 0, 0); /* RGB value */

}

.accent-text {

    color: blue; /* Named color */

}

font-family: It specifies the font for an element. Always provide fallback fonts!

body {

    font-family: Arial, Helvetica, sans-serif;

}

h2 {

    font-family: ‘Times New Roman’, Times, serif;

}

font-size: It sets the size of the text.

p {

    font-size: 16px; /* Pixels */

}

h1 {

    font-size: 2em; /* Em (relative to parent’s font-size) */

}

.small-text {

    font-size: 0.8rem; /* Rem (relative to root font-size) */

}

font-weight: It sets how thick or thin characters in text should be displayed.

strong {

    font-weight: bold;

}

.light-text {

    font-weight: 300; /* Numeric values from 100 to 900 */

}

text-align: It aligns the text within an element.

h1 {

    text-align: center;

}

p.right {

    text-align: right;

}

text-decoration: It adds/removes lines from text (e.g., underline, overline, line-through).

a {

    text-decoration: none; /* Removes underline from links */

}

.strikethrough {

    text-decoration: line-through;

}

line-height: It sets the height of a line of text (spacing between lines).

p {

    line-height: 1.6; /* A common value for good readability */

}

letter-spacing: It sets the spacing between characters.

h1 {

    letter-spacing: 2px;

}

text-transform: It controls the capitalization of text.

.uppercase {

    text-transform: uppercase;

}

.capitalize {

    text-transform: capitalize;

}

Background and Border Styling

background-color: It sets the background color of an element.

body {

    background-color: #f0f8ff;

}

.card {

    background-color: white;

}

background-image: It sets an image as the background.

.hero-section {

    background-image: url(‘images/hero-bg.jpg’);

    background-size: cover; /* Makes sure the image covers the entire area */

    background-position: center; /* Centers the image */

}

border: Its ets the border of an element. Shorthand for border-width, border-style, border-color.

div {

    border: 2px solid #ccc; /* 2px wide, solid line, light grey color */

}

.dashed-border {

    border: 1px dashed red;

}

border-radius: It rounds the corners of an element.

img {

    border-radius: 50%; /* Makes an image perfectly circular */

}

.button {

    border-radius: 5px;

}

Review: CSS Interview Questions and Answers.

The CSS Box Model: Understanding Space and Layout

Every HTML element is essentially a rectangular box. The CSS Box Model defines how these boxes are displayed and how space is distributed around them. Mastering this is crucial for accurate layout and spacing.

It states that any HTML element may be thought of as a box. For layout, it is essential to comprehend the box model. It includes:

  • Content: The element’s actual content, such as text, pictures, etc.
  • Padding: The distance from the border to the content.
    • padding: 20px; (all four sides)
    • padding: 10px 20px; (top/bottom 10px, left/right 20px)
    • padding-top, padding-right, padding-bottom, padding-left (individual sides)

.padded-box {

    padding: 20px 30px; /* 20px top/bottom, 30px left/right */

    background-color: #e6f7ff;

    border: 1px solid #99d6ff;

}

  • Border: A border is a line that encircles the content and padding.

border: 2px solid black;

  • Margin: The area outside the border that divides one element from another.
    • margin: 20px; (all four sides)
    • margin: 10px auto; (top/bottom 10px, left/right auto – common for centering block elements)
    • margin-top, margin-right, margin-bottom, margin-left (individual sides)

.box {

  width: 200px;

  height: 100px;

  padding: 15px; /* 15px on all sides */

  border: 2px solid black;

  margin: 10px auto; /* 10px top/bottom, auto for left/right (centers) */ }

box-sizing: border-box;: This is an incredibly important property! By default (content-box), width and height only apply to the content area, meaning padding and border add to the total size. With border-box, width and height include padding and border, making layout calculations much simpler and more intuitive. It’s highly recommended to set this globally:

* {

    box-sizing: border-box; /* Include padding and border in element’s total width/height */

}

Layout Properties: Positioning and Arrangement

Display Property: It regulates the appearance of an element.

  • block: It uses all of the available width (div, p, h1).
  • Inline: It only uses the width that is required (e.g., span, a, img).
  • inline-block: Similar to inline, but with the ability to set height and width, is inline-block.
  • None: Completely conceals the element.
  • flex, grid: Advanced display features for effective layouts include flex and grid.
  • static (by default): Things happen organically.
  • relative: Oriented in relation to its typical orientation.

.my-div {

    display: block;

    width: 100px; /* This width works */

}

.my-span {

    display: inline;

    /* width: 100px; This would have no effect on an inline element */

}

.my-button {

    display: inline-block;

    width: 120px;

    height: 40px;

    padding: 10px;

}

.hidden-element {

    display: none;

}

  • Positioning: The arrangement of elements on the page is known as positioning.
    • static (default): Elements render in their normal position in the document flow. Top, bottom, left, right properties have no effect.
    • relative: Positioned relative to its normal position. Using top, bottom, left, right will move the element from where it would have been, but it still occupies its original space in the flow.

.relative-box {

    position: relative;

    top: 20px;

    left: 30px; /* Moves down 20px and right 30px from its static position */

    background-color: lightcoral;

}

  • absolute: Positioned relative to its closest positioned ancestor (an ancestor with position: relative, absolute, fixed, or sticky). If no positioned ancestor exists, it’s positioned relative to the <body>. Absolutely positioned elements are removed from the normal document flow.

HTML

<div class=”parent-relative”>

    <div class=”child-absolute”></div>

</div>

CSS

.parent-relative {

    position: relative; /* This makes it the positioning context for its children */

    width: 300px;

    height: 200px;

    border: 2px dashed blue;

    margin-top: 50px;

}

.child-absolute {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 50px;

    height: 50px;

    background-color: gold;

}

  • fixed: Positioned relative to the viewport. It stays in the same place even if the page is scrolled. Useful for navigation bars or “back to top” buttons.

.fixed-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: #333;

    color: white;

    padding: 15px;

    z-index: 1000; /* Ensures it stays on top of other content */

}

  • sticky: A hybrid of relative and fixed. An element is positioned relative until a certain scroll position is met, then it becomes fixed.

.sticky-sidebar {

    position: sticky;

    top: 20px; /* It will stick 20px from the top of the viewport */

}

  • float: It is used to wrap text around images or create multi-column layouts. While still used, modern layouts often prefer Flexbox or Grid.
    • left, right, none.
    • clear: Used to prevent elements from wrapping around a floated element.

.image-float {

    float: left;

    margin-right: 15px;

}

.clearfix::after { /* Common clearfix hack */

    content: “”;

    display: table;

    clear: both;

}

Explore: Full Stack Developer Salary for Freshers

Advanced CSS Techniques

You’ll come across increasingly potent CSS capabilities as you advance:

Flexbox: Items can be arranged in rows or columns using the Flexbox one-dimensional layout framework. Great for allocating space between objects.

.container {

  display: flex;

  justify-content: center; /* Horizontally centers items */

  align-items: center; /* Vertically centers items */

}

CSS Grid: A two-dimensional layout approach for grouping objects in rows and columns is called CSS Grid. Perfect for intricate page designs.

.grid-container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */

  grid-gap: 20px; /* Space between grid items */

}

Transitions and Animations: Give your elements slick visual effects.

.button {

  background-color: blue;

  transition: background-color 0.3s ease-in-out; /* Smooth transition over 0.3 seconds */

}

.button:hover {

  background-color: navy;

}

Responsive Design with Media Queries: It makes your website look good on all devices (desktops, tablets, phones).

/* Styles for screens smaller than 768px */

@media (max-width: 768px) {

  body {

    font-size: 14px;

  }

  .container {

    flex-direction: column; /* Stack items vertically on smaller screens */

  }

}

CSS Variables (Custom Properties): It defines reusable values throughout your stylesheets.

:root {

  –primary-color: #007bff;

  –font-stack: Arial, sans-serif;

}

body {

  color: var(–primary-color);

  font-family: var(–font-stack);

}

Best Practices and Tips for CSS Beginners

  • Start Simple: Don’t try to master everything at once. Focus on one concept, practice it, and then move on.
  • Inspect Element (Browser DevTools): This is your best friend! Right-click on any element on a webpage and select “Inspect.” You can see the applied CSS, experiment with changes live, and debug issues.
  • Organize Your CSS:
    • Use external stylesheets.
    • Group related styles.
    • Add comments (/* This is a comment */) to explain complex sections.
  • Use Descriptive Class Names: Instead of .red-text, use .error-message or .highlight-text.
  • Mobile-First Approach: When designing responsively, it’s often easier to start styling for mobile devices first, then use media queries to add styles for larger screens.
  • Learn to Debug: CSS can be tricky. If something isn’t working as expected, check:
    • Typos in property names or values.
    • Incorrect selectors.
    • Specificity issues (more specific rules override less specific ones).
    • Inheritance (some properties are inherited by child elements).
  • Practice, Practice, Practice: The best way to learn CSS is by building things. Recreate designs you see, follow tutorials, and build your own projects.
  • Stay Updated: CSS is constantly evolving. Follow reputable web development blogs and resources to keep your skills current.

Check Out All our IT Training Courses.

Conclusion

You’ve just taken a massive leap in understanding the incredibly powerful and creative world of cascading style sheets through this CSS tutorial for beginners! Keep your curiosity alive, and continue transforming your ideas into beautiful web realities! If you’re eager to accelerate your learning with expert guidance and hands-on projects, explore our specialized CSS training in Chennai. Your path to becoming a web design wizard begins here!

Share on your Social Media

Just a minute!

If you have any questions that you did not find answers for, our counsellors are here to answer them. You can get all your queries answered before deciding to join SLA and move your career forward.

We are excited to get started with you

Give us your information and we will arange for a free call (at your convenience) with one of our counsellors. You can get all your queries answered before deciding to join SLA and move your career forward.