# CSS

## Cascading Style Sheets, Why?

**HTML** has been designed to describe a **document's content but not it's display**.

{% hint style="danger" %}
Formatting tags (`<b>`, `<br>`, `<i>`) should not be used.&#x20;
{% endhint %}

{% hint style="success" %}
CSS should be used instead.

**Separation of Concerns:** CSS allows separation of content and design.
{% endhint %}

## CSS is quite powerful

<https://codepen.io/davidkpiano/pen/kkpGWj>

{% embed url="<https://codepen.io/davidkpiano/pen/kkpGWj>" %}

## How it works

### 1. Writing CSS

CSS syntax is basically composed of **selectors**, **properties** and **values**.

```css
selector {

    /* Comment your CSS! */
    property: value;
    ...

}
```

* The **selector**: allows you to select which elements in the page are concerned by this styling.
* The **property**: is the the styling property you want to control.
* The **value**: is the value you want to set on the property.

#### Example

```css
p {
    color: red;
    text-align: center;
}
```

### 2. Loading CSS

Except if you are using a framework, CSS is generally loaded using the HTML `<link>` tag.

```markup
<head>
    <link href="/assets/style.css" rel="stylesheet" type="text/css">
</head>
```


---

# 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://web-dev-guide.wishtack.io/css.md?ask=<question>
```

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.
