---
# System prepended metadata

title: Party PalaceCSS Style Guide

---

# Party PalaceCSS Style Guide
1. List both selectors and properties in alphabetical order
2. Group class selectors together, and similarly group ID selectors together
3. Space between the colon and value in a property

<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 or elements with Party Palace branding should have the following properties

<br/>

```

.exButton{
    background: #F4C558;
    border-radius: 5px;
    border: none;
    transition: .3s;
}

.exButton:hover{
    background: #E69A3A;
    border-radius: 5px;
    border: none;
    transition: .3s;
    
}

```

2. Product Cards. Adjust width, height, and any other relevant properties as needed.

```

.card{
    background: #F4C558;
    border-radius: 5px;
    height: 285px;
    margin-right: 15px; 
    max-width: 250px;
    padding-top: 20px; 
    padding-right: 25px;
    padding-left: 25px;
    text-align: center;
    transition: .3s;
    width: 23vh;
}

.card:hover{
    background: #E69A3A;
    border-radius: 5px;
    height: 285px; 
    margin-right: 15px; 
    max-width: 250px;
    padding-top: 25px; 
    text-align: center;	
    transition: .3s;
    width: 23vh;
}


// if bigger text is needed use:
.label{
    color: white;
    font-size: 1.4em; 
    font-weight: bold;
}

// for smaller, orange, text
.smallLabel{
    color: #7C5B3E;
}

```



# HTML Style Guide