HTML and CSS
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.
html-img-1.jpg
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.
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
This lets items that cannot fit on one line move to the next line.
Join our discord server for updates, announcements, future event planning, to ask questions, or just for fun!
Copyright ©2021 Howard County Hour of Code