<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw" -->

---
title: HTML &amp; CSS for Absolute Beginners: Understanding...
description: Understanding the basics of CSS, including syntax, formatting, and specificity, is fundamental for web development. This guide covers CSS rules, selectors,...
canonical: https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: HTML &amp; CSS for Absolute Beginners: Understanding Specificity and Basics of CSS | daily.dev
og:description: Understanding the basics of CSS, including syntax, formatting, and specificity, is fundamental for web development. This guide covers CSS rules, selectors,...
og:url: https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw
og:image: https://api.daily.dev/og/posts/psn7GpGBW.png
og:image:alt: HTML &amp; CSS for Absolute Beginners: Understanding Specificity and Basics of CSS
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML & CSS for Absolute Beginners: Understanding Specificity and Basics of CSS

**[Collections](https://daily.dev/sources/collections)** · 3 min read · 5 upvotes · 0 comments

## Summary

Understanding the basics of CSS, including syntax, formatting, and specificity, is fundamental for web development. This guide covers CSS rules, selectors, declaration blocks, and specificity hierarchy, emphasizing the importance of organized formatting. It also explains how to effectively use descendant selectors and development tools to debug and refine CSS in real-time.

## Content

## HTML & CSS for Absolute Beginners: Understanding Specificity and Basics of CSS

When learning web development, mastering the basics of HTML and CSS is essential. This article aims to provide a clear and concise explanation of CSS syntax, formatting, and the importance of specificity in styling web pages. Additionally, we will cover descendant selectors and the use of development tools to enhance your coding experience.

### CSS Syntax and Formatting

CSS (Cascading Style Sheets) is used to style and layout web pages. CSS rules are composed of selectors and declaration blocks:

```css
selector {
  property: value;
  property: value;
}
```

- **Selector**: Points to the HTML element you want to style.
- **Declaration Block**: Contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

Consistent formatting and indentation of CSS code make it easier to read and maintain. Here are some tips for formatting CSS:

- Use indentation to nest related rules.
- Group related properties together.
- Add comments to explain sections of your code.

### Understanding CSS Specificity

Specificity determines which CSS rule is applied to an element when multiple rules could apply. The specificity hierarchy goes as follows:

1. **Inline styles**: Styles added directly to an HTML element via the `style` attribute.
2. **ID selectors**: `#idName {}`
3. **Class selectors**: `.className {}`
4. **Element selectors**: `elementName {}`

An ID selector has the highest priority, followed by class selectors, and finally, element selectors. Understanding this concept is crucial for managing and predicting style conflicts. Specificity calculators can be beneficial tools for managing complex style sheets.

### Descendant Selectors

Descendant selectors allow you to select elements that are descendants of another element. Here is an example:

```css
parentElement childElement {
  property: value;
}
```

This rule targets `childElement` only if it is inside `parentElement`. Using descendant selectors efficiently can help you to maintain a hierarchical and organized structure in your CSS.

### Using Development Tools

Modern web browsers come with built-in development tools that are invaluable for debugging and refining your CSS. These tools allow you to:

- Inspect elements to see the currently applied styles.
- Modify CSS and see changes in real-time.
- Understand the cascade and inheritance of CSS rules.
- Measure performance and identify bottlenecks.

In conclusion, understanding and properly applying CSS specificity, along with structured formatting and the use of development tools, can significantly enhance your web development skills. By mastering these basics, you build a strong foundation for more advanced topics in HTML and CSS.

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#frontend](https://daily.dev/tags/frontend)

[View this post on daily.dev](https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"HTML & CSS for Absolute Beginners: Understanding Specificity and Basics of CSS","url":"https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw"},"datePublished":"2025-01-10T15:13:15.555Z","dateModified":"2025-01-10T15:13:50.903Z","description":"Understanding the basics of CSS, including syntax, formatting, and specificity, is fundamental for web development. This guide covers CSS rules, selectors,...","image":"https://i.ytimg.com/vi/LUDkXMXf3P8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/LUDkXMXf3P8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/html-css-for-absolute-beginners-understanding-specificity-and-basics-of-css-psn7gpgbw","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css,html,frontend","timeRequired":"PT3M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"HTML & CSS for Absolute Beginners: Understanding Specificity and Basics of CSS"}]}
```