> For the complete documentation index, see [llms.txt](https://certil-remy.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://certil-remy.gitbook.io/learn/css/untitled-1.md). # introduction-to-css-code-along ## Introduction It's time to see some CSS code in action. [Codepen](https://codepen.io/) is a great tool to easily test HTML and CSS code and it's what we will use for our example. ### Code Example HTML Structure This [Pen](https://codepen.io/curiositypaths/pen/WddzQM?editors=1100) (saved [Codepen](https://codepen.io/) document) contains an HTML document with the following structure: * a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element (root of the html content. In [Codepen](https://codepen.io/) we will not see a body tag, it's implicitly present and wraps all the HTML content) * an [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) tag to define our content as self-contained unit (e.g. blog post, newspaper article) * an [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) tag to wrap the [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)'s header text * [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) tags to wrap the [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)'s unstructured text * [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) tags to represent un-ordered lists * [`
  • `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) tags to wrap each list item ### Code Example CSS Structure The [Pen](https://codepen.io/curiositypaths/pen/WddzQM?editors=1100) also includes commented out CSS Code to (`/* this is a CSS comment */`): * Set the background of the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element (whole document) to `#00b3e6` (light blue) * Sets the [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element width to `700px` * Centers the [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element * Sets the font family of the [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element to `Helvetica Neue`. Alternative fonts are provided in the event `Helvetica Neue` is not available on your computer * Set the background of the [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element to `white` * Add 30px of white space to perimeter of the [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) * Set the `font-size` to `22px` for the element with `id` `main-header` * Set the `font-style` to `italic` for elements containing the class `perspective-questions` ## Code Along Instructions Open the [Pen](https://codepen.io/curiositypaths/pen/WddzQM?editors=1100) in a separate browswer tab to follow the code along instructions. ### Pen Screenshot [![](https://camo.githubusercontent.com/3f67975e2ab71a080a8bf34e85f2c7a9ed6e3209/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f636f646570656e2e6a706567)](https://camo.githubusercontent.com/3f67975e2ab71a080a8bf34e85f2c7a9ed6e3209/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f636f646570656e2e6a706567) ### Unstyled HTML Document Screenshot [![](https://camo.githubusercontent.com/ea8ade2bd67338cc127cb881a1601e19151b8ccf/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f756e7374796c65642d636f646570656e2e6a706567)](https://camo.githubusercontent.com/ea8ade2bd67338cc127cb881a1601e19151b8ccf/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f756e7374796c65642d636f646570656e2e6a706567) ### Styled HTML Document Screenshot [![](https://camo.githubusercontent.com/94c46c35664fb9d7a8cd9783841e2dde92120e57/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f7374796c65642d636f646570656e2e6a706567)](https://camo.githubusercontent.com/94c46c35664fb9d7a8cd9783841e2dde92120e57/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f7374796c65642d636f646570656e2e6a706567) All the CSS code you need to successfully modify the page is already included but commented out. All you need to do is uncomment all the `CSS declarations` (`property-name`:`value`) one by one. ### CSS Declarations Uncommenting Steps [![](https://camo.githubusercontent.com/38635dfb8a6e343744b94fe1c86e20d4eadcda9b/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f6373732d636f64652d636f646570656e2e6a7067)](https://camo.githubusercontent.com/38635dfb8a6e343744b94fe1c86e20d4eadcda9b/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f7765622d646576656c6f706d656e742f6373732d636f64652d636f646570656e2e6a7067)