HTML & CSS: A Quick Refresher

Hello and welcome to the second lesson of the Learning JavaScript series.

This post will be short and simple, a quick refresher of HTML and CSS. In the next post we will get started with Basics of JavaScript.

If you missed it, here is the Introduction to JavaScript lesson.

Before looking at JavaScript, let’s clarify some HTML and CSS terms. Note how HTML attributes and CSS properties use name/ value pairs.

HTML Elements

  • HTML elements are added to the content of a page to describe its structure. An element consists of the opening and closing tags, plus its content. 
  • Tags usually come in pairs with an opening tag and a closing tag. There are a few empty elements with no content, (e.g., <img>). They have one self-closing tag. 
  • Opening tags can carry attributes, which tell us more about that element. Attributes have a name and a value. The value is usually given in quotes. 

 

Screen Shot 2020-04-08 at 2.29.08 PM.png
HTML Element Example

 

CSS RULES

  • CSS uses rules to indicate how the contents of one or more elements should be displayed in the browser. Each rule has a selector and a declaration block. 
  • The CSS selector indicates which element(s) the rule applies to. The declaration block contains rules that indicate how those elements should appear. 
  • Each declaration in the declaration block has a property (the aspect you want to control), and a value, which is the setting for that property

 

Screen Shot 2020-04-08 at 2.30.20 PM.png
CSS Element Example

 

If you want to recap and practice your HTML skills: W3schools HTML

If you want to recap and practice your CSS skills: W3schools CSS

 

Thank you,

One response to “HTML & CSS: A Quick Refresher”

Leave a comment