Basic Syntax and Structure

CSS stands for Cascading Style Sheets and is used to style and layout HTML documents.
CSS rules are made up of selectors and declarations.
A selector identifies the elements to be styled, and a declaration consists of a property and a value.
Declarations are separated by a colon (:) and surrounded by curly braces {}.

Common Properties

font-family: Specifies the font to be used for the text
font-size: Specifies the size of the font
color: Specifies the color of the text
background-color: Specifies the background color of an element
width and height: Specify the width and height of an element
margin: Specifies the space around an element
padding: Specifies the space inside an element
border: Specifies a border around an element
display: Specifies the type of box an element should be displayed as (e.g. block, inline, inline-block)

Element selectors: Select elements based on their tag name (e.g. p, div, span)
Class selectors: Select elements based on their class attribute (e.g. .warning, .error)
ID selectors: Select elements based on their id attribute (e.g. #header, #footer)
Attribute selectors: Select elements based on their attributes (e.g. a[href], input[type=text])

CSS has a "cascade" of rules, where rules with higher specificity take precedence over rules with lower specificity
CSS also has "inheritance," where properties are inherited from parent elements to child elements

Every element in an HTML document is treated as a box, with properties for content, padding, border, and margin
The width and height of an element refer to the content area, and the padding, border, and margin are added to the outside of the content area

CSS provides several positioning schemes, including static, relative, absolute, and fixed
Static positioning is the default and positions an element according to the normal flow of the document
Relative positioning offsets an element from its normal position
Absolute positioning removes an element from the normal flow of the document and positions it relative to its nearest positioned ancestor (if any) or the initial containing block
Fixed positioning positions an element relative to the browser window and it stays fixed even when the page is scrolled

CSS allows elements to be floated to the left or right of the page
Floated elements are removed from the normal flow of the document and other elements will flow around them
Clearfix is a common technique used to contain floated elements

CSS grid systems are used to create a structured layout using rows and columns
There are several popular grid systems available, including Bootstrap, Foundation, and Semantic UI

CSS media queries are used to create responsive designs that adapt to different screen sizes and devices
Media queries can be used to apply different styles based on the width, height, resolution, and other features of the user's device

There are various resources online to learn more about CSS. Some of the best resources include: