# CSS Style Guide
1. List out selectors in order of tag, class, and id.
- Within each section of the above, list both selectors and properties in alphabetical order.

2. Group related class selectors together
- e.g.: .btn, .btn:hover, btn:visited
3. Space between the colon and value in a property

**Do Not**
- Avoid overriding colors defined by parent component CSS stylesheets unless absolutely needed

<br/>

#### Tag Selectors

p {
    attribute: x;
    battribute: y;
    cattribute: z;
}

<br/>

#### Class Selectors

.class {
    attribute: x;
    battribute: y;
    cattribute: z;
}

<br/>

#### ID Selectors

#id {
    attribute: x;
    battribute: y;
    cattribute: z;
}

<br/>

#### Element Customization
1. Buttons

<br/>

.exButton{
    border-radius: 5px;
    transition: .3s;
}

.exButton:hover{
    border-radius: 5px;
    transition: .3s;
}

Inline Styling
-
- **Inline Styling should be avoided whenever possible. Inline styling can cause significant problems across large code bases.
- **If there is a specific use case in which inline styling can not be avoided, please communicate this to the project team.

Note:
- There should not be a space in-between the colon and value
- There should be a space seperating each property-value pair

# Header
CSS stylesheets should have a header with the name of person who created the class

/////////////////////////////////////////////////////
//
//  Name: Some CSS stylesheet
//  Author: Some Author
//  Description: CSS stylesheet for some component
//
///////////////////////////////////////////////////