Falling in Love with HTML and CSS

Valentine’s Day is just around the corner, and there's no better way to someone's heart than a handmade card — which is exactly what we're making in this tutorial. Using the power of HTML and CSS, you'll learn how to develop a website that doubles as a v-day card to wow that special someone in your life. (Disclaimer: I don't advise giving this as your ONLY V-Day gift.)

final_card

HTML and CSS

Websites are made up of many things, but HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the two main components. Together, like you and your partner, they are the building blocks for every single webpage on the Internet.

Here's a quick overview: HTML provides structure, while the CSS is used for styling and making websites look pretty. For more information on HTML and CSS basics, check out the beginner tutorials here and here.

Think of a classic Valentine's Day card. It's made up of many attributes, such as text, images, and often a poem. In the world of HTML, such attributes are the elements of a webpage. Meanwhile, each of the card's attributes differ in size, shape, or color. In the web world, CSS is used to define the look and feel of a webpage.

Now let's turn to an actual web page ...

The image above is an example of what we're going to be creating, using just HTML and CSS. You can also view the webpage here.

Setup

For this tutorial, we'll be using an online HTML, CSS, and Javascript code editor called CSSDeck. Sign up for a free plan here. After signing up, navigate to the homepage and click the "New" button to create an environment for us to work in.

You should see four panes. The three smaller panes on the left are for entering your HTML, CSS, or Javascript code, while the large pane displays a preview of the how the webpage will actually look.

Workflow

We'll be creating this web page iteratively, step-by-step. In other words, we'll add a line of code then discuss what it does. I've included links to the updated code after each step.

Our Card's Structure (HTML)

We'll be using the following HTML tags to develop our card:

Many of these tags will be styled using CSS. We'll also fancy it up by applying a border around the entire webpage, which is strictly a CSS style.

Add basic structure

Copy and paste this basic webpage structure into the HTML pane within CSSDeck.

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  </body>
</html>

This structure is commonly referred to as a boilerplate template. Such templates are used to speed up development so you don't have to code the features common to every single webpage each time you create a new page.

What's going on in the boilerplate?

  1. The first line, <!DOCTYPE html> is the document type declaration, which tells the browser the version of HTML the page is using (HTML5, in our case).
  2. <html> informs the browser that all code between the opening and closing, </html>, tags is HTML.
  3. The <head> tag contains links to CSS stylesheets and Javascript files that we wish to use in our web page, as well as meta information used by search engines.
  4. All code that falls within the <body> tags are part of the main content of the page, which will appear in the browser to the end user.

This is how a standard HTML page is structured.

Add the following element to the page within the <body> tags:

<h1>Hello, World</h1>

Check out the preview pane. You should see the header text, "Hello, World".

Congrats! You just made a webpage. (Your first?!)

http://cssdeck.com/labs/kz8sc3zw

Title

Add a title to your card between the opening and closing <head> tags:

<title>Happy Valentine's Day!</title>

Heading

Update the heading in your card:

<h1>Happy Valentine's Day</h1>

Headers include the <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags. <h1> is the main heading and the remaining headings decrease in size, with <h6> being the smallest. It's best practice to use the <h1> tag only once per page, while the other tags can be used any number of times, but they should always be in order. In other words, <h3> should be a sub-heading of <h2> and <h4> should be a sub-heading of <h3>, and so forth.

Want it to say something different? Just change the text between the tags!

http://cssdeck.com/labs/62mmslgp

Image

Insert an image (we designed this one for you) just below the main heading (the <h1> tag):

<img src="http://i.imgur.com/a2tjOcm.png">

Our card after adding in the image:

H1 and Image

http://cssdeck.com/labs/ohqmko16

Paragraph Text

Say something sweet. Write your personal message within the paragraph text and insert it below the image:

<p>Write your personal message here</p>

Tip: Replace "Write your personal message here" with your actual message. Show some love, or some wit :) A suggestion: "You are the HTML to my CSS."

http://cssdeck.com/labs/ofag2kig

Divider

Let's create a button using the divider tag:

<div>click here to get your present</div>

Doesn't look much like a button yet. It will soon. Trust me.

http://cssdeck.com/labs/1opjhgbg

Anchor

Finally, surround the divider tags with an <a> tag to create a link:

<a href="/" target="_blank"><div>click here to get your present</div></a>

You also need to insert a link to replace the slash. You can use something like this cute Google video. Or, maybe you could link to a dinner reservation confirmation page for the 14th. To really wow your partner with your DIY gift, break out the guitar and create your own video to link to! <3

http://cssdeck.com/labs/m9d3pqjy

Well, we've added all the HTML structure to our page:

after_html

Check out the fullscreen preview here.

Kind of bland, to put it nicely. Fortunately, we can quickly change that with CSS!

Our Card's Style (CSS)

From the size of the text to the background colors to the positioning of HTML elements, CSS gives you control over almost every visual aspect of a page.

CSS and HTML work in tandem (again, like you and your partner). CSS styles (or rules) are applied directly to HTML elements using selectors.

We're going to add three selectors to our HTML page:

  1. header
  2. msg
  3. button

Selectors are used to change the style of specific elements in the HTML.

To add the selectors to the elements on our page, insert them in the opening tags:

<h1 id="header">Happy Valentine's Day!</h1>
<p id="msg">Write your personal message here.</p>
<div id="button">Click here to get your present.</div>

Add them now. Your code should now look like this.

Header

Here, we are increasing the size of the font, changing the thickness of the text, and adding some space to the top of our header selector.

Copy and paste this into the CSS pane within CSSDeck.

#header {
  font-size: 68px;
  margin-top: 50px;
  font-weight: normal;
}
What's going on?

  1. We have the #header selector, which is associated with the same selector in our HTML document, followed by curly braces.
  2. Inside the curly braces, we have properties, which are descriptive words, like font-weight, font-size, or background color. In our case, we have font-size and margin-top.
  3. Values are then assigned to each property, which are preceded by a colon and followed by a semi-colon.

Tip: http://cssvalues.com/ is an excellent resource for finding the applicable values given a CSS property.

Here is our card with styling applied to the header:

H1 - add styling

http://cssdeck.com/labs/ej1kciif

Paragraph Text

Update the style of your personal message. Copy and paste this into the CSS pane within CSSDeck:

#msg {
  font-style: italic;
  font-size: 36px;
  color: #f12469;
  margin-top: 50px;
}

This changes the color of our text and italicizes it. It also changes the size of the font and adds a margin to the top of our message.

Here is our card with the style changes applied to our message:

H1 and Paragraph styling

http://cssdeck.com/labs/brkeecsj

Divider

Let's make that button look like a button. Copy and paste this into the CSS pane within CSSDeck:

#button {
  border-radius: 30px;
  height: 40px;
  width: 335px; 
  background-color: #f12469;
  font-size: 20px;
  color: #ffffff;
  margin:0 auto;
  padding-top: 15px;
  margin-bottom: 50px;
}

With this, our button becomes rounded. We set its height and width, and applied color changes.

Here is our card with the updated styling for our button:

Card with basic CSS

Have some fun with this. Change the background-color as well as the font color.

http://cssdeck.com/labs/zh2itiuj

The text is still a bit off, and our button could still look better. Let's fix that.

Additional CSS

Copy and paste this into the CSS pane within CSSDeck.

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
  border-width: 20px; 
  border-style: solid; 
  border-color: #fcd2d8;
  text-align: center;
}

a {
  color: #ffffff;
  text-decoration: none;
}

Try changing the border values. Play with the pixel size until you get it to be the right width. Try a dashed or dotted value for the style, and find a pretty color here.

Pro Tip: Use that special someone's favorite color! (You should know this ... and if you don't, find out quickly.)

Here is our finished card:

Complete Card

http://cssdeck.com/labs/npulm7vr

Sharing

Show that you care. Share. In CSSDeck, click the "Share" button. Copy the URL for the "Full Screen Result." Then email/tweet/post the link to that special person in your life.

Next Steps

Conclusion

Great work on this. Thanks for learning with us. Oh, and let us know if the card helps out this Valentine's Day.

Cheers!

Author: Michael Herman

P.S.: Don't want to code this Valentine's Day card alone? Find your love for code and build this card with one of our mentors! Click here to learn more »