Coding with HTML & CSS: The Basics

Hello, and welcome to my first post about code! Isn’t this exciting? Okay, well you might be intimidated, but don’t worry. This post is named “the basics” for a reason.

There are multiple coding languages out there, and I do not in any way pride myself in knowing them all. I’ve learned a small percentage of Java and an even smaller amount of Java Script. But what I do know and love is HTML & CSS.

What is HTML?

HTML stands for Hypertext Markup Language. HTML is the foundation for even the most basic webpages. Because I’m using WordPress as my CMS (content managing system), this text is automatically being converted to HTML. (This is perfectly fine if you don’t want to learn all the code, but I’m someone who likes being in control.) Knowing some HTML can be very useful in the long run, though.

A line of HTML code can distinguish whether you want the text bold, italics, or a different heading.

Let’s talk about the two basic parts of HTML code.

    1. Opening and Closing Tags

      An opening tag will look like this: <p> With a less-than sign and a more-than sign on each side of the inner character. This opening tag starts the line of code…You could say it opens it. Easy, right? The closing tag looks very similar: </p> You know it’s the ending because of the forward slash in front of your character. These tags have to be at the beginning and end of the text you want visible, or else your text won’t know what to look like. The combined use of these tags are referred to as an element.

    2. Character

      In our previous example, <p>, this is the p. In this case it stands for paragraph, but there are many other characters you could choose from. The character is the design of the text. If you want it to be a paragraph, you choose the p. If you want it to be a heading, there are six to choose from—h1–h6 to be exact. You cannot create your own character, but there is an extensive list of what you can choose from.

      *Don’t worry about the yellow code, that will be discussed in a later post. Just know that this is needed in order to have punctuation, in this case a period at the end of each line.

What is CSS?

CSS stands for Cascading Style Sheet. CSS controls how your HTML is designed. In this file you say your colors, sizes, padding, margin, and even animations. This is a separate document that you link in your HTML so that it knows what your design looks like. One can say that HTML is the skeletal system and CSS designs the rest.

A line of CSS code can distinguish whether your p character is a purple shade of Helvetica, or your headings are eye-catching script font with a thick underline of orange.

Let’s talk about the two basic parts of CSS code.

      1. Selectors

        Remember the character that we used in HTML? In CSS that is referred to as the selector. You would type the selector, then an opening and closing curly bracket. The selector is which character you are aiming to redesign. You can list multiple selectors by placing a comma in between them so that your design influences multiple characters. If you wish to target a character that is only within another character, you’d include both and have a greater-than-sign between them. There are a few more in-depth selectors, but we can get into that later.

      2. Declarations

        The declaration is the part you wish to change, then what your change is. The individual parts are called property and value. The property is placed right after the opening curly bracket and is followed by a colon. This is the aspect of the character you wish to change. (ex: color, font, padding.) The value comes after the colon and must end with a semicolon. This is what you are choosing to replace the original design with. In my example you can see that I wanted to change the paragraph to a shade of purple and the font Helvetica.

    An HTML file and a CSS file are both needed in order to create a dazzling website, no questions about it. I’ve given just the basic of the basics, but if you want to try it yourself you can open up a plain text editor, save it as .html instead of .doc or .txt, and get to typing! Then once you save it you can open it in your browser and check it out. Create a CSS document the same way, except with .css as the extension name. To link them you will need to add a line of code at the top of the HTML like this: <link href=”directory to your css file here” type=”text/css” rel=”stylesheet” /> Save your .css in the same location as the .html so that all you have to do is put the name for now.

  1. This may seem like a lot to take in, and I don’t blame you if you feel overwhelmed. But, if you are serious about your online business or working with web design in the future, you have to learn both HTML & CSS.HTML & CSS: Design and Build Websites by Jon Duckett was the book we used in school and my reference for writing this. This amazing book can be bought on Amazon for a decent price. It’s a visually powerful book, with lots of examples and easy to follow instructions. I keep it at my desk just in case I ever need to look something up.