Just the basics
CSS is a declarative language. The purpose of CSS is to provide styling for html documents. When you declare a CSS style you declare
1. Where the style be will applied
2. What style will be applied to the elements
Lets first look at an html element. These elements have attributes – CSS can be applied based on the element or the attributes. Here is an example;
<h1 id='elementID' class='aSampleClass'>A Top Level (1) Header</h1>The little piece of html above defines a header element – in this case the highest level (level 1). If we want to apply some CSS to this, it is pretty easy. The CSS declarations can be in the same document or in a separate document (CSS extension).
h1 {color: blue; font-size: 15px }The little piece of code above says to apply the color blue and set the font size to every h1 element in the document.
#elementID {color: blue; font-size: 15px }The piece of code above will apply the styling to only the element with the ID elementID. Because elements ID’s are all supposed to be unique, this styling wil only be applied to one element. It is on the author to make sure ID’s are unique.
.aSampleClass {color: blue; font-size: 15px }This piece of code will apply styling to every element that has the class aSampleClass defined. Classes are useful when you want to have multiple elements associated with it.
These are the basic applications of style. Of course there are more ways to apply styles. If you understand the basics of CSS (items 1 and 2 above) then the rest of CSS will become much easier.
Learning More: Here are some links to help you get the most out of your CSS. You can spend a lot of time learning neat CSS tricks and have a lot of fun with them too.
W3 Schools CSS tutorial – https://www.w3schools.com/css/default.asp
Flex Boxes (useful) – https://css-tricks.com/snippets/css/a-guide-to-flexbox/