How to Make a Birthday Card with HTML and CSS

PDF download Download Article
PDF download Download Article

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, or to someone who really likes IT. Or do you simply want to try making a digital birthday card? Then you are in the right place!

Making a Quick Birthday Card with HTML

  1. Open a blank document and declare the document type (<!DOCTYPE html>), then add opening and closing HTML tags (<html>, </html>).
  2. Place a title (<title>[TITLE]</title>) and declare an encoding type (<meta charset="utf-8" />).
  3. Add your body (<body>), and in it, write a header (<h>) and paragraphs to make text for your card.
Part 1
Part 1 of 3:

Creating the File

PDF download Download Article
  1. 1
    Open a text editor. You can use any editor that is pre-installed on your system: Notepad on Windows, TextEdit on Mac, Nano on Linux. If you prefer another text editor, you are welcome to use it.
  2. 2
    Declare the document type. This is important so that the browser knows that this is a HTML file. Write into the text editor: 
       <!DOCTYPE html>
    Advertisement
  3. 3
    Add an opening and closing html tag. This is where your HTML code will go. The document type declaration doesn't belong into between the html tags. Your code should now look like this: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 </ 
 html 
 >
    4. Advertisement
Part 2
Part 2 of 3:

Adding the Content Using HTML

PDF download Download Article
  1. 1
    Add a head. Most items placed in the head are things that are not visible on the page. Add a head by writing an opening and closing head tag.
    • 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): 
         <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Happy Birthday </ 
 title 
 > 
 < 
 meta 
 charset 
 = 
 "utf-8" 
 /> 
 </ 
 head 
 > 
 </ 
 html 
 >
  2. 2
    Open the file in a web browser to check whether everything is correct so far. You need to save it first. Use a descriptive name and the .html extension, for example birthday.html . Open a new tab in the web browser. Open the file in that tab. This is usually done either by clicking on File → Open File... or by pressing Ctrl + O .
    • It will show an empty page with "Happy Birthday" as the title.
  3. 3
    Add a body. This belongs below the head. The body is where the visible content will be. It is made using an opening and a closing body tag. 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Happy Birthday </ 
 title 
 > 
 < 
 meta 
 charset 
 = 
 "utf-8" 
 /> 
 </ 
 head 
 > 
 </ 
 html 
 >
  4. 4
    Write your content into the body. This can be whatever you want to write in a birthday card. For now, it will just look like text. You'll add advanced formatting later.
    • 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): 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Happy Birthday </ 
 title 
 > 
 < 
 meta 
 charset 
 = 
 "utf-8" 
 /> 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 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 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  5. 5
    Put your content into a 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 draw a border. Give the div an ID, for example "birthdayCard": unlike classes, IDs are unique, which makes more sense since you're going to create only one birthday card on this page. 
       <!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 
 >
  6. 6
    Reload the file in your browser to preview it. Remember to save the content in the text editor first. It should now show the content, but with no formatting like colours or different fonts. The span elements should be invisible for now.
    7. Advertisement
Part 3
Part 3 of 3:

Adding the Formatting Using CSS

PDF download Download Article
  1. 1
    Open a new file in the text editor. Keep the HTML content open in case you will need to adjust something. This new file will contain your CSS style, so save it with the .css extension, for example as birthday.css .
  2. 2
    Set the background and default text colour. If you specify these things for the ID "birthdayCard", which refers to the div you placed the content in, they will be set for everything inside the div, except when explicitly specified otherwise. In CSS, a style for an ID is specified by typing the # symbol, then the element name and then in curly brackets the style.
    • 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 and 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: 
         < 
 link 
 rel 
 = 
 "stylesheet" 
 href 
 = 
 "birthday.css" 
 />
    • Replace "birthday.css" with the name of your CSS file if it's something else. Then save and reload the page.
  3. 3
    Set the div width. As it is now, the div spans across 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. 
       # 
 birthdayCard 
 { 
 background 
 : 
 darkorange 
 ; 
 color 
 : 
 #111111 
 ; 
 width 
 : 
 25 
 % 
 ; 
 min-width 
 : 
 300 
 px 
 ; 
 }
  4. 4
    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.
    • 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 
 : 
 300 
 px 
 ; 
 border 
 : 
 8 
 px 
 solid 
 orange 
 ; 
 border-left 
 : 
 10 
 px 
 solid 
 #DD0000 
 ; 
 }
  5. 5
    Add padding and margins. Right now, the text is too close to the div 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.
    • 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 
 : 
 300 
 px 
 ; 
 border 
 : 
 8 
 px 
 solid 
 orange 
 ; 
 border-left 
 : 
 10 
 px 
 solid 
 #DD0000 
 ; 
 margin 
 : 
 10 
 px 
 ; 
 padding 
 : 
 20 
 px 
 ; 
 }
  6. 6
    Add class and element styles. In a previous step, you had assigned paragraphs and spans 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 . symbol, then the name of the class, then curly brackets with the style. A style for an element is done by writing the name of the element and then the curly brackets. 
       # 
 birthdayCard 
 { 
 background 
 : 
 darkorange 
 ; 
 color 
 : 
 #111111 
 ; 
 width 
 : 
 25 
 % 
 ; 
 min-width 
 : 
 300 
 px 
 ; 
 border 
 : 
 8 
 px 
 solid 
 orange 
 ; 
 border-left 
 : 
 10 
 px 
 solid 
 #DD0000 
 ; 
 margin 
 : 
 10 
 px 
 ; 
 padding 
 : 
 20 
 px 
 ; 
 } 
 . 
 redText 
 { 
 color 
 : 
 #CC0000 
 ; 
 } 
 . 
 signature 
 { 
 text-align 
 : 
 right 
 ; 
 } 
 strong 
 { 
 font-size 
 : 
 large 
 ; 
 color 
 : 
 #CC0000 
 ; 
 }
  7. 7
    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.
  8. 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), upload it to a social network, or send it in whatever other way you consider practical. Since you have two files and 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).
    9. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      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 1
      • 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" 
 >
        • Replace "imagefile.png" with the actual name of your image file and write an appropriate alt text. Don't forget to send the image with the CSS and HTML file, else it won't display in the birthday card on the recipient's computer. You can also use a link if the image is online.
        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!
      Advertisement

      You Might Also Like

      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Open HTM Files
      How to
      Resize iFrames in HTML
      How to
      Copy HTML Source Code on Your Computer, iPhone, or Android
      How to
      Edit HTML Files
      Advertisement

      About This Article

      Thanks to all authors for creating a page that has been read 120,517 times.

      Is this article up to date?

      Advertisement