0. CSS - Fundamentals

In this series, I just noted these things about css which I have learnt CSS from scratch. I hope this series can help everyone remind knowledge about CSS.

Media queries

I can be understand as a condition for doing something.

if(condition) {
 // doing some thing here
}

@media (condition) {
  // Doing something here
}

In the css we have two generalized condition into the media query. They are 'max-width' and 'min-width' conditions.

max-width represent for these screens have width between 0 to max-width value

@media (max-width: 300px) {
  // the css code here only for these devices 
  // has width between from 0 to 300px.
}

min-width represent for these screens have width bigger than the value of min-width

@media (min-width: 300px) {
  // the css code here only for these devices
  // has width bigger than 300px
}

Selectors

It means specify what element will be applied the css styling.

/* All a elements will be applied*/

a {
  color: pink;
  text-decoration: none;
}

/* All a elements into article element will be applied*/

article a {
  color: pink;
  text-decoration: none;
}

/* Only a elements has li parent will be applied */
li > a {
  color: pink;
  text-decoration: none;
}

Pseudo-classes

Pseudo-classes used for external styles like history of the navigator :visited, status of its content :checked, or position of the mouse :hover

button:hover {
  color: blue;
}

You can also learn more here

Pseudo-elements

Pseudo-elements are like pseudo-classes, but they don't target a specific state. Instead, they target "sub-elements" within an element.

We need to use :: syntax instead : as in pseudo-classes

Some common Pseudo-elements

// setting color for pseudo-elements placeholder
input::placeholder {
  color: red;
}

// Adding a pseudo-element before p tag and style it
p::before {
  content: '>>';
  color: blue;
}

// Adding a pseudo-element after p tag and style it
p::after {
  content: '<<';
  color: blue;
}

Colors

CSS includes many different way to represent color.

• Using color name

p {
  color: red;
}

• Using hex code

strong {
  color: #ff0000
}

• Using hsl

// this is opacity is 1
.box {
  background-color: hsl(0deg, 100%, 50%);
}

// Setting opacity is 0.75
// using the '/' as separation for the opacity style
.box {
  background-color: hsl(0deg, 100%, 50% / 0.75);
}

Units

There are 3 units which used for changing size-related of these elements. They are px, em, rem

The px unit is a common unit. It use for set size directly on each element.

// setting width and height are 30px. It is fixed unit on the .box elements.
.box {
  width: 30px;
  height: 30px;
}

The em unit is a relative unit, equal to the font size of the current element.

// padding bottom is equal font-size*2, you can change font-size to view the changing of unit em.
p {
  font-size: 18px;
  border: 1px solid black;
  padding-bottom: 2em; // The real pixel is 2*18 = 36px;
}

The rem unit is quite a lot like the em unit, with one crucial difference: it's always relative to the root element, the tag.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; // equal  2*16
  margin: 0;
}

h2 {
  font-size: 1.25rem; // equal 1.25 * 16
  margin-bottom: 1.5rem; // equal 1.5 * 16
  color: gray;
}

p {
  font-size: 1rem; // equal 1 * 16
}

Typography

We use font-family to change the font.

Font families come in different styles.

• The 3 most popular:
  • Serif
  • Sans-serif
  • Monospace

Sans-serif vs Serif

// try to use sans-serif or monospace to see what will happen?

p {
  font-family: serif;
}

Text Formating

3 common formatting bold, italic and underline

Bold Text

/* Light, thin text*/
font-weight: 300;

/* Normal text */
font-weight: 400;

/* Heavy, bold text */
font-weight: 700;

Italic Text

font-style: italic;

Underline Text

/* remove underlines from anchor tags: */
a {
  text-decoration: none;
}

Alignment

We can shift characters horizontally using the text-align property

div.left {
  text-align: left;
}

div.right {
  text-align: right;
}

div.center {
  text-align: center;
}

Text Transforms

/* RENDER WITH ALL CAPS */
text-transform: uppercase;

/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;

Text Spacing

• Gap between characters using the letter-spacing property.
• Distance between lines using the line-height property.

h2 {
  letter-spacing: 3px;
  line-height: 2;
}

Thank you for reading.
Happy coding!!!