CSS Dot Notation Naming Convention

Question

I am getting started with learning CSS.

While looking through the tutorial on w3schools.

I realized some of the example start with

.awesom         


        

Answer 1

A dot in css is for what is called a class.

They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);

.my-first-class {
    background-color: #000;
    ...
}

and to apply this class to an HTML element, you would do the following

    ...

this would mean the body of the page would become black.

Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);

body {
    background-color: #000;
}

would directly reference the element on the page and do the same again.

The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);

body {
    background-color: #000;
}

.my-first-class {
    background-color: #FFF;
}

and now for some HTML;

    
This is the first line
    
This is the second line

This would produce a black page, with 2 white boxes with text inside them (try it out!)

Now for your last part of the question about p.one {...} CSS.

This is a reference to a

tag that has class="one" added to it,

...

That CSS will only work on a

tag with the one class added (as above).

---

Extra for experts...

There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)

Much like a class, you can have an id on an HTML element;

and to add CSS style to this, you would put (in the CSS);

#my-first-id {
    ...
}

and that would style all elements with that id added.

Hopefully that helped answer all the parts, ask again if you need an even better explanation :)