CSS Styling and Properties

beginner13 min read

CSS
HTML/CSS

Learn how CSS controls the appearance of HTML elements, how CSS rules are written, and how common properties are used to style text, colors, spacing, sizing, borders, backgrounds, layouts, and interactive states.

CSS Styling and Properties

HTML gives a page its structure and meaning. CSS controls how that structure looks and how it is arranged on the screen.

A button, card, navigation bar, calculator, form, or dashboard can all use the same basic CSS concepts:

selector {
  property: value;
}

Once you understand how selectors and properties work, you can read existing CSS, make deliberate styling changes, and build your own visual designs instead of copying styles without understanding them.

Prerequisites

HTML elements and attributes
Basic HTML document structure
Basic understanding of classes and IDs

What You'll Understand

What CSS is and how it works with HTML
The three common ways to apply CSS
How a CSS rule is structured
Selectors and how they identify elements
Element, class, ID, descendant, child, and attribute selectors
Common text and font properties
Colors and color values
Background properties
Borders and border radius
Width, height, and sizing
Margin and padding
The basic display property
Basic Flexbox properties
Basic positioning
Common CSS units
Pseudo-classes such as :hover and :focus
CSS variables
Shorthand properties
The cascade, specificity, and inheritance
Why !important should not be the first solution
How these properties combine to style a real interface

1. What Is CSS?

CSS stands for Cascading Style Sheets.

HTML describes what is on the page:

<h1>My Calculator</h1>
<button>7</button>

CSS describes how those elements should look:

h1 {
  color: blue;
}

button {
  background-color: white;
  border: 1px solid black;
}

A useful way to think about the relationship is:

HTML → structure and meaning
CSS  → appearance and layout
JavaScript → behaviour and interaction

The three technologies work together, but they have different responsibilities.

2. How CSS Can Be Added

There are three common ways to apply CSS.

Inline CSS

CSS can be written directly on an element:

<button style="color: white; background-color: blue;">
  Save
</button>

This works, but becomes difficult to maintain when many elements need styling.

Internal CSS

CSS can be placed inside a <style> element:

<style>
  button {
    color: white;
    background-color: blue;
  }
</style>

This can be useful for a small page or demonstration.

External CSS

CSS can be placed in a separate file:

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

Then:

button {
  color: white;
  background-color: blue;
}

External stylesheets are usually preferred for real projects because they keep structure and styling separate and allow the same styles to be reused across multiple pages.

3. The Structure of a CSS Rule

A basic CSS rule looks like this:

button {
  color: white;
  background-color: blue;
}

There are several parts.

button
   ↓
selector

color: white;
   ↓
declaration

color
   ↓
property

white
   ↓
value

The complete structure is:

selector {
  property: value;
}

A CSS rule can contain multiple declarations:

button {
  color: white;
  background-color: blue;
  padding: 10px 16px;
}

4. Selecting Elements

CSS needs a way to know which HTML elements should receive a style.

That is the job of selectors.

Element Selector

Select all elements of a particular type:

p {
  color: gray;
}

Every <p> element receives the style.

Class Selector

A class begins with .:

.button {
  background-color: blue;
}

HTML:

<button class="button">Save</button>

Classes are commonly used when a style needs to be reused.

Several elements can have the same class:

<button class="button">Save</button>
<button class="button">Cancel</button>

ID Selector

An ID begins with #:

#calculator {
  width: 300px;
}

HTML:

<div id="calculator"></div>

An ID identifies a particular element.

For reusable styling, classes are generally the better choice.

5. Combining Selectors

CSS can target elements based on their relationship.

Multiple Selectors

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}

This applies the same styles to all three types of heading.

Descendant Selector

.card button {
  background-color: blue;
}

This targets buttons that are inside an element with the card class.

For example:

<div class="card">
  <button>Save</button>
</div>

Child Selector

.card > button {
  background-color: blue;
}

The > means the button must be a direct child of .card.

Attribute Selector

CSS can also select elements based on attributes:

input[type="email"] {
  border-color: blue;
}

This selects email inputs.

6. Text and Font Styling

CSS provides several properties for controlling text.

.heading {
  color: #222;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

Common properties include:

color
font-family
font-size
font-weight
font-style
line-height
text-align
text-decoration
text-transform
letter-spacing

For example:

p {
  font-size: 16px;
  line-height: 1.5;
}

line-height controls the vertical space between lines of text.

This can make paragraphs easier to read.

7. Colors

CSS supports several ways of describing colors.

Named Colors

color: red;

Hexadecimal

color: #ff0000;

RGB

color: rgb(255, 0, 0);

RGBA

RGBA adds an alpha value for transparency:

background-color: rgba(0, 0, 0, 0.5);

HSL

color: hsl(0, 100%, 50%);

You will commonly encounter hexadecimal, RGB, and HSL colors in real projects.

8. Backgrounds

CSS can control an element's background.

.card {
  background-color: white;
}

An image can also be used:

.hero {
  background-image: url("hero.jpg");
}

Other useful properties include:

background-size
background-position
background-repeat

For example:

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

cover tells the browser to scale the image so the area is covered, even if part of the image needs to extend beyond the visible area.

9. Borders

Borders surround an element.

.card {
  border: 1px solid #ddd;
}

A border can be described using:

border-width
border-style
border-color

The shorthand:

border: 1px solid #ddd;

sets all three.

You can also round corners:

.card {
  border-radius: 12px;
}

10. Width and Height

CSS can control the dimensions of an element.

.card {
  width: 300px;
  height: 200px;
}

Other useful properties include:

min-width
max-width
min-height
max-height

For example:

.container {
  width: 100%;
  max-width: 800px;
}

This allows the element to use the available width while preventing it from becoming excessively wide.

11. Margin and Padding

Spacing is one of the most important parts of CSS.

Padding

Padding creates space inside an element.

.card {
  padding: 20px;
}

Margin

Margin creates space outside an element.

.card {
  margin: 20px;
}

Think about it like this:

outside
   ↓
┌─────────────────────────┐
│         margin          │
│   ┌─────────────────┐   │
│   │     border      │   │
│   │  ┌───────────┐  │   │
│   │  │  padding  │  │   │
│   │  │  content  │  │   │
│   │  └───────────┘  │   │
│   └─────────────────┘   │
└─────────────────────────┘

The complete CSS Box Model is covered separately in CSS Box Model.

12. CSS Units

CSS values can use different units.

Common units include:

px
%
rem
em
vw
vh

Pixels

button {
  width: 100px;
}

Useful when you need a specific fixed size.

Percentage

.container {
  width: 80%;
}

The value is relative to another dimension.

rem

h1 {
  font-size: 2rem;
}

rem is based on the root element's font size.

vw and vh

.hero {
  min-height: 100vh;
}

vh represents a percentage of the viewport height.

The important lesson is not to memorize every unit immediately.

Choose a unit based on what the dimension needs to represent.

13. The display Property

The display property affects how an element participates in layout.

Common values include:

display: block;
display: inline;
display: inline-block;
display: none;

For example:

.hidden {
  display: none;
}

The element is removed from the normal visual layout.

A very important value is:

display: flex;

which activates Flexbox.

14. Basic Flexbox

Flexbox is a layout system for arranging elements.

For example:

<div class="buttons">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

CSS:

.buttons {
  display: flex;
  gap: 8px;
}

The buttons are now arranged using Flexbox.

Common Flexbox properties include:

display: flex
flex-direction
justify-content
align-items
gap
flex-wrap

For example:

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

Flexbox deserves its own detailed KnowledgeHub topic. Here, the important idea is:

display: flex changes the element into a flex container whose children can be arranged using Flexbox properties.

15. Basic Positioning

CSS can control how an element is positioned.

Common values include:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

For example:

.card {
  position: relative;
}

A child can then be positioned relative to it:

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Positioning can become complex quickly, so advanced positioning should be learned separately.

16. Pseudo-Classes

A pseudo-class describes a particular state of an element.

One common example is :hover.

button:hover {
  background-color: black;
}

This changes the button when the pointer is over it.

Other useful pseudo-classes include:

:hover
:focus
:active
:disabled

For example:

input:focus {
  outline: 2px solid blue;
}

This styles the input when it receives focus.

This is particularly important for interactive controls.

17. CSS Variables

CSS variables allow reusable values to be defined once.

:root {
  --primary-color: #2563eb;
  --text-color: #222;
}

They can then be used elsewhere:

button {
  background-color: var(--primary-color);
  color: white;
}

.heading {
  color: var(--text-color);
}

This is useful when several parts of a page share the same value.

If the primary color changes, you can update it in one place.

18. Shorthand Properties

Some CSS properties allow multiple values to be written in a shorter form.

Instead of:

.card {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

you can write:

.card {
  margin: 10px 20px;
}

Similarly:

button {
  padding: 10px 16px;
  border: 1px solid #ddd;
}

Shorthand makes CSS more compact, but you should understand what the individual properties mean before relying heavily on shorthand.

19. The Cascade

The word cascading in CSS refers to how the browser decides which styles apply when multiple rules affect the same element.

For example:

button {
  color: blue;
}

.primary {
  color: red;
}

HTML:

<button class="primary">Save</button>

Both rules apply to the button.

The browser uses CSS rules such as specificity and source order to determine the final result.

Understanding the cascade is important because CSS does not simply mean:

The last style I wrote always wins.

20. Specificity

Specificity helps determine which selector is more specific.

For example:

button {
  color: blue;
}

.primary {
  color: red;
}

#save-button {
  color: green;
}

Given:

<button id="save-button" class="primary">
  Save
</button>

the ID selector is more specific than the class and element selectors.

A simplified way to think about selector strength is:

element selector
      ↓
class / attribute / pseudo-class
      ↓
ID selector

Specificity becomes especially important when a style appears to be "ignored."

21. Inheritance

Some CSS properties can be inherited from a parent element.

For example:

body {
  font-family: Arial, sans-serif;
  color: #222;
}

Text inside the body will generally inherit these properties unless another rule overrides them.

This is why you may not need to specify the same font on every element.

Not every CSS property is inherited.

22. !important

CSS provides:

color: red !important;

This gives the declaration unusually high priority.

It can sometimes be necessary, but using it as the normal solution to CSS problems makes styles harder to understand and maintain.

If a style is not being applied, first investigate:

the selector
specificity
source order
inheritance
whether another rule is overriding it

Do not immediately add !important.

23. Putting the Pieces Together

Consider a calculator button:

<button class="calculator-button">7</button>

CSS:

.calculator-button {
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
  color: #222;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}

.calculator-button:hover {
  background-color: #f5f5f5;
}

Several CSS concepts are working together.

.calculator-button
        ↓
class selector

width / height
        ↓
size

border / border-radius
        ↓
shape and boundary

background-color
        ↓
background

color
        ↓
text color

font-size / font-weight
        ↓
text appearance

:hover
        ↓
interactive state

You do not need a different technology for each of these changes.

They are all CSS properties applied through CSS rules.

24. Common Mistakes

Styling everything with inline CSS

<button style="color: red;">Save</button>

This becomes difficult to maintain as the project grows.

Prefer reusable CSS classes.

Using IDs for reusable styles

Avoid:

#button1 { }
#button2 { }
#button3 { }

Prefer:

.button { }

and reuse the class.

Confusing margin and padding

Remember:

padding → space inside the element
margin  → space outside the element

Using width when max-width is more appropriate

A fixed width can cause problems on smaller screens.

For containers, this pattern is often more flexible:

.container {
  width: 100%;
  max-width: 900px;
}

Fighting CSS with !important

If you repeatedly need !important, investigate why the existing selector is winning instead.

Forgetting interactive states

A button may look fine when idle but provide no visual indication when focused or hovered.

Consider appropriate states:

button:hover { }
button:focus { }
button:disabled { }

Using too many unrelated rules

CSS becomes difficult to maintain when every element receives a unique rule.

Prefer reusable classes and consistent design values.

Best Practices

Keep CSS separate from HTML when building real projects.
Use meaningful class names.
Prefer classes for reusable styling.
Choose selectors that are specific enough without becoming unnecessarily complicated.
Use CSS properties according to their purpose.
Use rem, %, and other relative units where appropriate rather than making everything fixed in pixels.
Use reusable CSS variables for values such as colors and spacing.
Use Flexbox or Grid for layout instead of positioning everything manually.
Keep interactive states such as :hover, :focus, and :disabled in mind.
Understand the cascade before reaching for !important.
Keep related styles together and avoid unnecessary duplication.
Test styles at different screen sizes.

Where This Stops

This topic provides the foundation for understanding and writing CSS.

It covers:

CSS rules
selectors
text
colors
backgrounds
borders
sizing
spacing
units
display
basic Flexbox
basic positioning
pseudo-classes
CSS variables
shorthand
cascade
specificity
inheritance

The following are better treated as dedicated topics:

CSS Box Model
CSS Flexbox
CSS Grid
CSS Responsive Design
CSS Media Queries
CSS Positioning in Depth
CSS Transitions and Animations
Advanced CSS Selectors
CSS Accessibility
CSS Architecture and Naming

The goal here is to understand how CSS styling works and recognize the common properties you will encounter. It is not intended to be a complete reference for every CSS property.

Key Takeaways

CSS controls the appearance and layout of HTML.
A CSS rule consists of a selector and one or more declarations.
A declaration contains a property and a value.
Classes are commonly used for reusable styling.
CSS can control text, colors, backgrounds, borders, size, spacing, and layout.
Margin creates space outside an element; padding creates space inside it.
CSS units describe how dimensions should be calculated.
display: flex activates Flexbox layout.
Pseudo-classes such as :hover and :focus style different element states.
CSS variables allow values to be reused.
The cascade, specificity, and inheritance determine which styles ultimately apply.
!important should not be the default solution to styling conflicts.
More advanced layout and styling systems should be learned through dedicated topics.

MDN — CSS

https://developer.mozilla.org/en-US/docs/Web/CSS

MDN — CSS First Steps

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics

MDN — CSS Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors

MDN — CSS Properties

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties

MDN — CSS Box Model

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model

MDN — CSS Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout

MDN — CSS Grid

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout

MDN — CSS Cascade

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade

MDN — CSS Specificity

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity

MDN — CSS Custom Properties

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/--*

web.dev — Learn CSS

https://web.dev/learn/css/

CSS-Tricks — Almanac

https://css-tricks.com/almanac/

CSS Styling and Properties

Prerequisites

What You'll Understand

Inline CSS

Internal CSS

External CSS

Element Selector

Class Selector

ID Selector

Multiple Selectors

Descendant Selector

Child Selector

Attribute Selector

Named Colors

Hexadecimal

RGB

RGBA

HSL

Padding

Margin

Pixels

Percentage

rem

vw and vh

Styling everything with inline CSS

Using IDs for reusable styles

Confusing margin and padding

Using width when max-width is more appropriate

Fighting CSS with !important

Forgetting interactive states

Using too many unrelated rules

Further Reading

MDN — CSS

MDN — CSS First Steps

MDN — CSS Selectors

MDN — CSS Properties

MDN — CSS Box Model

MDN — CSS Flexbox

MDN — CSS Grid

MDN — CSS Cascade

MDN — CSS Specificity

MDN — CSS Custom Properties

web.dev — Learn CSS

CSS-Tricks — Almanac