HTML and CSS
16pts
Web Dev
The basics of creating and styling webpages with HTML and CSS
Web development is a growing field in computer science. To begin, we
must learn HTML and CSS. HTML, or Hypertext Markup Language, is a
standard markup language used for web pages displayed in a browser.
CSS, or Cascading Style Sheets, allows you to style your HTML page
by changing the font, color, padding, and much more. These two
languages are the basics of creating web pages, so let’s get into
it.
HTML Tags
In HTML, we use opening and closing tags to show when an element
starts or ends. Here are some of the most commonly used tags:
-
The
<html> element is the root element of an HTML page -
The
<head> element contains meta-information about the HTML page, such as the title, description, stylesheet imports, and other information. -
The
<title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) -
The
<body> element defines the document's body. Here is where all the content will go including the headings, paragraphs, images, tables, etc. -
The
<h1> element defines a large heading. There is also<h2> ,<h3> ,<h4> ,<h5> , and<h6> . Higher numbers signify smaller headings. -
The
<p> element defines a paragraph.
HTML is very easy to pick up, so if you would like to learn more
about other tags, semantic HTML, or anything else,
W3Schools
is a great resource for that.
CSS Selectors
In CSS, we use selectors to describe what parts of our document
follow a certain style. Here is an example:
Code:
h1 {
font-size: 70px;
}
Here, all <h1> elements will all have a font
size of 70px.
Element names are not the only types of selectors we can use. The
two main ones are the class selector and the
id selector.
The class selector uses a . like this:
Code:
.class_name {
font-size: 70px;
}
The id selector uses a # like this:
Code:
#id {
font-size: 70px;
}
You can also group multiple classes or ids that you want to have the
same style in one line by separating them with commas:
Code:
h1, .class_name, #id {
font-size: 70px;
}
This code could replace the 3 separate code sections with just 3
lines.
Box Model
The Box Model is a way to understand the spacing that wraps each
element.
The difference between margin and padding is that margin is outside
of the border while the padding is inside the border and outside the
content.
Here is an example:
Code:
.div {
margin: 20px;
padding: 30px;
border: 15px solid blue;
}
Flexboxes
Flexboxes help you lay out, align and distribute space among items
in a container when the size of an object is unknown. It dynamically
changes the margins, padding, alignment, etc based on the elements
inside it, hence the name flexbox (flexible).
There are many things flexboxes can be used for, so here we will
just list a couple of the most common ones. If you would like to
learn more, see this
complete guide.
flex-grow
flex-grow: 2;
It uses the number given as a proportion. For example, if one item has a flex-grow of 2 and the other is 1, the first item will 2 times wider than the second.
It uses the number given as a proportion. For example, if one item has a flex-grow of 2 and the other is 1, the first item will 2 times wider than the second.
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
This lets items that cannot fit on one line move to the next line.
This lets items that cannot fit on one line move to the next line.