cd— title: subtitle: Ma description : Ma date: 2022-03-15 tags: [“example”] categories: [‘example’] bigimg: [{src: “/img/finance.jpeg”}] draft: true

CSS

  • A Cascading Style Sheet, commonly known as CSS, is the layer of styling over HTML elements
  • CSS takes care of the presentation, look and display of the page.
  • CSS crash course

CSS history

CSS1 was originally released in 1996. Allows the user to select font style and size and change the colour of the text and background.

CSS2 was released in 1998 Has capabilities that allows the user to design page layout.

CSS3 was released in 1999

There will never be called CSS4. All new feature are added as extension to the current(css3) version.

Understanding the CSS Syntax

  • selector, property, value –> declaration Image

CSS can be used in 3 ways

Inline CSS

  • Add css directly in html tag - Not recomended
    • Hard to read/debug
    • Repetition
# index.html
<body>
  <h1 style="color:red" > Hello Amrit</h1>
  <h3 > Welcome </h3>
  <p> Lorem ipsum dolor sit amet consectetur.</p>
</body>

Internal CSS

  • Add css in <style> tag within the .html file and apply the css to the selectors
  • Less Recommended - it make the html file bulky
# index.html
<html>
<head>
  <title>Document</title>
  <style type="text/css" >
    h3{
      color: blue
    }
  </style>
</head>
<body>
  <h1 style="color:red" > Hello Amrit</h1>
  <h3 > Welcome </h3>
</body>
</html>

External CSS

  • Linking an external .css file - Recommended
    • Better in caching
    • Easy to maintain
# index.html
<html>
<head>
  <link rel="stylesheet", type="text/css" href="style.css">
</head>
<body>
  <h3 > Welcome </h3>
</body>
</html>


# style.css
h3{
  color: green;
}
  • Placement of external-css-files
    • Put stylesheet references at the top
    • i.e at the <head> section of your HTML document

CSS colour

A color value can be specified using one of the methods listed below:

  1. By keywords: <named-color> (such as blue or pink)
  2. By hexadecimal notations: <hex-color> (such as #ff0000)
  3. By <color-function>, with parameters in a color space
  • rgb(255,255,255) – white
  • rgb(0,0,0) – black
  • rgb(128,128,128) – grey

Hex Color

The <hex-color> CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The RGB with AA indicating its transparency

#000000 -- Black
#FF0000 -- Red
#00FF00 -- Green
#0000FF -- Blue
#FFFFFF -- White
  • The syntax is case-insensitive: #00ff00 is the same as #00FF00

CSS Variables

:root {
    --rw-yellow: #ffbb30;
    --rw-black: #242424;
    --rw-grey: #818181;
}

body {
    height: 100%;
    background-color: var(--rw-yellow);
}

Fonts

*Serif, Sans-serif

  • These are system font and are defined in browser.
  • The browser will have a default font to use for each type in the system
  • Google Fonts

Icons

Fontawsome