Day 1 CSS Tutorial: Introduction & Basic Syntax for Beginners

Day 1 - CSS - Introduction + Basics Syntax: "Styling the Web: CSS for Absolute Beginners"

Niotechone Marketing Team
November 15, 2025
2:30 pm

Introduction

Welcome to the fascinating world of CSS (Cascading Style Sheets)!

Let’s start with an analogy: if you’ve ever built a house, you can think of HTML as the building, with walls, a front door and window, etc. But what makes the house beautiful? The paint color on the walls, decorations, furniture arrangement, and various colors! In the same way, CSS makes a web page look beautiful and professional. CSS will take a boring, plain HTML element and transform it into a beautiful, professional web page design.

Why is CSS, In Particular, Important for Beginners?

Visual Appeal: CSS beautifies websites
User Experience: Appropriate styling enhances readability and navigability
Professional Skill: All web developers need to know CSS
Career Necessity: CSS is required for frontend development jobs
Creative Outlet: This is where the art form meets code!

In this tutorial, you will become familiar with the basics of CSS: what it is, how to write it, different methods to embed it into your HTML, and how to create interactive styles based on the user’s actions. You will be able to transform plain HTML into beautifully styled web pages!

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML elements (e.g., how they should appear on a screen, printout, or other media). It specifies:

Colors (text, background, border)
Fonts (font family, size, weight)
Spacing (margin, padding)
Layout (positioning, alignment)
Animations (transitions, effects)
Responsive design (mobile, tablet, desktop views)

CSS Syntax: The Building Blocks

Every CSS rule follows this simple structure:

selector {

property: value;

}

Breaking It Down:

Selector: What HTML element(s) that you want to style
Property: What do you want to change (color, font-size, margin, etc.)
Value: The specific value for that property
Curly braces {}: The code goes in curly braces{} all properties for that selector go here

Semicolon; : Ends the property/value

Example:

🎨

h1 {
  color: blue;
  font-size: 24px;
}

This applies a blue color and a font size of 24px to all <h1> headings.

Pro Tip: Make sure to always put a semi-colon after every property! Forgetting them is a common new developer mistake!

How to Insert CSS: Three Methods

There are three ways to add CSS to HTML. Let’s take a look at each way!

Method 1: Inline CSS

Inline CSS uses the style attribute directly in an HTML element.

🌐

<h1 style="color: red; font-size: 30px;">Hello World</h1>

Pros:

Quick for testing single element
High specificity (overrides styles)

Cons:

Hard to maintain (you are mixing HTML and CSS)
Cannot reuse styles
Makes HTML messy

Note: Use inline CSS on very specific one-off styles or just to test for now.

Method 2: Internal CSS

Internal CSS is used inside the <style> tags the <head> of your HTML document.

🌐

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
</body>
</html>

Pros:

Styles apply to the whole document
Convenient for single document projects
Easier than inline CSS to manage

Cons:

Can’t reuse the CSS across separate HTML documents
Can increase file size

Note: An internal CSS style is optimal for small projects or if you’d like to keep all of your code in one file.

Method 3: External CSS (BEST PRACTICE!)

External CSS is implemented via a separate .css file, linked to your HTML document. External CSS is the most normal method used by professionals!

HTML File:

🌐

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="Introduction_Basics.css">
</head>
<body>
  <h1>Styled with External CSS</h1>
</body>
</html>

CSS File (Introduction_Basics.css):

🎨

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  color: green;
}

Pros:

Total separation of HTML and CSS
A single CSS file can style as many HTML documents as you want!
Easier to maintain and update
Easier to organize files in a bigger project
Browsers also cache CSS files (causes pages to load faster!)

Cons:

You need to create one additional file

Pro Tip: Always use external CSS for a real assignment, since it is the standard for all professionals!

CSS Comments: Document Your Code

Comments are valuable because they need to help you (as well as anyone else) to know what you’re trying to do in your code, and browsers will ignore them.

CSS Comment Syntax:

🎨

/* This is a single-line comment */

/* 
   This is a 
   multi-line comment
   for longer explanations
*/

h1 {
  color: blue; /* This makes headings blue */
}

When to Use Comments?

Explain decisions that are based on complex style choices.
Organize different “sections” in your CSS.
Temporarily disable a code section while testing.
Help your team members understand your thought process.

Note: Good comments won’t just say what you did, they will say why you made these choices.

Step-by-Step Tutorial: Building Your First Styled Page

Next we will build a complete example that pulls together everything we have learned about CSS, including styles that interact with your page!

Step 1: Create the HTML Structure

Let’s create an HTML file using a number of different elements on our page to style:

🌐

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="Introduction_Basics.css">
</head>
<body>
  <a href="#">Click this link</a><br><br>
  <button>Click me</button><br><br>
  <input type="text" placeholder="Focus on me"><br><br>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

What is Happening Here?

We link to an external CSS file using <link rel=”stylesheet” href=”…”>
We create a few interactive elements: a link, a button, an input field, and an unordered list.
We add space between elements using <br><br> tags.
Each element triggers a browser default style that we will remove using CSS.

Step 2: Styling the Link

Let’s break down each element we styled:

🎨

/* Link default state */
a {
  color: #3498db;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 15px;
  border: 2px solid #3498db;
  border-radius: 5px;
  transition: all 0.3s ease;
}

Code Explanation:

Pro Tip: The transition property creates smooth animations—it’s a simple way to make your site feel more professional!

color: sets the color of your text to a pleasant blue (#3498db is a hex color code).
text-decoration:none that will remove the default styling of an underline.
font-size and font-weight make your text bigger and bold.
padding gives some distance inside the link (10px top/bottom, 15px left, right).
border: this creates a 2px solid blue border.
border-radius will round the corners (5px).
transition will create a new smooth animation when a rule is applied (0.3 seconds).

Pro Tip: The transition property creates smooth animations, and is a quick way to enhance your site’s professionalism!

Step 3: Adding Hover Effects to the Link

Now, let’s add hover functionality to your link:

🎨

/* Link hover state */
a:hover {
  background-color: #3498db;
  color: white;
  transform: scale(1.05);
}

What is a Pseudo-Class?

:hover is a pseudo-class that changes styles based on user hover interaction. It simply provides interactive feedback to your user!

This Code:

Changes the background-color to blue
Changes the text-color to white, allowing for contrast
transform: scale(1.05): makes the link 5% bigger than normal
Acting together with our transition, creates a smooth and growing effect

Common Mistake: If you forget the colon (:) you will break your code

Step 4: Styling the Button

Let’s create a more-modern and visually appealing button:

🎨

/* Button default state */
button {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

New Properties Explained:

border: none: removes the default button border
cursor: pointer; makes the cursor a hand pointer (visually indicates it’s clickable)
box-shadow: provides a subtle, shadow depth
- 0 4px: where the shadow is in a position of 0 horizontal and four pixels down
- 6px: is its blur radius
- rgba(0,0,0,0.1): means black with 10% opacity

Note: border-radius: 25px gives the button a pill-shaped button design. You should try different properties and values to see how it alters!

Step 5: Button Hover and Active States

🎨

/* Button hover state */
button:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Button active state (when clicked) */
button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Understanding the Effects:

Hover State:

darker background-color
translateY(-2px): moved up vertically by two px (visually gives the effect of being lifted)
increased box-shadow size (visually appearing to float)

Active State (:active = as you’re clicking):

resets the vertical position
decreases the box-shadow size (visual representation of pressing down the button)

Pro Tip: Using the hover and active state together creates a realistic button press!

Step 6: Styling the Input Field

Now let’s make our text input contemporary and intuitive:

🎨

/* Input default state */
input[type="text"] {
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  width: 300px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

Understanding the Selector:

input[type=”text”] is known as an attribute selector
It only applies to inputs with a value of type text (and not checkboxes, radios, etc.)
It is more specific than just input

A Breakdown of the Styles:

Padding creates empty space inside the input
Border is a light gray color
width: 300px gives the input a static width
Border-color and box-shadow are being transitioned in now for a smoother animation

Step 7: Input Focus State

When a user clicks on the input field we want to give visual feedback here:

🎨

/* Input focus state */
input[type="text"]:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

The :focus Pseudo-Class:

This applies once our element is selected or active
Common for inputs or form fields

This Code:

outline: none: This will remove the default outline that a browser puts around any focused elements
Changes the border-color to blue (which will indicate an active element)
Then we use box-shadow to create a blue “glow” around the input
- 0 0 0 3px: This will create a 3px spread around the item
- rgba(52, 152, 219, 0.2): this is a semi-transparent blue

Accessibility Note: When using outline: none it is a best practice to provide an alternative visual focus indication anywhere that we’ve removed a focus outline (this is the border and shadow)!

Step 8: Styling the List

We are now going to style our unordered list of items so they are nicer visually:

🎨

/* List container */
ul {
  list-style-type: none;
  padding: 0;
  width: 300px;
}

/* List items */
li {
  background-color: #ecf0f1;
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #3498db;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* List item hover */
li:hover {
  background-color: #d5dbdb;
  padding-left: 20px;
  border-left-color: #2980b9;
}

The Key Concepts:

UL Styles:

list-style-type: none – This will remove the bullet points
padding: 0 – This will remove any extra indentation

LI Styles:

A light gray background
border-left: This will create the colored accent bar (this is a modernistic design pattern)
margin-bottom: space between items

LI Hover:

We will slightly change the light gray background color upon hover

padding-left: 20px: Produces a slide-right movement
Darker blue border (subtle feedback)

Pro Tip: Left border accents are a trendy modern design technique used by many professional websites!

Complete CSS Code

This is the full CSS file that brings everything together:

🎨

a {
  color: #3498db;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 15px;
  border: 2px solid #3498db;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: inline-block;
}

a:hover {
  background-color: #3498db;
  color: white;
  transform: scale(1.05);
}

/* Button Styles */
button {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Input Field Styles */
input[type="text"] {
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  width: 300px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* List Styles */
ul {
  list-style-type: none;
  padding: 0;
  width: 300px;
}

li {
  background-color: #ecf0f1;
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #3498db;
  border-radius: 4px;
  transition: all 0.3s ease;
}

li:hover {
  background-color: #d5dbdb;
  padding-left: 20px;
  border-left-color: #2980b9;
}

/* Body General Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 40px;
  background-color: #f8f9fa;        }

Code Explanation: How Everything Connects

The CSS Cascade

CSS is an abbreviation for Cascading Style Sheets. What does “cascading” mean?

The Cascade determines which styles apply to certain elements when multiple rules are applied to the same element. The Cascade has a hierarchy which is as follows (from highest to lowest priority):

Inline styles
Internal styles (in <style> tags)
External styles (in .css files)
Browser defaults

Specificity also matters

ID selectors (#myId) are the most specific,
class selectors (.myClass) are medium specific, and
element selectors are the least specific (div, p, a).

Pro Tip: More specific selectors will override other selectors regardless of their order

Pseudo-class Explained

Pseudo-classes select an element based on its state or position – not just its type or class.

Common Pseudo-Classes:

Pseudo-Class	When It Applies
:hover	When cursor is over element
:focus	When element is selected/active
:active	When element is being clicked
:visited	For links that have been clicked
:first-child	First element among siblings
:last-child	Last element among siblings
:nth-child(n)	nth element among siblings

Why pseudo-classes are great:

Pseudo-classes allow you to create interactive experiences without using any JavaScript! Hover effects, focus, and active states can all enhance the experience of use and provide visual feedback.

Understanding Transitions

The transition property produces smooth animations between states:

transition: property duration timing-function delay;

Our Example:

transition: all 0.3s ease;

All: Animate all dynamic properties
0.3s: Animation will last 0.3 seconds
ease: Starts slow, accelerates, and ends slow (feels natural)

You may also transition specific properties:

transition: background-color 0.5s, transform 0.3s;

“`

Pro Tip: Utilize transitions on interactive elements (buttons, links, inputs) to create a polished truer UX!

### Box Model and Spacing

Every HTML element is a rectangular box organized by these layers:

Content: The actual text or image
Padding: Space between content and border (inside)
Border: The edge of the element
Margin: Space outside the border (creates gaps between items)

Note: Padding grows the element’s size, margin creates space between items!

Tables of Key Concepts

A. Components / Keywords Used

Name	Description
<link>	HTML tag that connects external CSS file to HTML document
rel=”stylesheet”	Attribute specifying the relationship as a stylesheet
href	Attribute pointing to the CSS file location
<style>	HTML tag for internal CSS within the document head
selector	Targets which HTML element(s) to apply styles to
property	The aspect of styling to change (color, size, etc.)
value	The specific setting for a property
/* comment */	CSS comment syntax for code documentation
:hover	Pseudo-class that applies styles when cursor hovers over element
:focus	Pseudo-class for styling elements when selected/active
:active	Pseudo-class for styling elements during click
a	Element selector targeting all anchor/link tags
button	Element selector targeting all button elements
input[type=”text”]	Attribute selector targeting specific input types
ul	Element selector for unordered lists
li	Element selector for list items
rgba()	Color format with red, green, blue, and alpha (transparency)
#hexcode	Color format using hexadecimal notation
transition	Property for smooth animations between states
transform	Property for moving, scaling, or rotating elements

B. Key Properties / Parameters / Features

Name	Description
color	Sets text color
background-color	Sets background color of element
font-size	Controls text size
font-weight	Controls text thickness (normal, bold, 100-900)
font-family	Specifies typeface/font to use
text-decoration	Controls text underlines, overlines, strikethroughs
padding	Space inside element between content and border
margin	Space outside element creating gaps between elements
border	Edge of element with width, style, and color
border-radius	Rounds corners of elements
border-left	Style only the left border (also: top, right, bottom)
width	Sets element width
height	Sets element height
display	Controls how element is rendered (block, inline, flex, etc.)
cursor	Changes cursor appearance when hovering
box-shadow	Creates shadow effects around elements
outline	Border-like outline that doesn’t affect layout
list-style-type	Controls bullet point style in lists
text-align	Aligns text (left, center, right, justify)
transition	Defines smooth animations between property changes
transform	Applies 2D/3D transformations (scale, rotate, translate)
scale()	Transform function that resizes elements
translateY()	Transform function that moves elements vertically
ease	Timing function for natural-feeling animations
none	Value that removes or disables a property
inline-block	Display value combining inline and block characteristics

Useful References

Official Documentation & Standards

MDN Web Docs – CSS – The most comprehensive CSS reference
W3C CSS Specifications – Official CSS standards and specifications
Can I Use – Check browser compatibility for CSS features

Learning Platforms

W3Schools CSS Tutorial – Beginner-friendly with interactive examples
CSS-Tricks – Tutorials, guides, and articles on modern CSS
freeCodeCamp CSS Course – Free structured curriculum
Codecademy – Learn CSS – Interactive lessons

CSS Properties & Values

MDN CSS Reference – Complete alphabetical property list
CSS Properties Index – Quick reference with examples
CSS Values and Units – Understanding measurements

Selectors & Specificity

CSS Selectors Reference – All selector types explained
Specificity Calculator – Visual tool for understanding specificity
MDN – Pseudo-classes – Complete pseudo-class list

Colors & Design

Coolors – Beautiful color palette generator
Adobe Color – Professional color wheel and schemes
HTML Color Codes – Hex, RGB, and color picker tools
Material Design Colors – Google’s color system

Transitions & Animations

CSS Transitions – Detailed transition guide
Easing Functions – Visual guide to timing functions
Animate.css – Ready-to-use CSS animation library

Practice & Challenges

CSS Diner – Fun game for learning selectors
Flexbox Froggy – Learn Flexbox through gaming
CSS Grid Garden – Master Grid layout with games
Frontend Mentor – Real-world project challenges
CSSBattle – CSS coding challenges

Tools & Utilities

CSS Gradient Generator – Create beautiful gradients
Box Shadow Generator – Visual shadow creator
Border Radius Generator – Complex rounded corners
CSS Formatter – Format and organize CSS code

Video Tutorials

Traversy Media – CSS Crash Course – YouTube tutorial
Web Dev Simplified – Clear, modern CSS tutorials
Kevin Powell – CSS expert with excellent tips

Books & Guides

CSS: The Definitive Guide – Comprehensive reference book
Interneting Is Hard – CSS & HTML – Friendly beginner tutorials
Learn to Code HTML & CSS – Free online book

Communities & Help

Stack Overflow – CSS Tag – Get answers to specific questions
CSS Subreddit – Community discussions and help
Discord – The Programmer’s Hangout – Live chat with developers

Source Code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%201%20-%20CSS%20-%20Introduction%20%2B%20Basics%20Syntax

What You Learned (Summary) Player

Congratulations! You’ve made it through your first day of CSS and made a huge leap in your web development journey!

Key Takeaways:

1. CSS Fundamentals

You understand what CSS is and why it’s essential for web design
You learned CSS syntax: selectors, properties, and values
You can write properly formatted CSS rules with correct punctuation

2. Three Ways to Add CSS

Inline CSS: Quick but not recommended for production
Internal CSS: Good for single-page projects
External CSS: Professional standard, best for all projects

3. Interactive Styling

You created hover effects that respond to user interaction
You styled focus states for better form usability
You implemented active states for realistic button presses

4. Modern Design Techniques

Smooth transitions for polished animations
Box shadows for depth and dimension
Transform properties for movement and scaling
Border accents for contemporary list styling

5. Practical Skills

Styling links without default underlines
Creating attractive, clickable buttons
Designing user-friendly form inputs
Building modern list layouts

6. Best Practices

Using comments to document your code
Organizing CSS with consistent formatting
Providing visual feedback for user interactions
Maintaining accessibility with proper focus indicators

Output:

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the difference between a class selector and an ID selector in CSS?

A class selector can be used multiple times on a page, while an ID selector is unique and should be used only once. Classes are more flexible for styling repeated elements.

Do I need to learn HTML before learning CSS?

Yes. CSS is used to style HTML elements, so understanding basic HTML structure helps you apply CSS more effectively.

Why is my CSS not applying to the HTML page?

Common reasons include incorrect file path for the CSS file, missing <link> tag, typos in selectors, or browser caching. Refreshing the page or checking the path usually fixes it.

Can I use multiple CSS files in one HTML page?

Yes, you can link multiple CSS files using multiple <link> tags. This helps you organize styles—such as separating layout, components, and utilities.

What is the purpose of the universal selector (*) in CSS?

The universal selector applies styles to every element on the page. It’s often used for resetting margins and padding.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Day 1 - CSS - Introduction + Basics Syntax: "Styling the Web: CSS for Absolute Beginners"

Table of Contents

Introduction

What is CSS?

CSS Syntax: The Building Blocks

How to Insert CSS: Three Methods

CSS Comments: Document Your Code

Step-by-Step Tutorial: Building Your First Styled Page

Complete CSS Code

Code Explanation: How Everything Connects

Tables of Key Concepts

Useful References

What You Learned (Summary) Player

Output:

Categories

Related Articles

Day 4 – HTML Semantics & Forms

Day 5 – CSS Positioning and Flexbox

Day 3 – HTML Tables Lists Divs Layout Enhanced

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada