From 753d76b51b953a3bd598c417681183569e894213 Mon Sep 17 00:00:00 2001
From: nimrafathima <123230022+nimrafathima@users.noreply.github.com>
Date: Fri, 24 Mar 2023 20:38:50 +0530
Subject: [PATCH] Update README.md

---
 learning/dashboard/buildingblock/README.md | 155 ++++++++++++++++-----
 1 file changed, 122 insertions(+), 33 deletions(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index 40d8f621..796834e5 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -1,8 +1,8 @@
-#  INTRODUCTION TO HTML5!
+#  *INTRODUCTION TO HTML5!*
 
 HTML stands for **Hyper Text Markup Language**. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5** is the <u> fifth and current version of HTML.
 
-## FEATURES:
+## *FEATURES:* 
   
 - By utilising the `<audio>` and `<video>` tags, it has added new multimedia features that support both audio and video controls.
 
@@ -20,7 +20,7 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 
 
 
-## Some of removed elements from html5:
+## *Some of removed elements from html5:*
 
 
 | Removed Elements                  |   Use Instead Elements |                    
@@ -39,6 +39,124 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 - Remove plugins like Flash for functionality that are universally required. 
 - Ensure uniformity across all devices and browsers.
 - Make every effort to be as transparent as you can.
+  
+  ## CSS3 Introduction
+
+A document produced in any markup language can have its appearance, style, and format demonstrated using CSS, a language. It is used to organize and style the design of Web pages, to put it simply. The most recent version of CSS is CSS3, which replaced CSS2.
+Some of the key modules of CSS3 are:
+
+ - Box model
+ - Image values and replaced content
+ -  Text effects
+ - Selectors
+ - Backgrounds and borders
+ - Animations
+ - User interface (UI)
+ - Multiple column layout
+ - 2D/3D transformations
+
+## Features of CSS3
+
+### Selectors
+Through the implementation of selectors, the web page designer can choose on more granular levels. A checked pseudo-class is also included in selectors to design checked items like checkboxes and radio buttons
+
+### Text Layout and Effects
+
+With CSS3, we can modify how text is justified, edit the document's spacing, and style how words are hyphenated.
+
+### First-Letter and First-Line Pseudo-Classes
+
+CSS 3 has features that assist with drop-cap positioning and kerning (changing the space between characters to obtain a nice result) (large decorative capital letter at the starting of a paragraph).
+
+### 4. Paged Content and Generated Media
+
+In Paged Media, CSS 3 offers more options like page numbers and running headers  and footers. Moreover, there are features for cross-references and footnotes that can be printed with Generated Content.
+
+### 5. A Multiple-Column Format
+
+This feature contains parameters for the column-count, column-gap, and column- width that enable designers to present their material in many columns.
+
+## Benefits of CSS3
+
+ - Using CSS3, navigable components can be positioned consistently and
+   precisely.
+ - A web page can be easily customized because it only requires making  
+   minor changes to a modular file.
+ - CSS3 makes it simpler to create graphics, which makes it simple to   
+   make the site appealing. It enables the viewing of online videos   
+   without the need for external plug-ins.
+ - CSS3 is affordable, quick, and   
+   supported by the majority of browsers.
+## CSS3 EXAMPLES
+ - ### Web Font : 
+  A Web Font is just a technique to use any font in your page, being downloaded instantly by the browser.This will be a radical departure from web design's prior use of just 10 to 15 generally accepted fonts. Yet, because only typefaces with valid licences should be used, this new function raises questions about copyright.
+  
+
+    @font-face  {
+    font-family:  'Name of the new font';
+    src:  url('https://designshack.net/fonts/font.ttf');
+    }
+![Example of page have been mocked up using this technique.](https://designshack.net/postimages/text_webfonts1.jpg)
+
+
+
+ - ### USER INTERFACE :
+ #### Resize 
+
+With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
+
+    .ui_resizable  {
+    padding:  20px;
+    border:  1px  solid;
+    resize:  both;
+    overflow:  auto;
+    }
+
+### Outline
+ Setting an element outline is already available in CSS2, but in CSS3 contains the facility to offset the outline away from the element — by a value you define. It varies from a boundary in two ways:
+ - Outlines don't occupy any room.
+ - Not all outlines must be rectangular.
+ 
+
+
+`
+
+    en.ui_outline{
+    -width:  150px;
+    padding:  10px;
+    height:  70px;
+    border:  2px  solid black;
+    outline:  2px  solid  #897048;
+    outline-offset:  15px;
+
+#### Multiple Columns Using CSS3
+Although CSS2 already has the ability to set an element's outline, CSS3 adds the ability to offset the outline from the element by a value you specify. It varies from a boundary in two ways:
+
+Outlines don't occupy any columns.
+Not all outlines must be rectangular.
+Multi-column layout is a new module added to CSS3 that is suitably named. It lets you to select how many columns text should be divided down into and how they should appear.
+
+    .multiplecolumns  {
+    -moz-column-width:  130px;;
+    -webkit-column-width:  130px;
+    -moz-column-gap:  20px;
+    -webkit-column-gap:  20px;
+    -moz-column-rule:  1px  solid  #ddccb5;
+    -webkit-column-rule:  1px  solid  #ddccb5;
+  
+   ![](https://designshack.net/postimages/multiplecolumns.png)
+
+
+### Spanning Columns
+
+span more than one column – a heading, table or image for instance.
+
+    enter code hereh2  {
+    column-span:  all
+    }
+![](https://designshack.net/postimages/multiplecolumns_heading.jpg)
+
+
 
 #  INTRODUCTION TO LSS
 - Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
@@ -91,35 +209,6 @@ SCSS also supports variables. Variables can be used to store values that will be
 
 In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
 
-# COMMONLY USED HTML TAGS
- **Document structure tag:**
-
-**1.HTML tag**: It is the root of the HTML document which is used to specify that the document is HTML.
-
-**Syntax:**
-
-`<html> Statements... </html>`
-
-**2.Head tag:** The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
-
-**Syntax:**
-
-`<head> Statements... </head>`
-
-**3.Body tag:** It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
-
-**Syntax:**
-
-`<body> Statements... </body>`
-
-**4.Title tag:** It is used to define the title of an HTML document.
-
-**Syntax:**
-
-`<title> Statements... </title>`
-
-
-
-
+.