Quick Overview of CSS

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

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>
<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.

<head>
    <style>
        body{
            background-color: blue;
        }
    </style>

Inline css

The styles are defined inside the opening tag of the element as follows.

<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;

    Selector{
Style: value;
   }

They can be divided into five;

1. simple selectors
They include;
-Element name e.g. p, h1, span, div

<p>Content</p>

    p {
color: red;
   }

-Id e.g. #title, #first-par. Note: that the id name should start with a # symbol.
e.g;

<p id='first-par'>Content</p>

    #first-par {
color: red;
   }

-Class selector e.g. .title Note that the class name is preceded by a dot.
eg;

<p class='par'>Content</p>

    .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

    Selector: pseudo-class {
Property: value;
   }

Example:

a:hover {
  color: #FF00FF;
}

4. Pseudo-element selector
selects only a specific part of an element
Syntax

Selector: pseudo-class {
Property: value;
   }

Example:

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.

MEDIA QUERIES

Media queries specify styles to be applied when certain conditions are meant.
Example;

@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.

Blog