CSS Basics

CSS (Cascading Styles of Sheets) is the language used for styling the HTML documents/elements. Web page with plain HTML is like human skeleton without any skin/muscle, while HTML with CSS is like Human with skin,muscle and skeleton. CSS Improves the User Experience and asthetics of the web page.

Cascading styles meaning the style applied to parent element will be cascaded down to child elements. Styles of higher precendence override the lower precendence. Example is, we may apply the font size of the body tag(Parent) to 16px, while applying font size 20px to a div(child), 16px will be overriden by 20px. if there is no font size mentioned then it will take 16px font size from parent's style.

Basic syntax of css style is as below

selector{  property_name: property_value; }

There are different ways, we can include css styles for the HTML page.

  • In-line styles
  • Applied using style attribute of the HTML element.

    ex: <span style="color:red">Test</span>

  • Internal styles
  • Adding <style> under <head> tag

        ex: <head>
                <style>
                span{
                    color:red;
                }
                </style>
            </head>

  • External styles
  • Adding external style sheet with css styles<style> under <head> tag

    Ex:<link type="text/css" rel="stylesheet" href="https://example.com/test.css">

Each Browser has default styles for HTML elements. we can override the styles with different approaches mentioned above.
Let's understand the basic CSS selectors.

CSS Selectors

CSS Attributes

Color

color attribute applies color to the text content, it can take values of pre-defind color names ,RGB, HEX, HSL, RGBA, HSLA.

RGB
Red(0-255),Green(0-255),Blue(0-255)
HEX
Hexadecimal number for each color is from 00 to FF
HSL
Hue(0-360); Red(0-120),Blue(120-240),Green(240-360)
Saturation(0%(shade of grey) - 100%(full color))
Lightness(0%(dark) - 100%(white))
RGBA
Red,Green,Blue and Alpha
Alpha (0(transparent) - 1(opaque))

Background

Background is used to set the background for the html element. Just like this way or we can insert an image or color or gradient colors as backgrounds. background is a short hand for mutliple properties. These are

background-color
{  background-color:'lightgreen'; }
test
background-image
{  background-image: url(./watermark_macha.png)'; }
test
background-repeat
{  background-image: url(./watermark_macha.png)';  background-repeat: no-repeat'; }
test
background-position
{  background-image: url(./watermark_macha.png)';  background-repeat: no-repeat';  background-position: center; }
test
background-attachment
{  background-image: url(./watermark_macha.png)';  background-repeat: no-repeat';  background-position: bottom right;  background-attachment:attachment; }
test
test
test
test
test
test
test
test
test

Box Modal

Box modal is a box that wraps around an HTML element. it consists of padding,margin,border and content. Example below Shows the box modal.

Each element has a default margin and padding as dictated by browser.
  • border
  • Every element will occupy some space in the html document. the rectangular sides that bound the element are borders.
    border-color
    {  border-color:lightgreen; }
    test
    border-style
    {  border-style:dashed; }
    test
    border-width
    {  border-color:blue;  border-width:5px; }
    test
    border-sides
    {  border-left: 2px solid red;  border-right: 2px dotted blue;  border-top: 2px dashed green;  border-bottom: 2px double black; }
    test
  • padding
  • The Area between Border and the content.(inspect test box using developer tools(F12) to understand example)
    padding
    {  padding-left: 5px;  padding-right: 10px;  padding-top: 5px;  padding-bottom: 20px; }
    test
  • margin
  • The Area outside the Border, when applied it will push other elements accordingly.(inspect test box using developer tools(F12) to understand example)
    margin
    {  margin-left: 5px;  margin-right: 10px;  margin-top: 5px;  margin-bottom: 20px; }
    test

Comments

Popular posts from this blog

Java Script Array Methods

Computer Science Basics

Javascript Date Methods