6 min read
It’s hard to believe there was once a day when only designers and developers could create websites. Now we have pre-made templates, blog themes, and platforms that make it easy for anyone to build their own site. No need for a background in design or years of coding, all you need to do is find a content management system you’re comfortable with, a theme you like, and then navigate a drag and drop editor to get the job done.
But while these blog templates and WYSIWYG editors enable you to put your website up over a weekend, there still may be times when you need to add a little extra customization to hit your branding standards. When those times come, you’ll need to be familiar with HTML and CSS.
Now, don’t let those acronyms scare you. Today we’re going to decode the coding. We’re going to talk about what they are, what they do, and how you can use them for some very basic customizations for your website.
HTML and CSS are two coding languages that are independent of each other, but both work together to make your website look good. HTML, or HyperText Markup Language, is a set of tags that give content structure and meaning by defining it. CSS, or Cascading Style Sheets, style the appearance of your content. It tells the browser what the content in those tags should look like.
Basically, HTML is the cake recipe and CSS is the decoration on the cake.
Now we’ll dive into the details of what these two languages look like and how they are used.
HTML tags are the opening and closing tags that surround the content of your website that create structure. They are the basic building blocks for web design. For example, these tags separate headers from the body content and create paragraphs inside the body content. You’ll recognize them as the content enclosed in carrots (<>).
You won’t need to actually know all the HTML tags unless you’re planning to create your website from scratch, and I’m guessing you’re not planning on doing that. But it’s still good to recognize the most common HTML tags for when you might want to edit bits and pieces of your website.
Always remember when using HTML tags that you need to close them off when your item ends. That means you’ll add a backslash to the beginning of the tag. For example, at the very end of your page, you’ll add </html> to close everything out.
CSS is the style sheet language used for describing the presentation of your website. In other words, it’s what makes your site look the way you want it to. It defines everything from color and margins to lines and background.
A line of CSS has a very particular set up. First you call a class or tag then you put the styling instructions within curly brackets. The property is the part of the page you want to change and goes on the left. The value is the bit you change to style how you want and is on the right. Both are separated by a colon. Every line ends with a semicolon (if your styles don’t seem to be working, it’s often because you forgot a semicolon or to close a curly bracket!)
Once it’s all done you will have a line of CSS that looks like this:
There are endless possibilities for styling in CSS, but here are a few basics you’ll likely need to deal with when editing your own site:
For everything else, here is a great resource to look to for a CSS property list: https://www.w3schools.com/cssref/
And if you want to dive a bit deeper into learning enough code, here are a couple great places to start:
With these basic lines of code, you can feel ready and able to make small customizations to your website. Want a bigger font for your header? You can do it with by changing the font-size for h1 in the stylesheet. Want to create a bulleted list on your homepage? Now you know how with your <ul> tag.
The possibilities are endless, but don’t go too crazy. Remember, a well designed site is a simple site.
Download this issue of Tradecraft as a PDF to read and reference at your own pace.