Css Styling

Master colors, fonts, spacing, and visual styling to create professional-looking websites.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Make sure you've completed these lessons first:

When people say "CSS makes websites look good", that is an understatement. CSS doesn't just make things "pretty" — it controls whether users trust your website or leave within seconds.

Think of CSS like interior design. Two identical houses with the same floor plan can feel completely different. One feels warm, modern, and inviting. The other feels cold, cluttered, and cheap. The difference? How things are styled — colors, spacing, lighting, and furniture choices. CSS is your website's interior designer.

Users decide in less than 50 milliseconds whether a site looks professional. That judgment is driven almost entirely by color and spacing.

90% of real websites rely on this core set. Master these and you can already build clean, modern layouts:

CSS gives you four ways to define colors. Each has a purpose:

For beginners, start with hex colors — they're the most common in tutorials and design tools. Use RGBA when you need transparency (overlays, glass effects). Use HSL when you want to create color variations easily (just change the lightness value).

Flat, single colors everywhere make sites look cheap and dated . Gradients create depth and visual interest that makes your site feel modern and premium.

Don't use too many colors in one gradient. Two colors is usually enough. Three colors can work for backgrounds but often looks messy for smaller elements. Subtle gradients beat flashy ones in professional design.

Fonts decide whether your site looks professional or amateur . The wrong font instantly destroys credibility — even if everything else is perfect.

If your site feels cramped, messy, or hard to read — you're missing spacing. Spacing is not decoration. It's design logic .

Padding = the foam inside a gift box protecting the item. Margin = the space between gift boxes on a shelf. Padding is inside space. Margin is outside space. Get this right and your layouts feel instantly professional.

Two properties instantly make your designs feel modern and premium : box-shadow for depth and border-radius for softness.

Buttons are the most clicked element on any website. They need to look clickable, feel responsive, and guide the user. Here's how professionals style them:

The single biggest difference between amateur and professional CSS is consistency . Random choices create visual chaos.

Use your primary color for 60% of the design (backgrounds), a secondary color for 30% (cards, sections), and an accent color for 10% (buttons, links, highlights). This creates visual harmony automatically.

Combine everything you've learned to build a complete, professional landing section:

Practice quiz

Which CSS property sets the text color of an element?

  • text-color
  • font-color
  • color
  • background-color

Answer: color. The color property sets text color; background-color sets the background fill.

What does rgba(0, 0, 0, 0.5) represent?

  • Black at 50% opacity
  • Pure black with no transparency
  • White at 50% opacity
  • An invalid color

Answer: Black at 50% opacity. In rgba(), the fourth value is the alpha (opacity); 0.5 means 50% transparent black.

Which color format is best for easily creating palette variations by adjusting lightness?

  • Hex
  • RGB
  • RGBA
  • HSL

Answer: HSL. HSL (Hue, Saturation, Lightness) lets you tweak the lightness value to create variations.

What is the difference between padding and margin?

  • Padding is outside space, margin is inside
  • Padding is inside space, margin is outside
  • They are identical
  • Padding only works on text

Answer: Padding is inside space, margin is outside. Padding is the space inside an element's border; margin is the space outside it.

Which value of border-radius makes a perfect circle on a square element?

  • 50%
  • 999px
  • 12px
  • 100px

Answer: 50%. border-radius: 50% turns a square element into a perfect circle.

What does the CSS shorthand 'margin: 0 auto;' do to a block element?

  • Removes all spacing
  • Centers it vertically
  • Centers it horizontally
  • Adds automatic padding

Answer: Centers it horizontally. margin: 0 auto sets top/bottom margin to 0 and left/right to auto, centering a block horizontally.

Which function creates a gradient that radiates outward from a point?

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeat-gradient()

Answer: radial-gradient(). radial-gradient() produces colors radiating out from a center point.

What does 'padding: 10px 20px;' mean?

  • 10px on all sides
  • 10px left/right, 20px top/bottom
  • 10px top, 20px everywhere else
  • 10px top/bottom, 20px left/right

Answer: 10px top/bottom, 20px left/right. Two values set top/bottom first, then left/right: 10px top/bottom and 20px left/right.

Which CSS property adds a drop shadow to an element's box?

  • text-shadow
  • box-shadow
  • drop-shadow
  • shadow

Answer: box-shadow. box-shadow adds shadow to an element's box; text-shadow applies only to text.

Which property controls the spacing between lines of text for readability?

  • letter-spacing
  • font-size
  • line-height
  • word-spacing

Answer: line-height. line-height sets the vertical spacing between lines of text; 1.5 to 1.8 is recommended for body text.