Understanding HTML and CSS


The Basics

HTML tags are formatted like this:

<element attribute="value">{content}</element>

Where {content} is a nested element or text inside the parent.

HTML elements

You can find a starter set of elements here.

HTML Attribures

You can find a starter set of Attributes here.

CSS Declarations

CSS declarations are formatted like this:

selector {  
  property: value;  
}

Example with html:

HTML:

<div class="main-content"></div>

CSS:

.main-content {  
    width: 100%;  
    height: 100vh;  
}

This sets the width of the element with the class main-content to 100% which spans the whole width of the parent.
And it sets the height to 100vh which spans the whole height of the document.

CSS Properties and Values

You can find a set of Properties & Values here.

More CSS Selectors

Attribute Selector

In HTML:

<p inner-p-element></p>

In CSS:

[inner-p-element] {  
    padding: 0;  
}