The Café Tutorial 5

How does the browser know to enlarge the text for the headings? All browsers have built-in styles that they use when you don't provide a style sheet, or embedded or inline styles. There's a resident style sheet that determines the amount of padding, margin, font size, font style among other things for your document. This is why you would frequently see the generic comment margin and padding zero'ing rule, ie * { padding:0; margin:0; }, at the top of people's style sheets. They want to get rid of all the browser padding and margins and start fresh.

The elements that I used to mark up the document are mostly block level elements. The browser treats block level elements as boxes which it stacks on top of one another. To show you how that looks, I gave the block level elements a red background and inline elements white bg. Only the "cinnamon bun" is an inline element. You can see the block level vs inline elements here.

I want to change the browser styled headings and fonts so I will add a "style" element to my document using the syntax shown below. This is an example we looked at before:


This type of style element is called an "embedded style sheet" where you link your styles directly into your HTML document. After your style tag, you list your CSS rules one after another using CSS Rule Syntax.