Within this topic, you will learn the fundamental concepts for reading and understanding HTML and CSS. If you’re interested in extending your knowledge and want to learn how to use HTML to make your own website, take a look at this Scrimba course and consider enrolling in the Level 5 Web and Graphics course at Yoobee.
HTML is the language we use to create documents designed to be displayed online in a Web browser.
HTML stands for 'HyperText Markup Language'. It is one of the many markup languages (computer languages used in documents, databases and so on, applying 'tags' to mark elements to allow the arranging and retrieval of data). HTML defines elements within a document so that they can be displayed in meaningful ways.
'Hypertext' refers to the ability to link pages together using hyperlinks.
So, elements in an HTML document are represented by tags. Each tag can include a number of attributes that provide more information about the element and change the way the element is displayed.
- Opening tag
- Closing tag
- An attribute and its value
- Enclosed text content
id and class attributes are often used within HTML tags to help define the purpose and provide context for the information to be displayed.
In a basic webpage, the elements we are likely to want to define are:
HTML
An HTML page will always start and end with <html></html> tags. It represents the root of the document and is a 'container' for the rest of the HTML elements used in the document.
Head
The <head> element is the first element that sits within <html></html> tags. It contains metadata relating to the document.
The head tag will often contain:
Title
<title></title> tags are used to define what is displayed at the top of the browser window or in the browser tab.
Link
<link/> tags are used to define how the document relates to others. It is often used to define where an external CSS style sheet is located.
Body
The <body> element is the container for all elements that will be displayed in the browser. All the text, images, headings and links are created inside the body of the document.
Paragraphs
Each paragraph within an HTML document will be encapsulated with <p></p> tags.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Images
Because HTML documents only contain text, images can only be included by providing a path to their location. We can use the <img/> tag to define the location of the image, its alt text (important for screen readers) and its width and height.
<img alt="A ginger cat" height="600" src="cat.jpg" width="600"/>
The <img/> tag is an example of a self-closing tag, meaning it doesn’t require a closing slash (/).
Links
Anchor tags <a></a> are used to create links to other pages within the same website or to other websites. The 'href' attribute is used to define where the link will go and the text between the opening and closing tags defines what the link will say. (Notice the closing '>' for the initial <a> tag below sits at the end of the contained link: '"https://www.yoobee.ac.nz/"; i.e. the <a> tag contains the link detail within; while the text element sits between the anchor tags.)
<a href="https://www.yoobee.ac.nz/">Visit Yoobee Colleges</a>
Headings
Headings are an important way to add hierarchy to a document and provide context to the information to be displayed. HTML has 6 levels of heading.
<h1> is the biggest, <h6> is the smallest.
It’s important that headings are used appropriately and in the correct order. You wouldn't use an <h2> under an <h3> .
<!-- An example of <h1></h1> tags -->
<h1>Heading Level One</h1>
<!-- An example of <h2></h2> tags -->
<h2>Heading Level Two</h2>
<!-- An example of <h3></h3> tags -->
<h3>Heading Level Three</h3>
<!-- An example of <h4></h4> tags -->
<h4>Heading Level Four</h4>
<!-- An example of <h5></h5> tags -->
<h5>Heading Level Five</h5>
<!-- An example of <h6></h6> tags -->
<h6>Heading Level Six</h6>
Lists
Lists are a great way to either group related items together or to provide information in stages or steps. HTML includes both ordered and unordered lists.
An Ordered list will usually have a number or letter associated with each item on the list, and an Unordered list will often include a bullet or other symbol before each item.
Each item of the list will be flagged by <li></li> tags (list item) and the entire list enclosed in <ol></ol> tags (ordered list) or <ul></ul> tags (unordered list).
<!-- An example of an ordered list -->
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
- Step one
- Step two
- Step three
<!-- An example of an unordered list -->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
- Coffee
- Tea
- Milk
To learn more about these and other tags, have a look at w3schools.com.
Have a look at the sample file provided at csszengarden.com.
Can you identify the tags being used without looking at the source code? Watch the following video for reinforcement.
You probably noticed how boring the csszengarden.com sample page looks. That’s because there is no styling, and it is being displayed using browser defaults. This is where CSS comes in.
CSS stands for Cascading Style Sheets. CSS is used to define how the content of an HTML document will be displayed.
We can use CSS to control the layout and positioning of elements, and the visual characteristics such as colour, size, borders and typography.
'Cascading' refers to how the styles are applied. All elements within a styled element will be styled and styles written later in a CSS document will override earlier ones.
CSS is often written in a separate document and linked to an HTML document or it can be included within <style> tags within the <head> of an HTML document.
For examples of how to include CSS, have a look here.
CSS is written by first defining a 'selector'. This is the element we want to style. Then within curly--{ and }--brackets, we can add a property and value pair separated by a colon, known as a 'declaration'. Each declaration ends with a semicolon, as displayed below.
- Selector
- Declaration
- Declaration
- Property
- Value
- Property
- Value
It can be written on a single line like this:
p { color: red; text-align: center; }
However, it is easier to read when written like this:
p {
color: red;
text-align: center;
}
The example above will style all paragraphs to have red text color and center-aligned text (note the use of American English spelling).
We often don’t want to apply the same style to every instance of an element. We can use classes and IDs to be more specific about what we are styling.
If a paragraph includes a class:
<p class="intro">Yoobee Colleges is New Zealand’s largest specialist creative and IT college. We’ve been fuelling the creative and IT industries for over 30 years with talented Animators, Filmmakers, Designers, Game Developers, and Techies.</p>
We can style it using its class as the selector.
.intro {
color: red;
text-align: center;
}
'Classes' are used to identify elements on a page. Each class can be used multiple times and they are useful for styling and positioning elements like paragraphs, headings and images consistently.
'IDs' are used to identify a unique element on a page and are commonly used to identify a section that can be navigated to within a page using an anchor or jump link (linking within a page).
Specificity
CSS has a number of Specificity rules that dictate how styles are applied when more than one CSS style is to be applied. The rules can be a little complicated; however, there is a great resource for understanding them here.
The resources at csszengarden.com include some notable examples of what is possible with CSS.
