Chapter Summary: Color (9), CSS Selectors (12) and CSS Classes (13&14) (with questions)
Method 1: The IN-LINE method of adding style to an h2 element.
This is an H2 ELEMENT.
It is composed of an opening and a closing tag.
<h2>CatPhotoApp</h2>
The COLOR ATTRIBUTE is inside the h2 opening tag.
Key features include quotation marks.
<h2 style="color:blue">CatPhotoApp</h2>
This is a STYLE ELEMENT.
It is composed of an opening and a closing tag.
<style>
</style>
Method 2: The CSS SELECTOR method of adding style to an element.
The H2 STYLE SELECTOR is between the opening and closing style tags.
Key features include: a reference to “h2”, opening and closing curly brackets; and a semi-colon. Note: It should be on one line, not 3.
<style>
h2 {color: blue;}
</style>
Method 3: The CSS DECLARATION method of adding style to an element.
The CLASS DECLARATION* is between the opening and closing style tags. Key features include: a period.
Note: It should be on one line, not 3.
In Ch. 14, the author refers to this as a Class Selector* …
The CLASS ATTRIBUTE* is inside the h2 opening tag. Key features include: the absence of a period and quotation marks.
…And this as a Class Declaration* (contradicting the previous chapter).
<style>
.blue-text {color: blue;}
</style>
<h2 class='blue-text'>CatPhotoApp</h2>
Questions:
- Is this right?
- Do the quotations marks have to be double (" ") or can they be singles (’ ')?
- In in Method-2, this is an “h2 Selector”: h2 {color: blue;}
Is this, in Method-3, a “Text Selector”: .blue-text {color: blue;} - In Ch. 13 “CSS Classes”, the author refers to two different things as a “declaration”.
a) .blue-text {color: blue;}
“Here’s an example CSS class declaration:”
b) style=“color: red”
“In your HTML elements’ class declarations,
classes shouldn’t start with a period.”
Are they, in deed, BOTH “declarations”?
Then in Ch. 14, the author contradicts Ch. 13.
Cheers!