Use a CSS Class to Style an Element -- typo?

Use a CSS Class to Style an Element -- typo?
0

#1

This contradicts itself.

From the text:
"Here’s an example [ of a] CSS class DECLARATTION:…

You can apply a class to an html ELEMENT like this…"

Okay, one is a declaration and the other is an element. Then it says:
“Note that in your CSS style ELEMENT, classes should start with a period. In your HTML elements’ class DECLARATIONS, classes shouldn’t start with a period.”

That appears to me to be backwards. Am I reading this wrong?

Cheers.


Chapter Summary: Color (9), CSS Selectors (12) and CSS Classes (13&14)** (with questions)
#2

It would probably be a little clearer if it stated “In your HTML elements’ class attribute, class names shouldn’t start with a period.”


#3

It says, "In your HTML elements’ class DECLARATIONS, classes shouldN’T start with a period.” But it does. No?

===
This page (and the one before it) should define it’s terms.

What is a “CSS style element”; is it the CSS Class Declaration (shown at the top)?

h2 selector?

c;ass attribute?

value?

property?


#4

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:

  1. Is this right?
  2. Do the quotations marks have to be double (" ") or can they be singles (’ ')?
  3. In in Method-2, this is an “h2 Selector”: h2 {color: blue;}
    Is this, in Method-3, a “Text Selector”: .blue-text {color: blue;}
  4. 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!


#5

This does not show the code as I wrote it. It shows the result of the code; that is, the product. How do I write code pieces here for people to comment on or correct?

Cheers.


#6

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#7

They can be either single or double, but both have to be the same.

The following is an h2 Selector - h2 {color: blue;}

The following is a class declaration - .blue-text {color: blue;}

I previously gave an answer to this similar question. See above in the thread.