HTML & CSS basics

Introduction

Now we will dive deeper into HTML and CSS!

Let’s see what HTML is:

HTML is the markup that contains all the stuff that a web page has. For example all the text on this page lives inside HTML tags that tell your browser how to order the content on the page. Go on, right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools and it will show you the structure of the page.

Let’s see what CSS is:

CSS tells the browser to display those HTML tags in a particular way. For example turn an element’s background color to grey and push it a little to the top. So once more right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools. In your Developer Tools, you can see the CSS styles in another panel, usually showing which specific properties were inherited from which lines of CSS.

Learning Objectives

The reason we separate HTML and CSS.
HTML:
- Elements
- Tags
- Attributes
- Div
- Forms
CSS:
- The three different ways to include CSS in your project and how to use CSS to style a particular element.
- The "default stylesheet" or "user agent stylesheet".
- Classes and IDs and what is the difference between them.
- Selectors
- Properties
- Values
- Pixels and ems and what is the difference between them.
- How CSS styles for a particular element get inherited.
- The two CSS attributes you can change to push an element around on the page.
- The "query string" in a URL and what it does.
- The reason we use a CSS reset file.

What is HTML & CSS?

Watch these two wonderful introductions to HTML and CSS by the Harvard CS50 team. Estimated Total Time: 2 hours

Web and HTML

Duration: 30 minutes

BREAK: Take a 10 to 15-minute break before you continue. Try to reflect on what you learned on the previous video and take some notes on the most important concepts.

Web and CSS

Duration: 40 minutes

Study

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

CSS SELECTORS MADE EASY – HTML CSS Tutorial for Beginners (Student approved resource)

Use Agent Stylesheets & CSS Resets

Learn about your browser’s default stylesheet and CSS resets in the next videos. That is the reason why there are some spaces that show up in your layout even if you haven’t specified CSS. For this reason, real developers almost always use a CSS reset to blow away the default stylesheet and thus to work from scratch.

The CSS resets are a very important and common pattern, especially among the various CSS frameworks. Most of the CSS frameworks out there contain some sort of CSS reset code at the start. More about CSS frameworks in later chapters.

Duration: 5 minutes

Duration: 9 minutes

Web Accessibility – An Introduction

Watch the following quick introduction to one of the most important aspects of Web Development: Web Accessibility. You will be reading more on the subject in subsequent lessons.

Duration: 1 minute