Have you ever wanted to spice up your blog and make it completely you, but have no idea how?
I've always wanted to customize my blog theme but I had zilch knowledge on making it happen! It's incredibly frustrating when I know how I want my blog/website to look like but don't know how, so I made it my goal to learn the basics and move forward from there. (Note: I'm not claiming to be an expert. What you read in this series will be based on my self-study and experience coding my blog and other people's.)
Before we dive into the coding itself, it's important to know what HTML and CSS are and what their functions are.
What is HTML?
HTML (short-form for Hyper Text Markup Language) is a markup language for describing web pages. HTML documents are described by HTML tags, and each tag describes a specific content.
You'll notice that forms of the word describe are repeated in the definition, and it's because that's exactly what it does. It paints the page's elements - placement, content, sections, navigation, link addresses, and others. It's the interpretation of code you see in a site without the formatting, which is where CSS comes in.
What is CSS?
CSS is short for Cascading Style Sheets and can be applied to HTML in three ways - inline, internal, and external.
Inline - uses a style attribute within HTML elements
Internal - uses a style element in the HTML head section
External - uses one or more external CSS files
In simple terms, CSS is the custom formatting you can apply to an HTML tag. This is where you can add color, borders, and practically everything you want to make your site/blog even more personal.
Now, let's get started!
What does a basic HTML document look like?
HTML documents all have this basic format:
<!DOCTYPE html><html><head><title>Page Title</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>
Here's a brief run-through of what these mean:
DOCTYPE defines the document type to be HTML
<html> and </html> describes your HTML document
<head> and </head> gives details about your document
<title> and </title> gives the title for your document
<body> and </body> describes what you see on the page
<h1> and </h1> defines the heading
<p> and </p> describes a paragraph
You'll notice that they have a start < and end /> tag - anything inside will take on the description given by tag names.
The simplest examples would be styling text bold, italicized, & underlined. Take the following:
<b>Make this bold.</b> is translated into Make this bold.
<i>Make this italicized.</i> is translated into Make this italicized.
<u>Make this underlined.</u> is translated into Make this underlined.
HTML keywords, also called tag names, are enclosed in angle brackets. It is common for these to come in pairs as they determine where a certain keyword ends. End tags are, therefore, very important.
This is just the introduction to HTML/CSS styling, so keep posted for the next part.
What would you like me to include in the next parts? Leave a comment and I'll do my best to deliver. Ciao!
i really dont know anything about html/css.. im using a custom template from a designer and jusy copied everything after downloading it.. no idea about anything really.. this is very informative though, i had a grasp of the basics of web designing but still doesn't have the heart to do this things... i guess it requires a lot of patience.. :-)
ReplyDeleteHehe I started out looking at the code of the websites I liked, and researched form there. So I guess it does take a little patience, ehehe. :) Thanks.
DeleteBitin! haha. I will look forward to your next post. BTW, did you change the access to your comment section? This is the most unfriendly system I encountered bec. if Name/URL is not enabled, wordpress would not work. So I will end-up as the "scribbler" - ASKSonnie
ReplyDeleteHi! Hehe thanks, I'll make the next part soon. I'm not sure what's happening with the comment section. I reset everything once I read your comment and hopefully this situation doesn't happen again. :)
DeleteI usually use custom templates because I do not understand this but then yeah, I just put it in my bucketlist to try to learn this. Bitin nga, but its a start. Looking forward to read the following parts.
ReplyDeleteI have no background on CSS but I try to figure it out. Your post is most helpful in providing the basics on HTML and CSS.
ReplyDeleteMoooooore!haha!This thing is not my focus. I see it when I do changes in my blog setting but I dont put attention. And this blog started me to realize that it is important to learn it and it's learnable. Thanks thanks! Yami here!
ReplyDeleteMoooooore!haha!This thing is not my focus. I see it when I do changes in my blog setting but I dont put attention. And this blog started me to realize that it is important to learn it and it's learnable. Thanks thanks! Yami here!
ReplyDeleteI only know simple HTML. Actually, its good to have knowledge about this because its helpful for bloggers.
ReplyDeleteGreat! I agree.
DeleteI've been trying to learn this for so long! And I've kinda learnt some while customizing my themes etc but it's still very very very hard and makes your brain hurt. Hahaha!
ReplyDeleteHaha, some codes DO! I'm still learning, and one part I'm kind of struggling with is adding responsive code to everything. Hahaha.
DeleteI really look forward for more. I never like HTML/CSS before but they eventually become an indispensable knowledge.
ReplyDeleteThat's in essence my daily job. Handling codes and immersing myself into the style.css sheet all day. Very insightful article.
ReplyDelete