# Basic CSS
CSS, as we know, is the coding language we use to style our website. It allows us to add color, formatting, cool fonts, and more.
{% hint style="success" %}
**Task:**
Go to the `style.css` file in Repl and copy-paste the following code.
{% endhint %}
```css
body {
background-color: white;
}
```
Update your website and see how it looks. Does it change? Now try changing the `white` color to `MediumTurquoise`. Update and see how it looks.
This is an example of a CSS rule. It is the building block of CSS, and is what we will be using to make our site look good.
{% hint style="info" %}
Don't like the color? HTML/CSS has 140 different pre-set colors for you to choose from. You can view the different options [here](https://www.w3schools.com/colors/colors_groups.asp). Feel free to use whichever color you want!
{% endhint %}
## How CSS Works
If you go back to your `index.html` file, you will see the following line of code:
```html
```
This tells Repl that a special file called a "stylesheet" exists and to use it as a guide to format your website.
Stylesheets are made up of **rules**, which are essentially instructions. In this case, the curly braces `{}` and the `body` define a new set of rules. The word `body` at the front of the word is called the **selector**, as it specifies that the rules within the braces are to be applied to the `` element.
Each rule is composed of:
1. A property (in this case, "background-color") followed by a colon.
2. A value for the property (in this case, any of the 140 colors linked above).
3. A semicolon at the end.
## Adding Rules To Text
This concept of CSS rules can be extended to text.
{% hint style="success" %}
**Task:**
Add the following rules to your `` selector:
```css
font-family: "Tahoma", sans-serif;
color: Indigo;
```
It should be indented the same way as the `background-color` property.
{% endhint %}
The `color` property controls **just text in general** (`
`, `
`, `
`, etc). Again, use the list of colors above to make a good color choice.
The `font-family` property controls the font used by the website. Feel free to change the font to your liking, but for now, only choose from these fonts:
* Arial (sans-serif)
* Verdana (sans-serif)
* Helvetica (sans-serif)
* Tahoma (sans-serif)
* Trebuchet MS (sans-serif)
* Times New Roman (serif)
* Georgia (serif)
* Garamond (serif)
* Courier New (monospace)
* Brush Script MT (cursive)
## Using Separate Rules
You don't have to format *everything* in the body the same way. Let's say you would like the `
` element to be colored `DarkMagenta`, the `
` to be `RebeccaPurple`, and the rest of the elements to remain the color you set in the `body` selector.
You can achieve this by writing separate rules:
```css
body {
background-color: MediumTurquoise;
font-family: "Tahoma", sans-serif;
color: Indigo;
}
h1 {
color: DarkMagenta;
}
h2 {
color: RebeccaPurple;
}
```
While the `
` and `
` elements are used *inside* the `` tags, giving them special, separate rules trumps what was said before.
Experiment with writing rules for the different text elements used in your website. Try to keep things varied, but still with some sort of structure. Remember, someone else will be reading your website. You want your coloring to be interesting, not irritating.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-4-using-css/basic-css.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.