Skip to content

CSS3 Content is added #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nimrafathima wants to merge 1 commit into
base: master
Choose a base branch
from
Open

CSS3 Content is added #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 122 additions & 33 deletions learning/dashboard/buildingblock/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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 |
Expand All @@ -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.
Expand Down Expand Up @@ -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>`




.