fixed grammar + clarified use of period in HTML (#30683)

* fixed grammar + clarified use of period in HTML

* fix: added comma
This commit is contained in:
Eddie Melendez
2018-12-12 19:06:26 -05:00
committed by Randell Dawson
parent 557e4a5504
commit a961b830af

View File

@ -3,7 +3,7 @@ title: CSS Classes
---
## CSS Classes
Classes are an efficient way of grouping HTML elements so that they can share the same styles. CSS (Cascading Style Sheets) classes can be used to arrange and decorate web page elements.
Classes are an efficient way of grouping HTML elements so they can share the same styles. CSS (Cascading Style Sheets) classes can be used to arrange and decorate web page elements.
When writing HTML, you can add classes to an element. Just add the attribute `class="myclass"` to the element. Multiple elements can have the same class, and one element can have multiple classes. You can assign multiple classes to an element by adding all the desired class names separated by a space to the `class` attribute in HTML.
@ -12,7 +12,7 @@ When writing HTML, you can add classes to an element. Just add the attribute `cl
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
```
You can then style these elements with CSS. Classes are referenced with a period (.) before them in CSS, but you should not put periods in your HTML.
You can then style these elements with CSS. Classes are referenced with period (.) before them in CSS, but you should not put periods in your HTML. `<div class="super-man">` notice how in the HTML the class name does not take a dot, or period.
```css
.super-man {
@ -72,9 +72,9 @@ In this example, border of the element would be green even if the class "voice"
**Note:** Class names are traditionally all lowercase, with each word in a multi-word class name separated by hyphens (e.g. "super-man"). This format is also known as kebab-case.
You can also combine classes in the same line:
You can also combine classes on the same line:
```css
.super-man .spider-man {
.super-man, .spider-man {
color: red;
background-color: blue;
}