CSS and HTML fundamentals
Contents
What are CSS and HTML?
HTML (Hyper-text Markup Language) is a mark up language. You can define images, headings, bold text, lists, images, and basically all the content of a page with HTML.
CSS (Cascading Style Sheets) is a style sheet language. CSS defines colors, layout, size, and much more! In order to use CSS, however, you must know a little bit about HTML.
HTML
What does HTML look like?
Every HTML file is composed of tags. Most content goes in the <body> tag. All tags start with a "less than" sign and eng with a "greater than" sign. Tags are separated into three categories:
- Opening tags These tags look like
<this>. Tag IDs and classes (you will learn what they are later) go in the opening tag.
- Closing tags These look exactly like opening tags except they have a forwards slash at the beginning, like
</this>.
- Combined tags! Opening and closing tags are merged together in some tags, like
<a>, which defines links, or<img>which defines images and their source. Their syntax looks like this:<this />.
We won't go into the specifics, but most things that you need for CSS are in the opening tag.
The Most Common HTML Tags
div. You'll end up knowing this one the best. This tag is used to specify a specific area of a HTML file.divs can be nested, but they can't end outside of their "parent" div.
p. This tag is used for paragraphs and naturally comes small.
strong. This is used for bolded or "important" text.
a. This is used for links - the lined website can be found inside the opening tag like this: <a href="linked here">.
img. As you might be able to tell, this tag is used for images.
h1, h2, h3....h6These are used for headings, withh1being the biggest.
ulandliThe ul tag is used for unordered lists, and the li tag is used for the list items.
How To Use HTML
'Note: this dives more into HTML and is not necessary for blog designers'
Every HTML document must start off with a <doctype> tag. This tells HTML that we're going to be using it. In HTML5, a doctype tag looks like this:
<!DOCTYPE html>
The doctype tag does not have an ending tag nor is it a combined tag. This is a special tag.
HTML files are then enclosed inside the <html></html> tag. Note that all your HTML goes inside those tags, and there is an closing and opening tag!
The rest of the HTML file is enclosed in two other tags, <head></head>, and <body></body>. The code inside those two tags are called the head and the body, respectively. The head includes data, a link to the style sheet for that HTML, there can be multiple, favicon (icons, next to the page name), and more. The body includes all content you actually see on the page. Here is a mini-website to demonstrate:
<!DOCTYPE html>
<html>
<head>
<title>Carrot Page!</title>
</head>
<body>
Carrots are roots of the carrot plant. They are extremely nutritious!
</body>
</html>
CSS
What does CSS look like?
CSS looks pretty different from HTML! CSS is made entirely of many, many different sets of code. Each set is made out of three parts:
- What HTML element(s) the code applies to This is the first part of any bit of CSS code. There are many ways to say what you want here; they are gone over in better detail below!
- Curly braces - { and } These mark the beginning of the CSS code that specifies the style.
- Code inside the curly braces This code is made of many lines.
Each line of code inside the curly braces follows the format:
- What attribute you are specifying This tells the computer what you're changing. It's important - the computer needs to know whether to change the background color or the font size or whether the element should stick to the top of the page.
- A colon A colon ":" marks the end of the attribute name and the beginning of the value you want to set it to.
- A value Each attribute has different values. You specify the one you want here.
- A semi colon to end the value and the line of code! This is extremely important - your code will NOT function without a semicolon at the end of each one of these! (Semicolons are not needed for the curly brace lines.)
For example, you can see some real CSS in action here:
div .entry p {
font-size: 1.5em;
float: right;
}
Specifying an Element
IDs and Classes
Opening tags can have an ID or a Class modifier (div id="hello" has an ID of hello). IDs can be given to only one element in an HTML file, while classes can be given to multiple. To specify an element with a specific ID, use
[element name] #[id] {
css code;
}
For example, if I wanted to specify all the space and elements within a div with an ID of "blog", I would use:
div #blog {
css code;
}
On the other hand, classes can be given to multiple HTML elements at once. While your ID, your AoPS username, is specific to you, you're in the class of aspiring blog designers. To specify a class, the CSS syntax is a tiny bit different:
[element name] .[class] {
css code;
}
Specifying all of one type of element within another
CSS has a feature which is extremely useful.
Say you wanted to specify all the p elements within a div with an class of "side_bar". You can do this simply by adding the name of the element you want between the class/ID and the first curly brace:
div .side_bar p {
css code;
}
However, these two things may seem confusing:
- Specifying the background color, etc. of a SECTION. If you are trying to specify a section, such as turning your entries' background color blue, do not include any element at the end. The element at the end stops the code from specifying the SECTION.
- Tag-less text. It seems that the people who originally wrote the code for blogs did not put a lot of text inside any tag like "p". Instead, they just typed them, tag-less, into the code. You can specify this code by just addressing the div itself, not any tag.
AoPS CSS Tutorial
AoPS Blog Design (Cascading Style Sheets)
Introduction - Default Blog Layout
