Module 9 of 10 · 6 lessons
CSS Basics for Beginners: Selectors, Colors, Box Model
Enough CSS to make your HTML projects look finished.
HTML gives a page its structure and meaning. CSS (Cascading Style Sheets) (opens in a new tab) decides how it looks: colors, fonts, spacing and size. Treat this module as a short tour. A full CSS course would take weeks. You get enough to make your HTML projects look finished and to see how the two languages fit together.
You start with the style attribute, the fastest way to style one element, and find out why it gets messy on a real site. The style element and selectors moves styles into the head and introduces type, class and id selectors, so one rule can style many elements. External stylesheets shows one .css file, linked with <link rel="stylesheet">, styling a whole website. Once that file gets long, an online tool such as CSS Editor (opens in a new tab) can tidy, format or minify it.
Then you style real content. Colors and fonts covers color values, backgrounds, font families and sizes, with a note on readable contrast as defined in WCAG 2.2 Contrast (Minimum) (opens in a new tab). The box model shows that every element is a box of content, padding, border and margin. Once you see the boxes, spacing in CSS stops being a mystery.
Knowing where HTML stops and CSS starts keeps your markup clean. You pick each element for its meaning and let CSS do the visual work. Choosing a tag for its default look is the habit to drop.
The module ends with Style Your Card, a project that turns a plain business card into a polished one. Plan about an hour.
What you will learn
- Describe what HTML does and what CSS does
- Style elements with the style attribute, the style element and outside files
- Select elements by type, by class and by id
- Set colors, backgrounds, fonts and text sizes with readable contrast
- Control spacing with padding, border and margin in the box model
- Style a whole component from plain HTML
Lessons
- The style Attribute Change how one element looks by writing CSS in its style attribute.
- The style Element and Selectors Style many elements at once using a style element with element, class and id selectors.
- External Stylesheets Share one stylesheet across pages, then override it with your own rules.
- Colors and Fonts Set text and background colors, pick fonts with fallbacks and size your text.
- The Box Model Control an element's size and spacing with width, padding, border and margin.
- Project: Style Your Card ProjectTurn a plain business card into a styled one with everything from this module.
Frequently asked questions
What is the difference between HTML and CSS?
HTML says what the content is: headings, paragraphs, links, images and forms. CSS says how it looks: colors, fonts, spacing and layout. With the two kept apart, you can redesign a whole site by editing the stylesheet and never touch the HTML. Your markup also keeps its meaning for browsers, search engines and screen readers.
How do I link a CSS file to HTML?
Put a <link> element inside the <head>: <link rel="stylesheet" href="style.css">. The href is the path to your CSS file, counted from the HTML page. Every page with this line gets the same styles, and that is why almost every website uses an external stylesheet. The W3C CSS Validation Service (opens in a new tab) will catch typos in the file.
What is the CSS box model?
The browser draws every element as a rectangle with four layers. The content sits in the middle. Padding surrounds the content, a border surrounds the padding, and margin outside the border keeps other elements away. By default, width and height set the content size only, so padding and border are added on top. box-sizing: border-box changes that.