CSS Basics

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Basics

CSS basics walks through what you need to get started.

CSS Syntax

A CSS rule-set (Comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document) that consists of 3 part :

• Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, the color property can have value either blue or #0000FF, etc.

selector { property : value; }

h1 {
    color : #333333;
}

Comments

Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute and is ignored by browsers. comments have no effect on the layout of a document. A CSS comment is placed inside the <style> element, both single and multi-line comments and starts with /* and ends with */.

/* This is a single line comment: */
table {   
    font-size: 16px  /* 1rem = 16px */
}
  
/* This is a multi-line comment: 
This is second line.
This is another line.*/