what do you means by CSS?

• Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
  simplify the process of making web pages presentable.
• CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
  text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
  what background images or colors are used, as well as a variety of other effects.
• CSS is easy to learn and understand but it provides a powerful control over the presentation
  of an HTML document. Most commonly, CSS is combined with the markup languages HTML
  or XHTML.
  
  

Advantages of CSS:

• CSS saves time – You can write CSS once and then reuse the same sheet in multiple
• HTML pages. You can define a style for each HTML element and apply it to as many
• web pages as you want.
• Pages load faster – If you are using CSS, you do not need to write HTML tag
• attributes every time. Just write one CSS rule of a tag and apply it to all the
• occurrences of that tag. So, less code means faster download times.
• Easy maintenance – To make a global change, simply change the style, and all the
• elements in all the web pages will be updated automatically.
• Superior styles to HTML – CSS has a much wider array of attributes than HTML, so
• you can give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility – Style sheets allow content to be optimized for more
• than one type of device. By using the same HTML document, different versions of a
• website can be presented for handheld devices such as PDAs and cellphones or for
• printing.
• Global web standards – Now HTML attributes are being deprecated and it is being
• recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages
• to make them compatible with future browsers.

CSS ─ SYNTAX:

• Selector: A selector is an HTML tag at which a style will be applied. This could be any tag likeor etc
• Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc

You can put CSS Style Rule Syntax as follows:

selector { property: value }

CSS Pseudo Selectors:

hover – Apply rule when mouse is over element (e.g. tooltip)
p:hover, a:hover {
background-color: yellow;
}
a:link, a:visited – Apply rule when link has been visited or not visited (link)
a:visited { a:link {
color: green; color: blue;
} }

CSS Properties:

Control many style properties of an element:

• Coloring
• ● Size
• ● Position
• ● Visibility
• ● Many more: (e.g. p: { text-decoration: line-through; })
• ● Also used in animation

CSS Box Model:

position property:

• position: static; (default) – Position in document flow
• position: relative; Position relative to default position top, right, bottom, and left properties
• position: fixed; Position to a fixed location on the screen via
• top, right, bottom, and left properties
• position: absolute; Position relative to ancestor absolute element via
• top, right, bottom, and left properties

Some more common properties:

background-image: image for element’s background
background-repeat: should background image be displayed in a repeating
pattern (versus once only)
font, font-family, font-size, font-weight, font-style: font
information for text
text-align, vertical-align: Alignment: center, left, right

Element visibility control properties:

display: none; – Element is not displayed and takes no space in layout.
display: inline; – Element is treated as an inline element.
display: block; – Element is treated as a block element.
display: flex; – Element is treated as a flex container.
display: grid; – Element is treated as a grid container.
visibility: hidden; – Element is hidden but space still allocated.
visibility: visible; – Element is normally displayed.

Flexbox and Grid layout:

• display: flex; (Flexbox)
• display: grid; (Grid) newer layout method
• Items flex to fill additional space and shrink to fit into smaller spaces.
• Useful for web app layout:
• Divide up the available space equally among a bunch of elements
• Align of different sizes easily
• Key to handling different window and display sizes
• Flexbox – Layout one dimension (row or column) of elements
• Grid – Layout in two dimensions (rows and columns) of elements
• Covered in discussion section

Types of CSS: There are three types of CSS so given in below:

• Inline: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS.
• Internal or Embedded: The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. 
• External: External CSS contains a separate CSS file that contains only style property with the help of tag attributes.

Example: Let’s see a small example of HTML webpage with CSS styles. Here, we use styles to set the alignment and text color of a webpage.

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Simple webpage
    </title>
 
    <!-- Stylesheet of web page -->
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>