learning web designing
Learning how to design your own blog can be fun yet frustrating at the same time.
But then sooner or later you learn that in order to make certain changes to your blog’s theme or template, like changing colors, customizing a form, fitting your header in correctly, etc. it becomes necessary to alter a bit of code in something called a Style Sheet.
That’s when you either say “Cool! I’ve always wanted to learn CSS!” or “Huh? This just got way too complicated.”
If you happen to fall in the latter camp, this post is for you.
I want to help you understand this anomaly they call CSS and it’s counterpart HTML once and for all, because honestly, they’re really not as complicated as they seem. REALLY!
Ready to dive in?
HTML AND CSS DESIGN: SAY WHAT?
OK LET’S START WITH WHAT THE HECK HTML AND CSS ARE EXACTLY
HTML and CSS are programming languages for the web. Wait! Don’t get scared off yet! They’re not like complicated programming languages.
They are separate languages that work together. HTML + CSS = BFFs if you know what I mean.
HTML stands for Hypertext Markup Language which, at it’s most basic definition, means Interactive Text. It is the code that’s used to build the structure of a web page.
CSS stands for Cascading Style Sheet, which is used to define the styles that format the web page.
HOW HTML AND CSS AND WORK TOGETHER:
- You can have HTML without CSS (that would be really ugly!), but you can’t have CSS without HTML.
- CSS is applied to the HTML.
- HTML is the content of a webpage. So think of it like a Word document where you have all of your content (headings, subheadings, paragraphs, bullet points, etc).
- CSS is the style or appearance of that content. So CSS is kind of like the editor that tells what color, font and size each bit of text should be and also where to place it. We can also use CSS to actually place things around the page.
- HTML and CSS should always be kept in separate files. While there are ways to include CSS in an HTML document, the best practice is to keep it in its own separate document that the HTML document links to.
BEFORE WE CAN TALK ABOUT CSS, WE FIRST HAVE TO UNDERSTAND HTML
Let’s see HTML in action.
A WORD DOCUMENT VS. AN HTML DOCUMENT
Let’s take this Word document.
Notice how it’s formatted with titles and paragraphs, bulleted lists, bold text, etc.?
All the formatting is gone, right? So how do we add this back in?
With HTML tags. HTML tags will help us to structure the content on the page.
Let’s look at our HTML document in the browser again, now with tags added in:
Starting to look a little better right?
BROWSERS ADD DEFAULT STYLES TO CERTAIN TAGS
Did you notice that the headings are automatically bigger and bolder than the rest of the text? And that the paragraphs automatically have line breaks and margins added after them?
Without any CSS style definitions added to an HTML document, a browser will automatically add some styling to certain elements to give the content some sort of structure. I think we can agree that although some styling is better than none (see first screenshot up above), it still has a long way to go. More on that when we talk about CSS another time.
Notice that:
and so on…
- Tags surround each separate element on the page: like the headings, paragraphs, bulleted list, etc.
- A tag has an opening bracket:
<and a closing bracket:> - There’s also an opening tag
<tag>and a closing</tag> - Content goes in between the tags
- Tags literally surround each piece of content on the page, otherwise the browser will have no idea what to do with it
The tags we used in the example above
We used the H tags for headings, of which there are six:
<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Sub-subtitle</h3>and so on…
The
<p> tag defines paragraphs.
The
<ul> tag defines a bulleted (or unordered) list and the <li> tags define each item in the list. If you wanted to show a numbered list instead, you would simply use <ol> for ordered list instead of <ul>.ADDITIONAL HTML FORMATTING
If you compare our Word document to our HTML page in the browser again, you may notice that we missed a few things like bolded text in the second paragraph, italicizing in the third, two hyperlinks, and some right-aligned text at the bottom.
To add bold text anywhere in an HTML document, you simply surround the text with
<strong> tags like this:
Since 1967,
<strong>PAWS has united more than 130,000 companion animals with loving families</strong>, cared for 115,000 injured and orphaned wild animals, and made the world a better place for countless others through advocacy and education.
To italicize, we simply add
<em> tags like this:<em>PAWS is recognized as a 501(c)(3) non-profit. Our tax ID number is 91-6073154.</em>
To add a link to something, we surround the clickable text with
<a> tags:
PAWS is a private, non-profit organization that relies on generous donations from individuals and corporations.
<a href="http://www.paws.org/about/paws/others/">Are we the PAWS you’re looking for?</a>
The href stands for hypertext reference and is an attribute added to the a tag. It defines the URL that you want your link to go to. The URL must be between double quotes as shown above.
One more thing to format in our page is the right aligned text. We can easily do that by adding another attribute to the
<p> tag like so:<p align"right"> This text is right aligned.</p>
Comments
Post a Comment