> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/1-4-classes-and-ids.md).

# 1-4 Classes and IDs

With what you know so far, you are limited on customizing your website. What if you wanted each paragraph to look different??

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX6n2tQ_KtRH1XiKC%2FHTML%20and%20CSS%20No%20Classes.png?generation=1527608046056003\&alt=media)

## Class vs. ID

**Class** - use for multiple elements that you want to have the exact same format

```
<p class=”paragraphs”>Paragraph 1</p>
<p class=”paragraphs”>Paragraph 2</p>
```

**ID** - use for one element that you want to have a special format

```
<p id=”p1”>Paragraph 1</p>
```

## Syntax

![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX6n6dsN0f2LFh5x6%2FClasses%20and%20IDs%20Syntax.png?generation=1527608048022706\&alt=media) ![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX6n8saXuyHxj9f-0%2FHTML%20and%20CSS%20connected%20with%20Arrows.png?generation=1527608046060310\&alt=media) ![](https://3718926237-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDgX-RgU994GjN7nvcR%2F-LDgX6N0pHKbYL1KWUWR%2F-LDgX6nAh3UZNI6bRqts%2FClasses%20and%20IDs%20Website%20Preview.png?generation=1527608028440215\&alt=media)

## Resources

[Classes on W3Schools](https://www.w3schools.com/cssref/sel_class.asp)&#x20;

[IDs on W3Schools](https://www.w3schools.com/cssref/sel_id.asp)

## Assignment

Here is a [codepen file](https://codepen.io/jrsmithpike/pen/QgQbJR) that has been started for you with information about how to make good decisions with your smart phone. Click the Fork button at the top to be able to edit it. Leave the file name alone (“Classes and IDs Assignment - Smart Phone Safety Website”).

### Standard Deliverable

1\) Add one more smart phone tip to the bulleted list (this will make 5 total)

2\) Add a relevant image from the internet to the HTML

3\) Use a Class to format the font-family and color of all of the bulleted items (Reminder: this requires a change in your HTML for each bulleted item)

4\) Use an ID to format the font-size and background-color of ONLY the bullet point you added (Note: it is possible to have a Class and ID for the same HTML element - `<p id=”id-name” class=”class-name”>`)

### Advanced Deliverable

1\) Add a hyperlink to the source of the image OR make your image a clickable link

2\) Apply a ‘gradient background’ to your page. Investigate the syntax at W3Schools. (Hint: if you want to style an entire page, you can add the formatting to the `<html>` tag in your CSS)

## Code Review Exercises:

1\) IDs - [Seasonal IDs](https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/p/challenge-seasonal-ids)

2\) Classes - [Apples and Bananas Classes](https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/p/challenge-apples-and-bananas-classes)

3\) [Extra Lessons and Challenges](https://www.khanacademy.org/computing/computer-programming/html-css)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/intro-to-informatics-and-web-development/1-4-classes-and-ids.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.