Difference between revisions of "CSS and HTML fundamentals"
m |
(More About HTML) |
||
| Line 34: | Line 34: | ||
* <code> ul </code> and <code> li </code> The ul tag is used for '''u'''nordered '''l'''ists, and the li tag is used for the '''l'''ist '''i'''tems. | * <code> ul </code> and <code> li </code> The ul tag is used for '''u'''nordered '''l'''ists, and the li tag is used for the '''l'''ist '''i'''tems. | ||
| + | |||
| + | ==How To Use HTML== | ||
| + | |||
| + | Every HTML document must start off with a <code><doctype></code> tag. This tells HTML that we're going to be using it. In HTML5, a doctype tag looks like this: | ||
| + | <code><!doctype html></code> | ||
| + | |||
| + | The doctype tag does not have an ending tag nor is it a combined tag. This is a special tag. | ||
| + | |||
| + | Then we have to use the <code><html></code> tags. This tells the computer that this is where all of the HTML code is going to start. <code><html></code> tags should be placed inside of doctype tags. | ||
| + | |||
| + | Inside the HTML tags, we then put two tags: <code><head> </head></code> and <code><body></body></code>. | ||
| + | Inside the head tag, we put things that aren't part of the "viewable" site. For example, we could put all of our CSS styles, as well as what kind of character set we'll use and the title of the webpage and how to render everything. | ||
| + | |||
| + | Inside the body tag, this is where all of the actual stuff goes. We might put things like texts, ads, pictures, and buttons in there. | ||
| + | |||
| + | Comments can be written as <code><!-- comment here --></code> | ||
| + | |||
| + | To demonstrate, here is a sample webpage gimbob wrote about carrots. | ||
| + | |||
| + | <code> | ||
| + | <!doctype html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <!-- that tells the computer to use UTF 8 as our character set --> | ||
| + | <title>Carrots</title> | ||
| + | <!-- This tells HTML that the title of our webpage is Carrots. --> | ||
| + | </head> | ||
| + | <body> | ||
| + | <p> | ||
| + | <!-- this begins a new paragraph --> | ||
| + | Carrots are an orange vegetable. They are very tasty, especially if you eat them with ranch dipping. | ||
| + | </p> | ||
| + | <!-- this ends the paragraph --> | ||
| + | <p> | ||
| + | Carrots are a common garden vegetable. Rabbits love to much on them, though, so be careful! | ||
| + | </p> | ||
| + | Carrots look like this: | ||
| + | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg/220px-13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg" /> | ||
| + | <!-- this tells HTML to display an image from https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg/220px-13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg --> | ||
| + | </body> | ||
| + | </html> | ||
| + | </code> | ||
==CSS== | ==CSS== | ||
Revision as of 00:52, 14 November 2016
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
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.
Then we have to use the <html> tags. This tells the computer that this is where all of the HTML code is going to start. <html> tags should be placed inside of doctype tags.
Inside the HTML tags, we then put two tags: <head> </head> and <body></body>.
Inside the head tag, we put things that aren't part of the "viewable" site. For example, we could put all of our CSS styles, as well as what kind of character set we'll use and the title of the webpage and how to render everything.
Inside the body tag, this is where all of the actual stuff goes. We might put things like texts, ads, pictures, and buttons in there.
Comments can be written as
To demonstrate, here is a sample webpage gimbob wrote about carrots.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carrots</title>
</head>
<body>
Carrots are an orange vegetable. They are very tasty, especially if you eat them with ranch dipping.
Carrots are a common garden vegetable. Rabbits love to much on them, though, so be careful!
Carrots look like this:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg/220px-13-08-31-wien-redaktionstreffen-EuT-by-Bi-frie-037.jpg" />
</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 |
