> For the complete documentation index, see [llms.txt](https://dotnetweb30-ke.gitbook.io/ke/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dotnetweb30-ke.gitbook.io/ke/construction-web/javascript-html-css/css-simple-style-rules.md).
# CSS: Simple Style rules
CSS provides the vocabulary to tell a web browser things like, “I want my headings to be really big and my sidebar to appear on the left of the main article.” HTML doesn’t have the terminology to make those kinds of layout decisions—all it can say is, “that’s a heading and that’s a sidebar.”
### css stylesheets
CSS stylesheets reside in plaintext files with a `.css` extension. Create a new file called `styles.css` in our `hello-css` folder. This will house all our example snippets for this chapter.
```css
body {
color: #FF0000;
}
```
A CSS “rule” always start with a “selector” that defines which HTML elements it applies to. In this case, we’re trying to style the `` element. After the selector, we have the “declarations block” inside of some curly braces. Any “properties” we set in here will affect the `` element.
`color` is a built-in property defined by the CSS specification that determines the text color of whatever HTML elements have been selected. It accepts a hexadecimal value representing a color. `#FF0000` means bright red.
### linking a css stylesheet
If you try loading either of the HTML pages in a browser, you won’t see our stylesheet in action. That’s because we didn’t link them together yet. This is what the HTML `` element is for. In `hello-css.html`, change ``to the following:
```markup
Hello, CSS
```
This `` element is how browsers know they need to load `styles.css`when they try to render our `hello-css.html` page. We should now see blindingly red text everywhere:
Note that there’s no *direct* connection between the browser and our stylesheet. It’s only through the HTML markup that the browser can find it. CSS, images, and even JavaScript all rely on an HTML page to glue everything together, making HTML the heart of most websites.
### css comments
Notice that comments in CSS are a little different than their HTML counterparts. Instead of the `` syntax, CSS ignores everything between `/*` and `*/` characters.
### setting multiple properties
You can stick as many properties as you want in the declarations block of a CSS rule.
```css
body {
color: #414141; /* Dark gray */
background-color: #EEEEEE; /* Light gray */
}
```
### selecting different elements
Of course, you’ll want to apply styles to elements other than ``. For that, simply add more CSS rules with different selectors. We can change the font size of our `
` headings like so:
```css
body {
color: #414141; /* Dark gray */
background-color: #EEEEEE; /* Light gray */
}
h1 {
font-size: 36px;
}
```
And, if you want to alter `h2` headings, add another rule:
```css
h2 {
font-size: 28px;
}
```
### units of measurement
Many CSS properties require a unit of measurement. There’s [a lot of units](https://developer.mozilla.org/en-US/docs/Web/CSS/length)available, but the most common ones you’ll encounter are `px` (pixel) and `em`(pronounced like the letter *m*).
The `em` unit is very useful for defining sizes relative to some base font. In the above diagram, you can see `em` units scaling to match a base font size of `12px`, `16px`, and `20px`. For a concrete example, consider the following alternative to the previous code snippet:
```css
body {
color: #414141; /* Dark gray */
background-color: #EEEEEE; /* Light gray */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
```
This sets our base font size for the document to `18px`, then says that our `
` elements should be twice that size and our `
`’s should be 1.6 times bigger. If we (or the user) ever wanted to make the base font bigger or smaller, `em` units would allow our entire page to scale accordingly.
### selecting multiple elements
```
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
```
This defines the font to use for all of our headings with a single rule. That’s great, ’cause if we ever want to change it, we only have to do so in one place. Copying and pasting code is usually a bad idea for web developers, and multiple selectors can help reduce that kind of behavior quite a bit.
### defining fonts
`font-family` is another built-in CSS property that defines the typeface for whatever element you selected. It accepts multiple values because not all users will have the same fonts installed. With the above snippet, the browser tries to load the left-most one first (`Helvetica`), falls back to `Arial`if the user doesn’t have it, and finally chooses the system’s default sans serif font.
### list styles
The `list-style-type` property lets you alter the bullet icon used for `
`elements. You’ll typically want to define it on the parent `
` or ``element:
```css
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
```
### reusable stylesheets
Whenever we change a style in `styles.css`, those changes will automatically be reflected in both of our web pages. This is how you get a consistent look and feel across an entire website.
### the cascade
The CSS hierarchy for every web page looks like this:
* The browser’s default stylesheet
* User-defined stylesheets
* External stylesheets (that’s us)
* Page-specific styles (that’s also us)
* Inline styles (that could be us, but it never should be)
This is ordered from least to most precedence, which means styles defined in each subsequent step *override* previous ones. For example, inline styles will always make the browser ignore its default styles. The next few sections focus on the last two options because that’s what we have control over as web developers (in addition to the external styles we’ve already been working with).
We made an effort to get you started down the right path with external stylesheets. It’s important to understand page-specific and inline styles because you’ll most definitely encounter them in the wild, but external stylesheets are by far the best place to define the appearance of your website.
#### page-specific styles
s an example, let’s apply some styles to our `dummy.html` page by updating its `` element to this:
```
Dummy
```
These apply *only* to `dummy.html`. Our `hello-css.html` page won’t be affected. If you did it right, you should see bright blue text when you load `dummy.html` in a browser.
Anything you would put in our `styles.css` file can live in this `