CSS Live Examples

CSS Selectors

Adding styling for an HTML tag directly(Element/Tag) Selectors)

Styling a paragraph tag using the id selector.

Making id selector, tag/element specific.

Adding style "class" on heading and paragraph.

Contextual Selection(Treating all strong tags inside a p to be treated differently)

---

CSS Comments

Single and Multiline Comments(CSS Comments)

---

CSS Backgrounds

Setting background color(Background Color)

Setting background Image(Background Image)

Setting Repeat Background property

---

Styling the Text

Defining color for the text(Text Color)

Defining direction for the text(Text Direction)

Spacing between letters of the words in the text.(Letter Spacing)

Horizontal alignment of the text(Text Alignment)

Defining Identation of the text(Text Indentation)

Decorating the text(Text Decoration)

Adding shadow to the text(Text Shadow)

---

Changing Text Fonts

Defining font face property for the text(Font Family)

Setting size of the font(Font Size)

Setting Font Style and Font Weight property for the text

Setting variation of specified or default font-family(Font Variant)

---

Styling HTML Links

Setting the style for the link states

Changing value of "cursor" property

Using cursor with HTML element/tag

---

Styling HTML Lists

Styling ordered and unordered lists

Positioning the list item markers

Image as List Item Markers

---

CSS Borders

Setting a border around an element(Border Style)

Setting width of the border(Border Width)

Setting color of the border

Setting 4 different color of the border

Setting border on any one side of an element(Setting border on one side)

---

Styling HTML Tables

Modifying border of table

Display a single border using border-collapse property

Setting height and width of a table

Setting text color and background of a table

---

CSS Margin

Setting margin around an element

---

CSS Padding

Setting padding around an element

---

CSS Box Model

Actual height and width of the element

Adding shadow to entire element box(Box Shadow)

---

Positioning of Elements

Static position for any page element

Relative position for any page element

Absolute position for any page element

Fixed position for any page element

Overlapping of elements

---

CSS Overflow

Defining Overflow Visible property of an element

Defining Overflow Hidden property of an element

Defining Overflow Scroll property of an element

Defining Overflow Auto property of an element

More about Overflow

---

CSS Float - right & left

Applying float property to an element

Applying clear property to an element

Handling height of the child element(Using overflow:auto hack)

---

CSS Border Radius

Providing rounded corners to any element

Rounded corners with different curvatures for any element

---

Styling Links into stylish Buttons

Styling link into a button

Adding more styling classes on top of style base class

Adding 5 different CSS Style Classes

---

Creating Navigation Bar

Creating Vertical Navigation Bar

Simple way to create Horizontal Navigation Bar

Another way to create Horizontal Navigation Bar

---

Creating Cards using CSS

Picture Card with CSS

Text Card with CSS

---

Designing a basic Webpage Layout

Designing a basic webpage layout

---

Adding Icons to Webpage

Using Font Awesome library into a webpage

Using Google Material Icons library into a webpage

Using Bootstrap Icons library into a webpage

---

CSS 2D Transformations

CSS 2D Transformations - translate() method

CSS 2D Transformations - rotate() method

CSS 2D Transformations - scale() method

CSS 2D Transformations - skew() method

---

CSS Gradients

CSS Gradient - linear

CSS Gradient - radial