Intro of CSS

Estimated reading time: 2 minutes

What is CSS

CSS stands for Cascading Style Sheets. Its purpose is to style markup languages (like HTML or XML). Therefore, CSS is worthless on its own, unless associated with an HTML document.

CSS brings an HTML document to life, by choosing fonts, applying colors, defining margins, positioning elements, animating interactions, and much more.

How CSS work

CSS is a 3-part process:

  • the selector{} defines who is targeted, which HTML element(s)/ atrributes(id,class)
  • the property: defines what charateristic to alter
  • the value; defines how to alter that charateristic

~~ selector - elements —

Selector

css-selector

elements

a{ /* Links */ }
p{ /* Paragraphs */ }
ul{ /* Unordered lists */ }
li{ /* List items */ }

classes .

Of all HTML attributes, the class attribute is the most important for CSS. It allows us to define a group of HTML elements that we can target specifically. Just put a dot . in front of the class name you want to use:

.test {
  color: red;
}

IDs #

You can also use the id attribute in your HTML, and target it with a hash # in your CSS: #test{ color: orange;}

Universal selector *

An asterisk * is the universal selector for CSS. It matches a single element of any type . a common universal selector you can find below…

Child selectors >

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first selector1 > selector2 { style properties }

Hierarchy selectors

A space in a selector defines a ancestor/descendant relationship

header a {
  color: red;
}

Grouping selector ,

If you have elements with the same style definition that time use this. ex: #maincontent p, #maincontent ul { padding-top: 1em; }

Pseudo-class selectors

Pseudo-class selectors are attached to usual selectors and start with a colon :

CSS BASIC

CSS MASTER

News/blog

validation

cheatsheet

css, ui, ux