---
# System prepended metadata

title: CSS CheetSheet
tags: [ACC, CSS]

---

###### tags: `CSS` `ACC`
# CSS CheetSheet
Looking for the most used/common attributes and what they are used for? 

- Look no further I might just have you covered.
- Here we will break it down 
- Here you can just get the attributes [List of CSS Attributes](/L5vW0qgyQ5-xDDtvBqY05w)

### Selecting an the element
There are 3 ways to select an element
- Element name
- Class Name
- Id name

###### Selecting the Element Name
The element name is selected by simply using it's name in the css for example the following html code:
```
<body>
    <header>
        <h1>Title of page</h1>
    </header>
</body>
```
In the CSS you would begin to style them like the code below:
```
body {
    Enter styling attributes here for the body element
}
header {
    Enter styling attributes for the header element here
}
h1 {
    Enter styling attributes for the h1 element here
}
```
So you can see you just use the element name and then the curly brackets to start styling.  We will go over what to put in those brackets shortly


###### Using the Class Name
When you have div elements or paragraphs you might not want them all to look the same so styling using the element name isn't ideal at this point so you would edit your html like so:
```
<body>
    <div>
        <p>Lets learn about me</p>
    </div>
    <div class="about">
        <p>some random text here</p>
        <p class="quote">Fun quote text here</p>
    </div>
</body>
```
Here we have 2 div tags 1 with a class name and 1 with out and 3 p tags 2 with out a class name and 1 with.  If we wanted to style this code we could do the following
```
body {
    Give body a background color 
}
div {
    Give all div elements a border
}
p {
    Make all p elements font a certain color
}
.about {
    This div I want to add a background color too and change the border maybe
}
.quote {
    This p tag I want the font to be italisized.
}
```
So you can see that we gave the elements we called by name some styling which will apply to all elements with that name, but we also use the class name to change or add additional styling attributes to just those elements with those class names.  And we call the class name with a . before it's name that was put in "" in the html. 
** You can reuse the class names over as many times you want in the html and every element with that class name will have the same styling that you gave it.

###### Using the id name
This is the least recomended and can only be used once per document. Typically id's in html are used for javascript functions or to point to a link that is internal to the same document....like further down the page.  However you can use the id for a link and css like so:
```
<body>
    <nav>
        <a href='#more'>Read more</a>
        <a href='index.html'>Home Page</a>
    </nav>
        <div>
        <p>Lets learn about me</p>
    </div>
    <div class="about">
        <p>some random text here</p>
        <p class="quote">Fun quote text here</p>
    </div>
    <div id='more'>
        <p>Now lets learn even more about me</p>
    </div>
</body>
```
Here we see we have 2 links.  the 1st link location is #more which points to the id more in the last div.  So when that link is clickedk the users browser will drop down to that div.  But say we also want to make sure that that div also has a uniqe look to it.  Well we would do the following:
```
body {
    Give body a background color 
}
div {
    Give all div elements a border
}
p {
    Make all p elements font a certain color
}
.about {
    This div I want to add a background color too and change the border maybe
}
.quote {
    This p tag I want the font to be italisized.
}
#more {
    I want this to be a different font color and background color
}
```
Here we added the #more to our css and it will take the attributes we tell it and apply them to that p tag that had the id of more. 

### Change colors
So now you know how to call the element you want to style.  Lets change colors

###### Background Color
Both of the following will change the selected elements background color.  
```
.container {
    background-color: blue;
}
nav {
    background-color: #0000ff;
}
```
For the class of container we used the actual name of blue but for the element nav we used it's hex code 

###### Font color
So now we can change the background color lets change the font color
```
.container {
    color: white;
}
nav {
    color: #ffffff
}
```
Again like the background color you can use the name of the color or the hex code.  
- So background-color changes the background-color and color changes the font.