Understanding CSS part 1

source: https://codepen.io/armyyazilim/pen/Jjooqrj

Intro:

There are many ways to style your application. If you’re like me, and do not understand CSS very well, hopefully this mini series of blogs will help you understand CSS a little better. CSS or Cascading Style Sheets describes how HTML elements should be displayed in the browser. CSS can control the layout of multiple web pages all at once! CSS is used to define the styling of your web pages, this includes the design, layout, and versions in display for different devices and screen size.

Syntax:

The syntax of CSS consists of a selector and a declaration block, the selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. The declaration includes a CSS property name and value separated by a colon. Multiple CSS declaration are separated by semicolons and a block of declarations or inside of curly braces.

Element Selecting:

p { 
  color: red;
  text-align: center;
}

Selecting like this can be dangerous, because this will end up giving the same styling for every P tag or whichever element you call it on you may not want for every P tag to look the same everywhere in your app.

#id {
  text-align: center;
  color: red;
}

This is more direct this styles individual elements with specific IDs, IDs should be unique to every element. ID is called with the “#” sign before the Id.

.class {
  text-align: center;
  color: red;
}

This is a little more helpful because multiple elements can have the same class name, and if you want an area to have a certain style you can group those elements together with the same class name and they would all get the same styling. Class is called with “.” before the class.

* {
  text-align: center;
  color: red;
}

This is also very dangerous because this will style EVERYTHING on your HTML page with no regard for anything else.

h1, h2, p {
  text-align: center;
  color: red;
}

If you notice you are using the same style for multiple elements you can group them together.

I believe it is not a matter of what is right or wrong when it comes to CSS, it is more about finding the balance of what styles should be where, not everything should be one style, that would just be too plain and boring. But there should not be a different style for every element, that would make things way too confusing for the user.

Here is part 2 :) https://medium.com/@mjhorowitz714/understanding-css-part-2-200a87f28d15

Resources: https://www.w3schools.com/css/default.asp