Scribd
Upload
21 views

CSS_Selectors_Mindmap_and_Flashcards

The document provides an overview of CSS selectors, organized into a mind map that categorizes them into simple, combinator, and attribute selectors, along with pseudo selectors. It includes flashcards that summarize key selectors such as pseudo-classes, attribute selectors, and combinators, with examples of their usage. Additionally, it explains methods for linking CSS to HTML, including inline, internal, and external styles.

Uploaded by

padmaja281005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

CSS_Selectors_Mindmap_and_Flashcards

The document provides an overview of CSS selectors, organized into a mind map that categorizes them into simple, combinator, and attribute selectors, along with pseudo selectors. It includes flashcards that summarize key selectors such as pseudo-classes, attribute selectors, and combinators, with examples of their usage. Additionally, it explains methods for linking CSS to HTML, including inline, internal, and external styles.

Uploaded by

padmaja281005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Selectors: Mind Map & Flashcards

Mind Map

CSS SELECTORS - MINI MIND MAP

+---------------------+
| CSS SELECTORS |
+---------------------+
|
+-------------------------+----------------------------+
| | |
Simple Selectors Combinator Selectors Attribute Selectors
| | |
+---+---+---+---+---+ +----+----+----+----+ input[type="text"]
|Tag |Class| ID| Group| * |descendant| > | + | ~ |
| p |.box |#id |div,p| all | |child|adj|gen sib |
|
+-- Pseudo Selectors
|
+-----------+--------------+
|Pseudo-class| Pseudo-element
|:hover, | ::first-line
|:focus | ::before

Flashcards

FLASHCARDS: QUICK RECAP!

1. Pseudo-class
Selector: a:hover
Description: Applies style on hover.
Example:
a:hover { color: blue; }

2. Attribute Selector
CSS Selectors: Mind Map & Flashcards

Selector: input[type="text"]
Description: Selects input fields with type=text.
Example:
input[type="text"] { border: 1px solid black; }

3. Child Combinator
Selector: ul > li
Description: Styles direct <li> children of <ul> only.
Example:
ul > li { list-style-type: square; }

4. Descendant Selector
Selector: div p
Description: Styles all <p> inside a <div>.
Example:
div p { color: gray; }

5. Universal Selector
Selector: *
Description: Styles all elements.
Example:
* { margin: 0; padding: 0; }

How to Link CSS in HTML

LINKING CSS TO HTML

1. Inline Style:
<h1 style="color: red;">Hello</h1>

2. Internal Style (in <head> of HTML):


<style>
p { color: green; }
</style>
CSS Selectors: Mind Map & Flashcards

3. External Style (best practice):


- Save your CSS in a file called style.css
- Link in HTML like this:
<link rel="stylesheet" href="style.css">

You might also like