> For the complete documentation index, see [llms.txt](https://rpeltz.gitbook.io/introduction-to-web-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rpeltz.gitbook.io/introduction-to-web-development/week-2-css/project-styling-subject-of-interest.md).

# Project: Styling Subject of Interest

### Adding CSS to Subject of Interest Project

In this project, we will add style, aka CSS, to the Subject of Interest Project completed in the HTML Chapter.   We'll focus on a few efforts, but you are encouraged to try CSS, which is not mentioned in the list of requirements for this project.

The layout for the HTML Subject of Interest web page is left-aligned.  The font is the browser's default, and its color is black.  The background color is white. This is the default if no other CSS is applied. In this exercise, we will:

* center all the elements on the page
* add text and background colors
* add font family

### Center Items on the Page

Review the notes on Box Model and Flexbox.

Try these techniques by applying them to the HTML Assignment where you described a subject of interest.

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FQrlty4U3HzwJBpv8XQ6B%2Fimage.png?alt=media&amp;token=b5df95b0-ffc1-4514-a720-834f47180370" alt=""><figcaption><p>Left Aligned Subject of Interest</p></figcaption></figure>

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FsnvYrfTeMAYkVlWZXto9%2Fimage.png?alt=media&amp;token=575c3aaf-baf1-4996-bec6-52a6618ae944" alt=""><figcaption><p>Centered Web Page</p></figcaption></figure>

### Applying CSS to Center the Content

Study this [code](https://github.com/rebeccapeltz/CenterPage) and [web page](https://www.beckypeltz.me/CenterPage/) to visualize how the different ways of centering are applied.  Use the resources below to make color and font changes.

### Resources

[W3 Schools CSS Reference](https://www.w3schools.com/cssref/index.php)

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
