MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Before CSS can apply a single splash of color or change a font, it needs to know: "Who should I apply this style to?" 🎯
In CSS, the tool you use to target HTML elements is called a Selector.
In this lesson, we will explore the two most fundamental selectors in web design:
h1, p, button, etc.)Let us understand both using a fun school morning assembly analogy!
Imagine your entire school gathered in the playground for the 8:00 AM morning assembly:
+-------------------------------------------------------------------------+ | HOW SELECTORS TARGET STUDENTS | +-------------------------------------------------------------------------+ | 1. THE WHISTLE BLOWS (* Universal Selector): | | The Physical Education teacher blows a loud whistle. | | EVERY SINGLE STUDENT on the ground immediately stands at attention! | | | | 2. CALLING A CLASS (Element / Type Selector): | | The teacher announces: "Class 10 students, step forward!" | | Only students belonging to Class 10 step forward; | | students of Class 6, 7, 8, and 9 remain where they are. | +-------------------------------------------------------------------------+
*)The Universal Selector is represented by an asterisk symbol (*).
It matches and selects every single HTML element on the entire webpage — headings, paragraphs, lists, images, buttons, and containers alike!
In the code above, the asterisk * tells the browser: "Turn the text color of every single element on this page to slate dark gray!"
Professional web developers almost always use the universal selector at the very top of their CSS file for what is called a CSS Reset.
By default, every web browser (Chrome, Safari, Edge) adds its own unwanted margins and spacing to web pages. Developers use * to reset everything to zero for consistent layout:
Do not use * to set heavy styling properties like background-color, border, or font-size. Because * selects thousands of elements at once, applying heavy animations or shadows with it can slow down your webpage!
The Element Selector (also known as the Type Selector) targets HTML elements by their tag name directly.
Whenever you want all instances of an HTML tag to look consistent across your website, you use an element selector.
Let us combine both selectors in an HTML document:
* rule ensures there are no strange default gaps pushing elements around.h1 selector finds the main title and gives it a deep slate color.h2 selector finds the sub-heading and styles it sky blue.p selector automatically formats both paragraphs identically with clean text spacing.button selector turns the register button into a modern green pill button.| Scenario | Should You Use Element Selector? | Better Alternative |
|---|---|---|
Setting standard default styles for all body, h1, p, or table elements. | ✅ YES | Perfect use case. |
| Making just one specific paragraph red while keeping others black. | ❌ NO | Use a Class Selector (e.g. .warning-text). |
| Styling one unique button differently (e.g., Delete button vs Save button). | ❌ NO | Use distinct classes (.btn-delete, .btn-save). |
| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
Putting a dot before an element name (.p { color: red; }). | Write the tag name directly (p { color: red; }). | A dot (.) is strictly reserved for class selectors! The browser will look for <tag class="p"> which does not exist. |
Putting angle brackets in CSS (<p> { color: red; }). | Write just the tag name without brackets (p { color: red; }). | CSS does not use HTML angle brackets < >. |
Writing * { font-size: 20px; } to make headings big. | Style headings specifically (h1 { font-size: 32px; }). | If you set font size on *, it forces paragraphs, buttons, and captions to the same size! |
margin: 0; padding: 0; box-sizing: border-box;).h1, p, a, button) without any dots or brackets.Test your understanding with these multiple-choice questions:
*) at the start of a stylesheet?.h1 { color: blue; } instead of h1 { color: blue; } in your stylesheet?<p> tags, which paragraphs will be affected by p { font-size: 18px; }?assembly.html.<h1> tag: Welcome to Green Valley Public School<h2> tags: Notice Board and Upcoming Sports Meet<p> tags with text of your choice.<button> tag: Download Syllabus<style> block using:)** to set margin: 0; padding: 0; box-sizing: border-box;`.body to add font-family: Arial; padding: 20px; background-color: #f1f5f9;.h1 to make it dark navy blue (#1e3a8a).h2 to make it teal (#0d9488).p to give it a readable font size (16px) and gray color (#475569).button to give it a blue background with white text and rounded corners.In the next lesson, we will continue your web styling journey with Class and ID Selectors (CSS Syntax & Selectors Basics).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| CSS Syntax, Comments, and Code Structure | Class and ID Selectors |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.