Can a div class name be anything?


#1


https://www.codecademy.com/en/courses/make-a-website/lessons/closer-look-css/exercises/class-selectors?action=resume

In this exercise the div class in labeled hero. I have never seen this class in my previous lessons. Can div classes be named anything arbitrarily as long as they match the css? Thanks!

Replace this line with your code.


#2

The purpose of a div's class name is to be something as simple as possible. There are no predefined names that you have to use for a class name, so yes, they can be arbitrary as long as they match the CSS.

Regards,
Barry Allen


#3

@rfmaldon,

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .myClass1

HTML Elements can also carry attribute's
like:
the **id="id-name-as-string"
the **class="class-name1 class-name2"

In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .class-name1
OR
the Cascading Style Sheet syntax,
you have to prepend-a-hash to the id-name
so the CSS will interpret it as an id-attribute
So in the file style.css you will find an object
identified by #id-name-as-string

An object is encapsulated in a pair of curly-brackets-{ }
and contains one or more properties.
Each property consists of a property-key and it's associated Value
A property-definition is terminated with a semi-colon-;

Thus in your style.css file you would have an object

#id-name-as-string {
   color: green;
}
.class-name1 {
   color: red;
}

You could also present the color-Value
in the so-called Red Green Blue format.
Depending on the Browser you use
[255,255,255] for white
or
#FFFFFF for white

Thus you could have used

#id-name-as-string {
   color: #00FF00;
}
.class-name1 {
   color: #FF0000;
}

If you add a class-attribute to a HTML-Element it is NOT a must
to have a corresponding definition in your CSS file.....!!!!


#4

Clears up everything! thanks


#5

Very thorough answer a little advanced for what i need it but very enlightening.


#6

You're welcome @rfmaldon... Keep coding hard :smile:!

Regards,
Barry Allen