HTML&CSS Basics: Basic Styling

Create a new CSS file and link it to your document

General Styling

Create a global box sizing that uses box-sizing: border-box
Remove the default margin from the <body> element
- Set it to 0 or 0px (both means the same)
Change the fonts of your document
- Define a default font for your document
- Define a different font for all heading elements

Specific Styling

Specific Styling should be based on classes
Add a padding to the header and main element within the body
- Use a padding value that looks good to you but use at least 16px
Style the overall header (the one in the body) of the document like this
- Align the text in the center using text-align: center
- Use a background-color for the header
- Use a padding within the header to create more room for the document title

Hints

You can use Google Fonts to load external fonts into your document.

Use general selectors (like the tag or universal selector) for general styling (i.e. all headings should use this font) and use classes for more specific styling.

You can use pre defined CSS colors i.e. salmon, hotpink or lemonchiffon. Other colors can be found [here])https://htmlcolorcodes.com/color-names/).

A selector list can help you to change styles for a list of elements.

h1,
h2,
h3 {
  color: dodgerblue;
}

Bonus

Use the two value padding shorthand to use different values for vertical and horizontal padding.

.header {
  padding: 48px 16px;
}

The content gets hard to read when the screen is too wide. You can use a max-width for the main element and center it using the margin.

.main {
  max-width: 800px;
  margin: 0 auto;
}

Example Solution and Comparison

Example solution for this task
Comparison to previous task

SzabiSch / bootcamp-schedule

HTML&CSS Basics: Basic Styling #22