[CSS: Syntax Basics] Rules, Selectors, Properties & Values, Declarations, Comments — Documentation #82
Description
This sub-issue covers the Syntax Basics module of the CSS tutorial.
Contributors will document the core building blocks of writing valid CSS—rules, selectors, declarations, properties, values, and comments.
This issue corresponds to the following files:
syntax-basics
├── rules
│ ├── selector.mdx
│ ├── properties-and-values.mdx
│ ├── declaration.mdx
├── comments.mdxEach MDX file should teach:
- What the syntax component is
- Why it exists in the CSS language
- How it works within a rule set
- Clear code examples
- Best practices
- Pitfalls to avoid
- Visual breakdowns (selectors → declarations → properties → values)
Tasks
- Write documentation for selector.mdx
- Write documentation for properties-and-values.mdx
- Write documentation for declaration.mdx
- Write documentation for comments.mdx
- Include syntax diagrams (recommended)
- Add examples showing valid vs invalid CSS
- Add real-world use cases
- Ensure MDX formatting works in Docusaurus
- Add cross-links to Selectors, Typography, and Layout sections
Suggested Structure for Each File
- Definition
- Importance in CSS
- Syntax format
- Common examples
- Mistakes to avoid
- Best practices
- Browser interpretation notes
- Related links (Selectors, Box Model, Basics)
Expected Outcome
A foundational set of MDX documents that clearly explain the essential parts of CSS syntax.
These pages enable beginners to confidently read and write CSS before moving into selectors, layout systems, and advanced features.