In this lecture, we'll introduce structural and semantic HTML elements, their role in creating layout and describing the content of Web pages, and an introduction to CSS including the use of selectors, CSS specificity and typography. The lecture will also provide an introduction to form elements that allow users to input data and interact with Web pages.
CSS, or Cascading Style Sheets is a language created to change the appearance of content. By referring to the HTML tags you can style it in various ways: change the font size, increase the height or attach a background image to it.
There are 3 basic ways to write CSS:
- In an external stylesheet: a
.cssfile, that is linked to a.htmlfile. - In the of a
.htmlfile. This is done using the<style>tag. - As part of the attribute
styleinside any HTML tag.
In practice, you'll always write your CSS in separate .css files. This is because you want to make sure every file has a single purpose: an HTML file should only contain the content and structure of a page, while a stylesheet should only contain styling rules that apply to a page.
"In CSS, everything is a box". This phrase summarizes a central concept in HTML/CSS: the box model. When building a web page each element can be considered a box that has the following properties: margins, borders, paddings and content. Starting from the first element within the , everything that comes after will be pushed down (thanks to these 4 properties).
The first C in CSS stands for Cascading and it's crucial to learning how to use CSS correctly. Essentially, it means that it matters (1) in which order and (2) how specific you write CSS rules.
Read the following articles to learn about it:
Forms are a useful and familiar tool to interact with your users.
Beware of form validation! As a rule, users will think of creative ways to misuse your product wether by malice or mistace that you can hardly think of. Form validation to the rescue.