Quick Overview of CSS
Tags: beginners, webdev, css, codenewbie
Published: 2021-11-24 07:26:45


Css is an acronym for cascading style is a styling language for HTML documents. It is used to define the appearance of the html elements.

In other words, we would call it the *make up* for the HTML

![gif](https://media.giphy.com/media/fuJPZBIIqzbt1kAYVc/giphy.gif)
##How do you attach CSS TO HTML?
**External css**
To attach a css file externally, you need to create a separate file, save it with .css extension and attach it on the head section of your html document. *Note* that the href attribute is used to define the path to your css file. Thus you must ensure that the pathname is correct.
```html
<html>
<head>
    <link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
<!--the body-->
</body>
<html>
```
**Internal css**
When using internal css, the styles are defined inside the `<style>` tags on the head section. 
```html
<head>
    <style>
        body{
            background-color: blue;
        }
    </style>
``` 

###Inline css 
The styles are defined inside the opening tag of the element as follows.
```html
<h1 style="color:red;">This is the first heading</h>
```
##Selectors
Selectors are used to select the code block you want to apply the styles.
syntax;
```css
    Selector{
Style: value;
   }
```

They can be divided into five;

**1. simple selectors**
They include;
-Element name e.g. `p`, `h1`, `span`,  `div`
```html
<p>Content</p>
```
```css
    p {
color: red;
   }
```

-Id  e.g. `#title`, `#first-par`. **Note**: that the id name should start with a **#** symbol.
e.g;
```html
<p id='first-par'>Content</p>
```
```css
    #first-par {
color: red;
   }
```

-Class selector e.g.  **.title** Note that the class name is preceded by a dot.
eg;
```html
<p class='par'>Content</p>
```
```css
    .par{
color: red;
   }
```
**2. Combinator selector**
They indicate relationship between elements. They include
      -**Descendant selector** e.g.  `div p{…..}` selects *all the paragraph elements in div*
     -**Child selector (>)**  e.g. `div >p{……}` *selects all the p elements that are children of a `<div>`*
     -**adjacent sibling ( + )**  selects an element that is directly after another specific element e.g. `div + p{…..}` *selects all the paragraph after the div element*


**3. Pseudo-class selector**

They are used to add styles to selectors only after meeting a certain condition
Syntax
```css
    Selector: pseudo-class {
Property: value;
   }
```
Example: 
```css
a:hover {
  color: #FF00FF;
}
```
**4. Pseudo-element selector**
selects only a specific part of an element
Syntax
```css
Selector: pseudo-class {
Property: value;
   }
```
Example:
```css
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
```

##Flex box and GRID

**Flexbox** is a one dimensional layout design where you specify if the items should be horizontally or vertically aligned.
References: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
**Grid** is a two dimension layout design i.e rows and columns.
https://css-tricks.com/snippets/css/complete-guide-grid/

##Transitions 

Transitions in CSS provide a way to control the speed of a changing property in css.
 For instance, if you increase the width of an object it occurs instantly. However, with transitions you can decrease this speed such that you observe every change as it happens.
Ref:
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
-https://www.w3schools.com/css/css3_transitions.asp

##Animations 

CSS animations makes it possible to animate different styles without using JavaScript or a library

Ref:
-https://www.w3schools.com/css/css3_animations.asp
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

##Responsive web design
Responsiveness is the art of ensuring that a web page looks good in all devices. That is, the  web design should adjust accordingly depending on the screen size, orientation and the platform.
The common ways to achieving responsiveness is use of flexible grids, media queries, and setting the viewport.
![Image description](https://media.giphy.com/media/9oIP19hZ9kzKJUmpdU/giphy.gif)

##MEDIA QUERIES
Media queries specify styles to be applied when certain conditions are meant.
Example;
```css
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```
###Breakpoints 
**CSS breakpoints** are points where the website content responds according to the device width
In the previous example, when the screen is resized to a maximum width of 600px, it will adopt to the given styles. i.e 600px is the breakpoint.