CSS Syntax - Easy Learning

Learn CSS step by step with simple examples

Complete Example

Try this full example with HTML, CSS and JavaScript:

Complete HTML, CSS and JS Example
<!DOCTYPE html>
<html>
<head>
  <title>My First Styled Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
      transition: background-color 0.5s ease;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    h1 {
      color: #3366cc;
      border-bottom: 2px solid #3366cc;
      padding-bottom: 10px;
    }
    
    .highlight {
      background-color: #ffffcc;
      padding: 5px;
      border-left: 4px solid #ffcc00;
    }
    
    .button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 15px;
      transition: background-color 0.3s ease;
    }
    
    .button:hover {
      background-color: #45a049;
    }
    
    .dynamic-content {
      background-color: #e7f3ff;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
      border-left: 4px solid #2196F3;
    }
    
    .color-changer {
      background-color: #ff6b6b;
      margin-left: 10px;
    }
    
    .color-changer:hover {
      background-color: #ee5a52;
    }

    /* Message Box */
    #messageBox {
      margin-top: 15px;
      padding: 10px;
      border-left: 4px solid #4CAF50;
      background-color: #eafbea;
      border-radius: 4px;
      display: none; /* hidden until button clicked */
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Welcome to CSS Styling</h1>
    <p>This paragraph shows basic text styling with comfortable spacing and reading layout.</p>
    <p class="highlight">This highlighted text demonstrates how CSS can draw attention to important content.</p>
    <p>Notice how all elements are neatly contained within a centered container with subtle shadows.</p>
    
    <div class="dynamic-content">
      <p>JavaScript will update this content when the page loads.</p>
    </div>
    
    <button class="button" id="showMessage">Click Me (JavaScript)</button>
    <button class="button color-changer" id="colorChanger">Change Background Color</button>

    <!-- Message will appear here -->
    <div id="messageBox">✅ Button clicked! This text is shown by JavaScript.</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Button click event to toggle message visibility
      const messageButton = document.getElementById('showMessage');
      const messageBox = document.getElementById('messageBox');
      if (messageButton && messageBox) {
        messageButton.addEventListener('click', function() {
          if (messageBox.style.display === "none" || messageBox.style.display === "") {
            messageBox.style.display = "block"; // show
          } else {
            messageBox.style.display = "none"; // hide
          }
        });
      }
      
      // Dynamic content update
      const dynamicContent = document.querySelector('.dynamic-content');
      if (dynamicContent) {
        dynamicContent.innerHTML = '<h3>Dynamic Content</h3><p>This content was added by JavaScript. The current time is: ' + new Date().toLocaleTimeString() + '</p>';
      }
      
      // Color changer functionality
      const colorChangeButton = document.getElementById('colorChanger');
      if (colorChangeButton) {
        colorChangeButton.addEventListener('click', function() {
          const colors = ['#ff7675', '#74b9ff', '#55efc4', '#fdcb6e', '#a29bfe'];
          const randomColor = colors[Math.floor(Math.random() * colors.length)];
          document.body.style.backgroundColor = randomColor;
        });
      }
    });
  </script>
</body>
</html>

CSS has a simple structure. You select an element and then say how it should look.

Basic CSS Syntax
selector {
  property: value;
  another-property: another-value;
}

Simple Explanation:

Selector

What you want to style:

  • Element name (p, div, h1)
  • Class (.class-name)
  • ID (#id-name)

Property & Value

How you want to style it:

  • Property: what to change (color, size)
  • Value: how to change it (red, 16px)

Selectors help you choose which elements to style.

Selector Examples
/* Element selector */
p {
  color: blue;
}

/* Class selector */
.my-class {
  font-size: 16px;
}

/* ID selector */
#my-id {
  background-color: yellow;
}

/* Hover effect */
a:hover {
  text-decoration: underline;
}

Most Used Selectors:

Element Selector

Styles all elements of that type:

p { color: blue; }

Class Selector

Styles elements with that class:

.my-class { font-size: 16px; }

ID Selector

Styles one specific element:

#my-id { background: yellow; }

Hover Effect

Styles when mouse is over element:

a:hover { text-decoration: underline; }

Properties change how elements look. There are many properties for colors, sizes, layouts, and more.

Property Examples
/* Text properties */
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;

/* Box properties */
width: 300px;
height: 200px;
margin: 20px;
padding: 15px;
border: 2px solid black;

/* Background */
background-color: #f0f0f0;

/* Layout */
display: flex;
justify-content: center;
align-items: center;

Common Properties:

Text Properties

  • color: changes text color
  • font-size: changes text size
  • font-family: changes font type
  • text-align: aligns text

Box Properties

  • width: sets element width
  • height: sets element height
  • margin: space outside element
  • padding: space inside element

Layout Properties

  • display: how element displays
  • flex: modern layout method
  • position: element positioning
  • float: text wrapping around

Background Properties

  • background-color: element background
  • background-image: background image
  • background-size: image size
  • opacity: transparency

Values are the settings you give to properties. Different properties need different types of values.

Value Examples
/* Color values */
color: red;
color: #ff0000;
color: rgb(255, 0, 0);

/* Size values */
width: 100px;
height: 50%;
font-size: 1.2em;
margin: 2rem;

/* Numeric values */
opacity: 0.7;
z-index: 10;

Value Types:

Color Values

  • Named colors: red, blue, green
  • Hex codes: #ff0000, #f00
  • RGB: rgb(255, 0, 0)

Size Units

  • px: pixels (fixed size)
  • %: percentage of parent
  • em: relative to font size
  • rem: relative to root font size

Numeric Values

  • 0.7: for opacity
  • 10: for z-index
  • 2: for line-height

Every element in CSS is a box. The box model helps us understand how these boxes work.

Box Model Example
/* The CSS Box Model has 4 parts: */
/* 1. Content - The actual content */
/* 2. Padding - Space inside border */
/* 3. Border - Border around padding */
/* 4. Margin - Space outside border */

.element {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 30px;
}

Box Model Parts:

Content

The actual content (text, image, etc.)

Padding

Space between content and border

Border

Line around the padding

Margin

Space outside the border

Positioning helps you place elements exactly where you want them on the page.

Positioning Examples
/* Relative positioning */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Absolute positioning */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Fixed positioning */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Positioning Types:

Relative

Moves element from its normal position.

Absolute

Positions relative to parent element.

Fixed

Stays in same place when scrolling.

Responsive design makes your website look good on all devices - phones, tablets, and computers.

Media Query Examples
/* Media queries for different screen sizes */

/* Mobile styles */
.container {
  padding: 10px;
  font-size: 14px;
}

/* Tablet styles */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    padding: 30px;
    font-size: 18px;
  }
}

Media Queries:

Screen Size

Change styles based on device width:

@media (min-width: 768px)

Orientation

Change styles based on device orientation:

@media (orientation: landscape)

Tips for Responsive Design

  • Use % instead of px for widths
  • Use media queries for different screens
  • Test on different devices
  • Make buttons big enough for touch

Ready to Practice CSS?

The best way to learn CSS is by trying it yourself. Use our interactive editor to experiment with code.

< PreviousNext >