Include a title. The title is the text on the browser tab. It is written between an opening and closing title tag. A title should be short. You can choose something like “Happy Birthday!” for your birthday card. Declare an encoding. This is to make sure that the text in your birthday card is displayed correctly. You should choose UTF-8 as an encoding, especially if you’re not writing your card in English, since it is very common and supports characters that are not Latin letters, numbers or punctuation. If your text editor provides an option to save in different encodings, make sure to choose the one you declared. Note that instead of writing a closing meta tag, you write a / before the >. Your HTML file should now look like this (the spaces/indentation is not required, but makes it more readable):

It will show an empty page with “Happy Birthday” as the title.

Use an h-tag to add a heading. There are levels of headings from 1 to 6, with level 1 being the biggest and level 6 the smallest. A level 1 heading is declared with the h1 tag, level 2 with the h2 tag, and so on. Put each paragraph of text between an opening and closing p tag. Text between an opening and closing strong tag will be printed bold by default, the em tag will make it italic. Put text that is inside a paragraph that you want to have a special style, for example another color or font or size, into a span. Assign the span some descriptive class, for example “redText” if you want to change the text colour to red. You can also assign an entire paragraph a class. An example of what your HTML could look like now (replace the words as you see necessary and it will still work):

Happy Birthday, Karl!

You are 15 years old now.

I sincerely wish you success and happiness in your future life.

You're a great person!

–Your friend, Daniela

You can use both RGB colours and colour words. For example, you can use both “#FF0000” and “red” to create a bright red. A complete list of colour words an the corresponding codes can be found here. A possible combination could be: #birthdayCard { background: darkorange; color: #111111; } Connect the HTML with the CSS. Save your CSS file. Go into the head of the HTML file and add the following line: Replace “birthday. css” with the name of your CSS file if it’s something else. Then save and reload the page.

#birthdayCard { background: darkorange; color: #111111; width: 25%; min-width: 300px; }

Solid is a normal border with no special appearance. Other possible border styles are dotted, dashed, double, groove, ridge, inset and outset. #birthdayCard { background: darkorange; color: #111111; width: 25%; min-width: 300px; border: 8px solid orange; border-left: 10px solid #DD0000; }

Padding is used to set off the elements inside the div from the div border. Margins are used to set off the div from whatever is outside of it, in this case the page border. For both margins and padding, you can specify either one or four values. If you specify four values, each of them is for a different side. If you specify one value, it will be used for all four sides. #birthdayCard { background: darkorange; color: #111111; width: 25%; min-width: 300px; border: 8px solid orange; border-left: 10px solid #DD0000; margin: 10px; padding: 20px; }

#birthdayCard { background: darkorange; color: #111111; width: 25%; min-width: 300px; border: 8px solid orange; border-left: 10px solid #DD0000; margin: 10px; padding: 20px; } . redText { color: #CC0000; } . signature { text-align: right; } strong { font-size: large; color: #CC0000; }