# CSS
## CSS - Cascading Style Sheets
HTML is used to give structure to the page content. CSS was introduced to allow the browser to apply specific styling features such as colors, fonts, and positioning to the HTML elements on the page.
With CSS, we can use a stylesheet language to specify which styling properties we want to change for specific HTML elements.
### CSS Rules
To change the style of an element you must target the element using a CSS Rule.
A CSS rule is made up of **selectors**, **properties**, and **values**.
* A **selector** describes which HTML elements to style
* `h1` is the **selector**
* A **property** is the specific style to apply
* `font-size` is the **property**
* A **value** is the value for the property
* `1.5rem` is the **value**
* A **declaration** is the combination of the property and value
* `font-size: 1.5rem;` is the **declaration**
* A **rule** is the combination of the selector and its declarations
* `h1 { font-size: 1.5rem; }` is the **rule**
{% hint style="success" %}
**Check for understanding**. In the CSS code below, which parts are the rules, selectors, properties, values, and declarations?
{% endhint %}
```css
h1, h2, h3, h4, h5, h6, p {
color: #333;
margin-bottom: 2rem;
}
.box {
border: 1px solid #333;
}
```
###
### Three Methods for Applying Styles
**1. External Stylesheets** - styles are loaded from an external stylesheet referenced in a `` element. This is the **preferred method**, as all of the styles are maintained in one place and can be shared across web pages.
```markup
Jellies From the Deep
```
```css
// styles.css
a {
text-decoration: none;
color:red;
font-size:36px;
}
#pink-jelly {
color: deeppink;
}
#yellow-jelly {
color: #ff9900;
}
#orange-jelly {
color: #ff3300;
}
li:before {
content: '🎐'
}
```
**2. Embedded Stylesheets** - styles embedded directly in the html `
```
**3. Inline** - styles are specified as attributes directly on the HTML element to which you want to apply the style. This method is also discourages for the reasons explain for embedded styles.
```markup
Orange Jelly
```
---
# 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://chnn-anne.gitbook.io/html-css/html-css-intro/css-intro.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.