CSS - Introduction

Overview

CSS, also known as Cascading Style Sheets, It is used to style elements in HTML and plays role in Web Development and so its really famous and this is not a programming language but rather a style sheet language, their are very few style sheet languages but some famous ones are SVG, VML, SASS, SCSS. CSS is this famous one of them all as its widely known and CSS has a really simple syntax so that's why people start off with HTML and then CSS as usually JS comes harder when it's the first time and CSS is also is JS so making it usable inside JS, it works with variables and just as same as the HTML-JS integrated in variables. Just like the `<script>` tag, CSS has a `<style>` tag and as same as JS, it has .css file which you can link using the `<link>` tag.

How It Works

In CSS, we select the element we want to style which is something like this `div`, then we have to use 2 curly brackets('{}') which should look something like this:

Div{

}

and inside the curly brackets, we have to put styling properties which style our element, some basic properties are Background-color:;, color:;, Etc

here's an example of how to use it:

div{

  background-color: red;

}

This makes a/the div's background color red.

Common Properties List

• color: This property sets the text color of an element, allowing you to specify a color using names, hexadecimal codes, RGB values, or other color representation
  • font-family: It defines the typeface or font for text within an element. You can specify a list of fonts, and the browser will use the first available font.
  • font-size: This property determines the size of the text. It can be set in various units like pixels, ems, or percentages.
  • font-weight: It controls the thickness or boldness of the text, allowing you to set values like "bold" or numeric values (e.g., 400 for normal, 700 for bold).
  • text-align: It specifies how text should be horizontally aligned within an element. Common values include "left," "center," "right," and "justify."
  • line-height: This property sets the vertical spacing between lines of text. It can be defined as a number or a percentage.
  • background-color: It defines the background color of an element. You can set it to a specific color using various color representations.
  • margin: The margin property controls the space outside an element, affecting its positioning in relation to other elements on the page. You can set margins for each side (top, right, bottom, left).
  • padding: Padding controls the space inside an element between its content and its border. It can be set for each side (top, right, bottom, left).
  • border: This property lets you define the appearance of an element's border. It includes properties for border width, style (e.g., solid, dashed, dotted), and color.