How to start CSS for beginners?

CSS (Cascading Style Sheets) is a popular style sheet language that’s used for describing documents written in markup languages, such as HTML. We can use CSS files and CSS code to manipulate the style, formatting, layout, and presentation of our web pages. In this CSS tutorial, we’ll cover some CSS basics, such as Font Style, Text, and Color. Let’s get started!

Selectors and Specificity#

To build robust and predictable styles in CSS, it’s crucial to understand selectors (how elements are targeted) and specificity (how conflicts are resolved). This concept belongs near the start of any CSS basics tutorial—right before “CSS Text.”

Common Selector Types#

• Element selector — Targets HTML tags directly:

  p { color: red; }
  

• Class selector — Uses a period prefix for reusable styling:

  .highlight { background: yellow; }
  

• ID selector — Uses a hash for unique elements:

  #header { font-size: 24px; }
  

• Descendant selector — Targets nested elements:

  .nav a { color: blue; }
  

• Child selector (>) — Targets only direct children:

  .card > p { margin: 0; }
  

• Attribute selector — Matches by attribute or value:

  a[target="_blank"] { color: green; }
  

Specificity Rules#

When multiple selectors match an element, CSS applies rules by specificity:

1. ID selectors outrank class selectors.
2. Class selectors outrank element selectors.
3. If specificity is equal, the later rule in the stylesheet takes precedence.

Why It Matters#

Mastering selectors and specificity ensures your styles apply as intended—without unexpected overrides. This foundational knowledge helps you debug CSS confidently and structure scalable stylesheets for real-world projects.

CSS Text#

CSS Text includes a lot of different properties for formatting and styling our text. Let’s explore some useful CSS Text properties:

CSS Text Decoration#

The text-decoration property allows us to add or remove decorative elements from our text. For example, if we want to remove an underline from a link, we can use the text-decoration: none; value:

There are other values that we can use to decorate our text using CSS, such as:

• Strikethrough: text-decoration: line-through;

• Overline: text-decoration: overline;

• Underline: text-decoration: underline;

Let’s see how they would look in an HTML document:

CSS Text Transform#

The text-transform property allows us to change letters to uppercase or lowercase. We can also use this property to turn the entire text into uppercase or lowercase letters, or we can capitalize the first letter of each word in the document.

CSS Text Align#

The text-align property allows us to set the horizontal alignment of text. Let’s take a look at how to left-align, right-align, and center-align text:

We can also manipulate the text direction like this:

CSS Text Spacing#

The CSS Text Spacing properties allow us to manipulate indentation, letter spacing, word spacing, white space, and line height.

text-indent:

letter-spacing:

CSS Text Shadow#

The text-shadow property allows us to add shadows to text:

CSS Color#

The CSS Text Color property allows us to manipulate things like text color and background color using color and background-color. In the following example, we’ll change the color of the text to blue and white, and the background color to grey and black.

CSS Color Values#

We can use the CSS Color Codes and Values to manipulate the colors of different aspects of our web page. We can also use RGB values, RGBA values, HEX values, HSL values, and HSLA values to specify color.

RGB values

RGB color values use the rgb() property. The RGB property takes three values. Each value can be represented as a percentage or a number between 0 and 255. The first number represents a red value, the second number represents a green value, and the final number represents a blue value. Not every browser supports RGB, so make sure to check before using it.

The RGB value for the color red is rgb(255,0,0).

RGBA values

RGBA color values are an extension of RGB values that specify the opacity of a color. This property takes four values. The first three values are the same as the values in RGB. The fourth value is called an alpha parameter. This number falls between 0.0 to 1.0.

HEX values

Hexadecimal color values are six-digit representations of color. Each code begins with a pound sign # and is followed by six numbers. The first two digits represent a red value, the second two digits represent a green value, and the final two digits represent a blue value.

The HEX value for the color red is #FF0000.

HTML Color Names

There are 140 HTML color names that are represented as HEX values. We can use these values to specify different colors within our web pages.

HSL values

HSL color values use hue, saturation, and lightness to determine color. The hue value is a degree on the color wheel that can fall between 0 and 360. The saturation value is a percentage that can fall between 0 and 100 percent. The lightness value is a percentage that can fall between 0 and 100 percent.

The HSL value for the color red is hsl(0, 100%, 50%).

HSLA values

HSLA values are an extension of HSL values that specify the opacity of a color. Similar to RGBA, HSLA takes four values, with the final value being the alpha parameter that indicates the opacity.

Advanced Color Techniques and Typography#

After learning CSS color values, the next step is exploring more advanced color and typography techniques. These elevate your designs from basic to polished and professional.

Color Enhancements#

• Opacity and RGBA / HSLA — Use partial transparency for layered effects:

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

  The last value in RGBA or HSLA sets the alpha channel (transparency).

• Gradients — Create smooth transitions between colors:

  background: linear-gradient(to right, red, blue);
  

  You can also use radial gradients for circular blends.

Typography Essentials#

• Font families and fallback stacks — Always define backups:

  font-family: "Open Sans", Arial, sans-serif;
  

  This ensures graceful fallback if a custom font fails to load.

• Font weight and line height — Improve readability:

  font-weight: 700;   /* bold */
  line-height: 1.6;   /* comfortable spacing */
  

• @font-face and custom fonts — Embed fonts directly:

  @font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2");
  }
  

  This allows you to use unique typefaces consistently across devices.

Why It Matters#

These color and typography tools help you move beyond static design—adding depth, readability, and style. Mastering them turns your CSS basics into visually rich, professional-grade interfaces.

CSS Font Style#

The font-style property allows us to set different font styles for our text. For example, we can make the font style “normal”, or we can make it “italic”. Let’s take a look:

Box Model and Layout Fundamentals#

Once you’ve mastered text and color, the box model becomes the next foundational concept in CSS. Every HTML element is rendered as a rectangular box made up of distinct layers.

The Four Parts of the Box Model#

• Content box — where text or child elements appear
• Padding — space between content and border
• Border — outlines the element’s padding and content
• Margin — space outside the element, separating it from neighbors

You can control element width and height precisely. Use:

box-sizing: border-box;

This makes the declared width include padding and border, preventing layout surprises when adjusting spacing.

Core Layout Properties#

• Display types — control how elements participate in layout:
  • block, inline, inline-block, none
• Float and clear — let elements flow beside each other or force new lines.
• Positioning modes:
  • static — default position in document flow
  • relative — positioned relative to its normal spot
  • absolute — removed from flow, positioned relative to the nearest ancestor
  • fixed — positioned relative to the viewport
• Visibility vs display:
  • visibility: hidden hides the element but keeps layout space
  • display: none removes it from the layout completely

Why It Matters#

Understanding the box model and layout fundamentals connects visual styling to real page structure. It helps you predict spacing, layering, and positioning — turning isolated styles into coherent, responsive layouts.

Pseudo-classes, Pseudo-elements, and Transitions#

To add interactivity and smooth visual feedback, CSS introduces pseudo-selectors and transitions. These features bring motion and responsiveness to otherwise static designs.

Pseudo-classes#

Pseudo-classes style elements based on their state or interaction:

a:hover { color: darkblue; }
a:active { color: red; }
input:focus { border-color: royalblue; }

Common pseudo-classes include :hover, :active, and :focus, which respond to user actions like hovering, clicking, or focusing on inputs.

Pseudo-elements#

Pseudo-elements let you style or generate specific parts of an element:

p::first-letter { font-size: 200%; font-weight: bold; }
p::before { content: "→ "; color: gray; }

These are powerful for adding decorative details or emphasizing parts of text without extra markup.

Transitions#

CSS transitions create smooth animations between property changes:

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: navy;
}

When hovered, the button color shifts gradually instead of changing instantly.

Why It Matters#

Pseudo-classes, pseudo-elements, and transitions help transform static pages into interactive, polished interfaces. Mastering them early helps learners understand how CSS handles user interaction and subtle motion — key elements of professional design.

Wrapping up and next steps#

CSS is an important part of web page creation. It allows us to take control of the design and layout of our web pages so we can create visually appealing websites. It also plays a big role in accessibility efforts because it separates the structure of our documents from the overall presentation. By using CSS styles, we can manipulate many different aspects of our pages, such as alignment, coloring, positioning, spacing, and more.

We covered a lot of important information about CSS styling today, but there’s still a lot more to learn. Some recommended topics to cover next include:

• CSS selectors
• CSS with HTML text, HTML tags, and HTML elements
• CSS background-image

To get started learning these concepts and more, check out Educative’s learning path Become a Front End Developer. In this hands-on learning path, you’ll gain a mastery of HTML, CSS, and JavaScript, which will allow you to create functional websites and web applications. By the end, you’ll have a valuable leg up on your web development journey.

Happy learning!

Continue reading about CSS#

• SASS for CSS: Advance your frontend skills with CSS preprocessor
• CSS Flexbox tutorial: How to use Flexbox properties
• React Bootstrap tutorial: Upgrade React apps with a CSS framework