Hello, I'm Alex
I'm a student at Stevens.
I'm a student at Stevens.
I like video games and photography.
``` The extra information inside the opening tag is called an attribute. `src` gives the image's location. Since `avatar.svg` is in the same folder as `index.html`, we can use its filename. `width` and `height` set its dimensions. The `alt` attribute provides a text alternative for the image. A screen reader can read it aloud, and the browser can display it if the image doesn't load. If you use a different picture, update this description to match. Unlike a paragraph, `img` doesn't need a closing tag. We can also add a link to another page. After the new paragraph, still before ``, add: ```html MDN web development docs ``` The `a` element creates a link, and `href` gives its destination. The words between the tags are what someone clicks. Here, the link takes us to MDN. It explains what HTML elements and CSS properties do and gives code examples. Giving the link a descriptive name helps someone know where it goes before opening it. Save and refresh again. You should have a heading, two paragraphs, a picture, and a link. Try opening the link, then use the browser's Back button to return. Replace the interests sentence with something about yourself. ## CSS So far, the browser has chosen the default font and spacing for our HTML. We can change those by writing CSS rules in `styles.css`. Each rule selects part of the page and gives it a set of styles. Open `styles.css` and add: ```css body { font-family: system-ui, sans-serif; background: #eef2ff; color: #172554; margin: 0; padding: 24px; } ``` Here, `body` is the selector. It tells the browser which element the rule applies to. Inside the braces, `{` and `}`, we write a property followed by its value. For example, in `color: #172554;`, `color` is the property and `#172554` is the value. The colon separates them, and the semicolon marks the end. This rule uses a system font, gives the page a pale background, and makes the text dark blue. The values beginning with `#` are color codes. `margin: 0` removes the body's default outside space, while `padding: 24px` adds space inside it. This keeps the content away from the edge of the browser window. `px` means CSS pixels, the units we're using for these sizes. Save your files and refresh the browser. You should see the new colors and spacing. If the page still looks the same, check that the HTML links to `styles.css` and that both files are in the same folder. We can give `main` its own styles as well. Add this below the first rule: ```css main { max-width: 600px; margin: 0 auto; background: white; padding: 24px; border-radius: 16px; } ``` Now the content sits inside a white card. `max-width` stops the content area from becoming wider than 600 pixels. `margin: 0 auto` gives it no top or bottom margin and uses automatic left and right margins to center it when there is room. The padding creates space inside the card, and `border-radius` rounds its corners. Try changing the padding in this rule from `24px` to `48px`. Before you refresh, think about which space should get larger. Compare the result, then change it back to `24px`. We can style the individual elements too. Add these rules below the others: ```css h1 { color: #1d4ed8; } img { border-radius: 16px; } a { color: #1d4ed8; } ``` The `h1` rule changes the heading's color, the `img` rule rounds the image's corners, and the `a` rule changes the link's color. Each selector affects its matching element. If you changed the color in the `h1` rule, would the paragraphs change too? Keep the supplied colors for now. The dark text is readable against the pale and white backgrounds. Light text on a light background would be harder to read. ## Finding answers Let's say we want the heading's text to be centered, but we want the paragraphs to stay as they are. We know where the heading's styles go, but we haven't learned which CSS property changes text alignment. Search Google for `CSS center text W3Schools` and open a result from `w3schools.com`. Look for the property that controls text alignment and the value that centers it. Then add that property and value to the existing `h1` rule in your CSS. Save and refresh to see whether it worked. Only the heading's text should be centered. Compare your change with someone nearby and explain why you added it to `h1`. If search isn't working, use the [W3Schools CSS text-align reference](https://www.w3schools.com/cssref/pr_text_text-align.php). You can also use the [MDN text-align reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align) if you want a more detailed explanation. You can use this approach whenever you need a property you haven't seen before. Start with the change you want to make, look for an example on W3Schools, and try it in your page. If you need more detail about how or why something works, check MDN. Check what the code does before adding more of it. ## Common problems When something doesn't look right, start with the last thing you changed. Fixing one thing at a time makes it easier to tell what caused the problem.| What you see | What to check |
|---|---|
| Old words or colors | Save the edited file, then refresh the correct browser tab. |
| Raw HTML text instead of a page | Check that the file is named `index.html`, and open it in a browser. |
| Content appears, but none of the styling does | Match `href="styles.css"` to the exact filename and folder. |
| A broken picture | Check that `avatar.svg` sits beside `index.html` and matches `src`. |
| One CSS rule does nothing | Check its selector, colon, semicolons, and both braces. |
| Strange text or links | Check that quotes and opening and closing tags are paired. |