How to Create an Awesome Birthday Card with HTML and CSS

Download Article

A fun coding project for beginners

Written by Travis Boylls

Last Updated: August 6, 2025 Fact Checked

Download Article

Creating the File

|

Creating the Head

|

Creating the Body

|

Formatting with CSS

|

Tips

It is common to make birthday cards out of paper. But maybe you want to send a birthday card to someone whose real address you don't know. Maybe you're learning to code and want to practice your skills. Well, you're in the right place. This wikiHow article will teach you how to make a birthday card using HTML and CSS.

Making a Quick Birthday Card with HTML

You can create separate HTML and CSS files and link them together, or you place your CSS in the head of your HTML file. Use HTML code to add the text and structure of the card, and CSS to add color, division classes, and style to HTML elements.

Part 1

Part 1 of 4:

Creating the File

Download Article

1

Open a text editor. You can use any editor that is pre-installed on your system: Notepad on Windows, TextEdit on Mac, Nano or Vim on Linux. If you prefer another text editor, you are welcome to use it.
2
Declare the document type. This is important so that the browser knows that this is an HTML file. Write the following into the text editor:
```
 <!DOCTYPE html> 
```
Advertisement
3
Add an opening and closing HTML tags. This is where your HTML code will go. To do so, type an opening <html> tag after the document declaration, and then add a closing </html> on the next line, or a few lines down. All your HTML will go between these two tags. Your code should now look like this:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 </ 
 html 
 > 
```

Part 2

Part 2 of 4:

Creating the HTML Head

Download Article

1

Add the opening tag for the head. Most items placed in the head are things that are not visible on the page. This includes metadata, the encoding language, CSS stylesheets, and more. Create the opening tag for the head by typing <head> below the "<html>" opening tag.
2

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. To create a title, type the title between the opening and closing title tags below the "<head>" tag (i.e., <title>Happy Birthday!</title>
3
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.
- To declare UTF-8 as your encoding, type <meta charset="utf-8" /> below the "<head>" tag.
- Note that instead of writing a closing meta tag, you write a / before the > .
4
Connect the HTML with the CSS. There are two ways you can do this. They are as follows:
- If you want to keep all your code in a single file, you can place your CSS in the head of the HTML file. To do so, place the opening tag <style> in the head of your HTML file, followed by a </style> on the next line. All of your CSS will go between these two tags.
- The other way to do this is to write all your CSS in a separate file (i.e., "birthday.css"). In this case, you would need to link your HTML file to the CSS file. To do so, enter <link rel="stylesheet" href="birthday.css"> in the head of your HTML file. Replace "birthday.css" with whatever you intend to name your CSS file.
5

Add the closing tag for your head. Once you input all the information that is going to go in the head, enter the closing tag </head> at the bottom of the head.

6

Review your HTML coding. Your HTML file should now look something like the following (the spaces and indentation are not required, but they make it more readable):

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Happy Birthday! </ 
 title 
 > 
 < 
 meta 
 charset 
 = 
 "utf-8" 
 /> 
 < 
 link 
 rel 
 = 
 "stylesheet" 
 href 
 = 
 "birthday.css" 
 > 
 </ 
 head 
 > 
 </ 
 html 
 >

Part 3

Part 3 of 4:

Creating the HTML Body

Download Article

1

Add the opening tag for the body. This goes below the head ("</head>") of the HTML file, but before the closing "</html>" tag. The body is where all the visible content will appear. Type <body> to create the opening tag for the body of your HTML file.
2

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. To add a level 1 heading, enter your heading text in between a <h1> opening tag and a </h1> closing tag. For a level 2 header, you would replace "h1" with "h2" instead.
3

Add some paragraph text. Put each paragraph of text between an opening <p> tag and a closing </p> tag.
4

Add some bold and italic text. Text between an opening <strong> and closing </strong> tag will be printed bold by default. Text between an opening <em> and closing </em> tag will make it italic.
5

Create a special class for special text. Put text that is inside a paragraph that you want to have a special style (i.e., another color, font, or size) into a <span class= tag. Assign the span some descriptive class name after the equals sign. For example, put "purpleText" in quotations after the equals sign if you want to change the text colour to purple (i.e., <span class="purpleText"> ). Then close the text class using a </span> tag. You can also assign an entire paragraph a class.

6

Put your content into a division "div." This will allow you to draw a border around it and to set its width. The div itself will not be visible before you create the border in CSS. Give the division class a descriptive name (i.e., <div ID="birthdayCard"> ). Unlike classes, IDs are unique, which makes more sense since you're going to create only one birthday card on this page. Close your division with a </div> closing tag. Your HTML code should look something like the following:

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Happy Birthday </ 
 title 
 > 
 < 
 meta 
 charset 
 = 
 "utf-8" 
 /> 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 div 
 id 
 = 
 "birthdayCard" 
 > 
 < 
 h1 
 > 
Happy Birthday, < 
 span 
 class 
 = 
 "redText" 
 > 
Karl </ 
 span 
 > 
! </ 
 h1 
 > 
 < 
 p 
 > 
You are < 
 span 
 class 
 = 
 "redText" 
 > 
15 </ 
 span 
 > 
years old now. </ 
 p 
 > 
 < 
 p 
 > 
I sincerely wish you < 
 strong 
 > 
success </ 
 strong 
 > 
and < 
 strong 
 > 
happiness </ 
 strong 
 > 
in your future life. </ 
 p 
 > 
 < 
 p 
 > 
You're a great person! </ 
 p 
 > 
 < 
 p 
 class 
 = 
 "signature" 
 > 
–Your friend, Daniela </ 
 p 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

7

Load your HTML file in your web browser. Be sure to save your text file as a ".html" file (i.e., "birthdaycard.html", not "birthdaycard.txt" or "birthdaycard.html.txt"). Then right-click the file and select the option to open it in your web browser. Right now, the text will look pretty plain with no colors or formatting. The "<span> elements should be invisible for now.

Part 4

Part 4 of 4:

Adding the Formatting Using CSS

Download Article

1
Open a new file in the text editor. Keep the HTML content open in case you need to adjust something. This new file will contain your CSS style, so save it with the .css extension, for example, as birthday.css .
- Alternatively, if you want to add your CSS to the same file, create some space in between the opening "<style>" and closing "</style>" tag.
2

Create a division for "birthdayCard." By creating a division, you can assign attributes to the "birthdayCard" division within your HTML document. Enter a hashtag (#) followed by division name (i.e., "birthdayCard"). Then enter an opening "{" curly bracket, followed by a closing "}" curly bracket a few lines down. All attributes for the division will go between these two brackets.
3
Set the background and default text colour. To set the default background color, type background: followed by the background color, followed by a semicolon (;). To set the default text color, type color: followed by the color you want to use for the text, followed by a semicolon(;). To keep things organized, place both attributes on a separate line.
- You can use both hexadecimal colours and colour words. For example, you can type the word "pink" to get a pink background, or you can use a hexadecimal code like "#FFEBFB" to get a more specific shade of pink (it's a pound sign, following the code). You can find specific hexadecimal codes here . The following is an example of what your division class section should look like so far:
  # birthdayCard { background : #FFEBFB ; color : #111111 ; }
4
Set the division width. As it is now, the division spans the entire window width. That doesn't look good. You should set the width to a fraction of the screen size and specify a minimum size so that it doesn't become too small on small screens. Type width: followed by a percentage number to set the width of the screen. To set the minimum width, type min-width: followed by the minimum width in pixels. Place a semicolon (;) after each attribute.
5
Draw a border. This will visually set off the card from the rest of the screen, making it look better. You can specify border width, colour, and style for all borders, or make some of them different. To set a border, type border: followed by the border width in pixels, the style, and the color. Separate each attribute with a comma (,). Place a semicolon after the border attributes.
- You can set attributes for the entire border, or you can type border-left: , border-right , border-top: , and border-bottom: to set different attributes for each side. You can give one side a brighter color, giving it a 3D effect.
- Solid is a normal border with no special appearance. Other possible border styles are dotted , dashed , double , groove , ridge , inset and outset .
6
Add padding and margins. Right now, the text is too close to the division border, and the div border is too close to the page border. This doesn't look good. To fix this, you can use padding and margins.
- Padding is used to set off the elements inside the div from the div border. To set the padding, type padding: followed by the padding width in pixels.
- Margins are used to set off the div from whatever is outside of it, in this case, the page border. To set the margin, type margin: followed by the width of the margin in pixels.
- For both margins and padding, you can specify the value for all sides, or for individual sides (i.e., "margin-left:"). If you don't specify a specific side, the same value will be used for all sides.

7

Add class and element styles. In a previous step, you had assigned paragraphs and spans to different classes. Until now, this hasn't been visible, but now, you should actually add the styles these classes are supposed to have. Defining a style for a class is done with a period(.) symbol, then the name of the class. Then you add an opening curly bracket ({) followed by a closing curly bracket (}) at the end of the class. A style for an element is done by writing the name of the element (without a period) and then the curly brackets. The following is a complete example of what your CSS should look like:

 # 
 birthdayCard 
 { 
 background 
 : 
 #FFEBFB 
 ; 
 color 
 : 
 #111111 
 ; 
 width 
 : 
 25 
 % 
 ; 
 min-width 
 : 
 300 
 px 
 ; 
 border-top 
 : 
 10 
 px 
 solid 
 #B863A6 
 ; 
 border-right 
 : 
 10 
 px 
 solid 
 #B863A6 
 ; 
 border-left 
 : 
 10 
 px 
 solid 
 #660D54 
 ; 
 border-bottom 
 : 
 10 
 px 
 solid 
 #660D54 
 ; 
 margin 
 : 
 10 
 px 
 ; 
 padding 
 : 
 20 
 px 
 ; 
 } 
 . 
 purpleText 
 { 
 color 
 : 
 #8C1274 
 ; 
 } 
 . 
 signature 
 { 
 text-align 
 : 
 right 
 ; 
 } 
 strong 
 { 
 font-size 
 : 
 large 
 ; 
 color 
 : 
 #8C1274 
 ; 
 }

8

Save all files and reload the tab. Look at the final result. Adjust the style and content if you're not satisfied with it. Otherwise, you can close the text editor and the tab.
You can use e-mail , give it to them on a USB stick (you could even make a USB stick yourself with the necessary materials and tools), or send it in whatever other way you consider practical. If you have a separate file for your HTML and CSS, both are necessary to display the birthday card correctly. You could create a zip file (works on all major platforms) or a tar file (only if the recipient uses Mac or Linux, since it's hard to open these on Windows). If you placed the CSS in the head of the HTML file, you can just email the entire file.

Expert Q&A

Search

Add New Question

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

You can always save the files and reload the tab to see what your code looks like right now.

Thanks
Helpful 0 Not Helpful 0
This example chose a colour scheme based on orange and red. You can choose any other colours. What about making it in your friend's favourite colour and some variations of it?

Thanks
Helpful 0 Not Helpful 0

You can insert images into your birthday card. To insert an image, write:

 < 
 img 
 src 
 = 
 "imagefile.png" 
 alt 
 = 
 "alternative text in case image is not displayed" 
 >

Thanks

Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Log in

How to Create an Awesome Birthday Card with HTML and CSS

Making a Quick Birthday Card with HTML

Steps

Creating the File

Creating the HTML Head

Creating the HTML Body

Adding the Formatting Using CSS

Expert Q&A

Tips

You Might Also Like

About This Article

Is this article up to date?

Quizzes

You Might Also Like

Featured Articles

Trending Articles

Featured Articles

Featured Articles

Watch Articles

Trending Articles

Quizzes

Explore Categories