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

Post a Comment

Popular posts from this blog

Java Script Array Methods

Array is a collection of data of the same type, data is stored in the contiguous memory locations, arrays are accessed using index, the variable for which the array is assigned will be pointing to the address of first value of array, location of any item can be calculated quickly, thus accessing an array using an index is quick. Let us see some array methods in javascript. Array methods can be mutable or immutable Mutable meaning original array is modified Immutable meaning method will return a new array without modifying original array Let's be little animated, let's take array with animals as values.
Read more

HTML

Image
HTML (Hypertext markup language) is used to build web pages, which are accessed across internet, it defines the structure/skeleton of webpage content using different tags, ex: <h1>Heading1</h1> . Each tag represent a structure, which usually has opening and closing tags as above example, though there are few exceptions,which are self closing. ex: <br/> Below is the sample HTML structure. <html> &lt- root html tag <head> &lt- head tag has meta,title,style and script etc. tags <title>Title</title> </head> <body> &lt- actual page content goes inside <h1>Header</h1> <body> </html> Let's understand some basic HTML tags. Refer here for examples Below are the sample html problems to start with.
Read more