Design for beginners

Wordpress Newspaper theme Free - Magazine News

noreply@blogger.com (Design for Beginners) — Wed, 22 Apr 2020 13:10:00 +0530

Wordpress Newspaper theme Free - Magazine News

3 Powerful Reasons to Chose Jannah Newspaper theme

1. No.1 feature of this theme is more than a year in development by experienced web design

company, the team behind the No 1 Selling News Theme

2. This theme is real world features like ‘Select & Share’ Web-based Push Notifications and native

GIF Support , that is most important feature .

3. Mobile Navigation for today’s modern devices PLUS powerhouse AJAX Mega Menus inbuilt .

IF You want to download News paper theme
Click here..

Online Publishing Reimagined for WordPress

Jannah takes a fresh check out the planet of publication in today’s modern age of content
marketing and flips it on its head with a shocking design, fresh layout options, modern sharing
options and integration of hottest extensions for WordPress for max flexibility.

Responsive for Today’s Modern Devices

Of course, Jannah features a fully responsive design that not only adapts to all or any of today’s
modern devices but responds to the foremost up so far mobile devices for swipeable content.
It also appears to think for you with intelligent menu features that adapt to the user’s device to
make sure they need the simplest , most seamless experience possible while consuming your
content.

AMP

Fully compatible with the Accelerated Mobile Pages (AMP) Project, so your content is mobile-
optimized content and loads FAST, everywhere.

SEO Optimized

Jannah has the products when it involves SEO too, with Articles and Reviews Schema to support
snippet views from longer articles.

Optimized with full support for the super popular Yoast Plugin so you'll get more visitors from
Google and BING Search, plus HTML SEO support so Search engines can devour ranking signals
from specific HTML elements, also as SEO Rich Snippet support for add-ons like Reviews,
Ratings, and Photos.

High Performance, Blazing Speeds

Did someone say ‘Need for Speed?”
Jannah has taken speed up a notch with several advanced developments behind the scenes to
offer you truly blazing page load speeds and website performance generally .

Lazy Load – Means images load when the user requires it.
Minified Version for JS – works an equivalent as jquery.js but is smaller in size for your production
website.
Minified CSS Resources – removes the spacing, indentation, newlines, and comments.
Built-in Cache to scale back DB Queries.
Compatabile with the favored cache plugin WP Super Cache.

bbPress Integration

The industry best practice forum software for WordPress by the creators of WordPress. this
suggests you'll rest assured you'll easily setup discussion forums inside your WP site easily.
It’s easy to moderate, fast and clean and is managed from the one central account and features a

One-Click install.

Pre-Skinned Demos
Go Dark, or keep it Light and fluffy – Jannah has you covered with easy to update Skins with Light,
Dark and everything in between skins ready.

Almost 1,000 Font Options

With over 800 Google Fonts and +150 FontFace.me fonts included in Jannah, you'll make certain
to seek out the one that suits.
Nothing to update or install, everything included under the hood.

GIF Support
Who doesn’t love an honest GIF meme?
Fundamental to the success of huge viral sites today, GIFs play an enormous part in consumer
content and you would like to be ready to support it natively, no messing around, no extensions or
plugins needed.
Jannah supports GIF images natively for an outstanding end-user experience.

Customizable Layouts
Go crazy with a custom layout!
Bordered, Fullwidth, Boxed, Masonry or straight up One Column. Layouts are the inspiration of
how your site goes to seem and having a versatile system to maneuver it around and see how it
fits together with your content is crucial.

Jump-To Contents
Adding hotspots to your content so users can Jump-To a selected point in long-form content may
be a good way to assist navigation.

Ajax Mega Menus

A really hot menu is vital with an outsized site crammed with plenty of top notch content. an honest
menu should entice users to stay around, check out other pages and desire they know where
they're in the least times.

With our Ajax powered mega-menus leave no stone unturned with a dynamic range of exciting
menu options that are bound to exceed your expectations.

Mobile Navigation

Stand out from the gang with a beautifully styled, customizable mobile navigation for your new site.
Available off-canvas you'll modify backgrounds to be Solid Color, Gradients or Images. Set the
colour and enable/disable Social Icons and therefore the Search Form.

Select and Share
This is a very neat feature we all know you're getting to love. With Jannah and ‘Select and Share’,
the top user is on top of things of the share function.
All they have to try to to is highlight the copy or key point they need to Share, and Jannah
automatically recognizes this because the Social Media share function with a pop-up model that
shows the sharing options you've got enabled. Boom!

Email Marketing
Build your email distribution list!
Everyone knows that your email list is your most powerful marketing tool in today’s environment, so
Jannah features a complete integration with the industry standard tools including MailChimp and
Feedburner.

Parallax Effects & Video Backgrounds

A beautifully constructed Landing Page, Homepage or CTA should engage and motivate into action. an excellent thanks to do that is with a live feel – backgrounds that scroll with content or
make use of a page background for dramatic effect.

One Click Import with Demo Content
With over 20 fresh demo builds able to roll out, and always more being developed, Jannah features a fully featured web design ready for you.

Find a demo that highlights your look and feels the simplest , then use our One-Click Demo Import
feature to urge your design setup nice and straightforward . From there you merely got to update
together with your own content and customize to your heart’s desire.

Dedicated Advertiser Space
What good is putting all this effort into a top-notch content marketing site, blog or news site without
having the ability to monetize? Nu-uh, not on today’s web baby.

That’s why Jannah isn't only optimized for WooCommerce for all of your eCommerce needs, but
there are specific pre-defined spaces for Ads!
Reserve spots for partners or affiliates or sell a page takeover to the very best bidder. With the
foremost common ad block sizes inbuilt all you would like to try to to is copy your AdSense code
over and bam! Jannah takes care of the remainder .

Unique BuddyPress Design
Take it up a notch with a totally integrated social media community or network inbuilt with a slick
BuddyPress Design for that sticky user experience.
Built into the Jannah template so it's a bit like the remainder of your design, you'll even prefer to
add Notifications into your menu for that real-time social feel that keeps users returning for more.

20+ Pre-made Demos
Our demos are quite just a skin – with over 20 to chose from each demo may be a fully functional
website with Pages, Menu structures and Demo Content designed to require the hard workout of
building your site.

Chose a demo and install with one-click simplicity, update together with your own content then sit
back and reap the rewards. With styles that include Automotive, Hotels, Pets, School, News, Sports, Video and Fashion we are sure you're getting to find something you're keen on .

Unlimited Header Styles
There’s nothing quite sort of a good Header. Jannah helps bring out the bold in you with complex
layouts rooted in graphic design principles. Take your design to subsequent level with a myriad of
various header styles that are limited only by your imagination.

Instagram Widget
Instagram is one among the foremost popular social media photo sharing websites today. having
the ability to integrate your website together with your newsfeed of awesome content from Instagram is vital to a successful news, blog, magazine or fashion website.

With Jannah’s Instagram widget you'll select from different layouts to fit your needs, simply add
your handle, select your style and tell Jannah where to put it, no coding required.

Amazing Page Builder
Jannah includes a built-in drag and drop page builder which helps you to customize your design in
blocks and therefore the simplicity of drag and drop.
Building unique layouts is certainly a hot design topic of recent years, recognizing this Jannah
proudly offers a singular Page Builder inbuilt . With stacks of cool blocks to urge you started, you'll
add the facility Ajax Filters and Pagination to your site for the last word in speed and user experience.

All from the familiarity of the WordPress Dashboard. How good is that?

Powerful & Easy to Use Theme Options
You are getting to LOVE the TieLabs Theme Options panel in Jannah. So comprehensive yet simple to use you maintain full control over your design choices within an easy WordPress environment while making sophisticated changes with the convenience of a click.

Styling, Typography, Share Buttons, Sidebars then far more is all available to tinker with from the
facility of the Theme Options Panel in Jannah.

Translation Ready
Fully prepared for translation to any language using po & mo files, also you'll translate the theme
easily via the built-in Translation panel.
Jannah is Fully Compatible With the WPML Multilingual Plugin so you'll Create Multilingual

Websites

Stunning Video Playlists
Building Video Playlists for users may be a good way to scale back your Bounce Rate and keep visitors longer. It’s that straightforward and fully integrated into the backend of Jannah.

Rack em up and offer a beautifully fluid block with a scrolling list that's easy to access, intuitive to
use and your users never need to leave your site again.

Animated Weather Widget
A gorgeous feature we are really pleased with at TieLabs and unique to Jannah is our real-time Animated Weather Widget. a bit like the familiar experience of a mobile experience, let your users
found out a location and display real-time weather for the day and week ahead.

Web Notifications
Web Push notifications allow your users to opt-in to timely updates from your website. Really give
that compelling reason to stay around with Live Notifications! It’s another great feature built into
Jannah that's getting to have you ever squealing on behalf of me . this is often a marketers dream!

Custom Widgets

Sometimes fixing your required Widgets is simply a tedious necessity, which is why we took the
tedium out of Jannah for you with a series of ready-to-go custom widgets, which we all know are
getting to tick all of your boxes.

All styled to take a seat beautifully inside the planning you stipulate.
Select from 12 Social Counters, Social Widgets and Post Lists Widgets to make that impossible to
resist homepage design you've got been dreaming of.

Social Counters – show all important Subscribers, Facebook Fans, Twitter Followers and more with Jannah’s inbuilt Social Counter Widget
Social Widgets – Subscribers, Instagram, SoundCloud, Flickr, Google+, Dribble, Facebook and far
more to finish your digital ecosystem
Post List Widgets – show Recent content, Most Viewed Content, Popular Posts and more with a
selected widget fit duty.

Advanced Ecommerce with WooCommerce Extended
Whether you would like something complex with Smart Filters to assist users dig deep into an
enormous catalog of fashion and accessories, or something simple that appears incredibly elegant
on mobile, Jannah has you covered.

Designed and developed with WooCommerce at its heart so you'll take full advantage of the complex extended functionality it offers, you'll rest assured that each choice you create along the way goes to figure perfectly, even as it had been intended.

IF You want to download News paper theme
Click here..

Features List

Gutenberg Support.
AMP integration
WooCommerce integration
bbPress integration
BuddyPress integration
Multiple Skins
Over 20+ demos
One Click Demo Install
Over 800+ Google Fonts
Over 150+ FontFace Fonts
Unlimited Footer Layouts
Unlimited Headers Layouts
Lifetime Free Updates
Jump-To Content
Multiple Content Layouts
Monetization
Mega Menus
Amazing Page Builder
Responsive Design
100% RTL Support: Arabic, Hebrew. Persian/Farsi, Urdu
WPML Multilingual Plugin Compatible
Built-in Translation Panel
Animated Weather Widgets
GIF Support
Bundled Premium Plugins
BuddyPress Design
Instagram Widget
Stunning Video Playlists
Web Notifications
Responsive Google AdSense
Dark Skin
Schema SEO Rich Snippet Microdata
Sticky Navigation Menu
Supports Multiple page post
Custom Categories Logo, Colors and Background
Sticky Sidebars
Unlimited sidebar
Breadcrumb Navigation
Customizable OFF-canvas Mobile Navigation
Ajax Live Search
45+ Pre-Defined Background Patterns
Built In Custom Widgets
Compatible with the most popular Cryptocurrency Plugins

IF You want to download News paper theme
Click here..

MOST IMPORTANT RULES OF CSS (STRUCTURE AND FORMATTING)

noreply@blogger.com (Design for Beginners) — Mon, 20 Apr 2020 19:35:00 +0530

Css 3.0

Structure and Formatting of a CSS Rule

Most important rule of css - The structure and rules of Cascading Style Sheets, including an introduction to the various ... The above example has created two classes, css and html for use with HTML's CODE element.

Property Lists

Some properties can take multiple values, collectively known as a property list.

/*  Two  VALUES  in  THIS  property  LIST  */
span {
 text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}

/* Alternate Formatting */
span {
 text-shadow:
 yellow 0 0 3px, green 4px 4px 10px;
}

This topic is Describe with Example completely Follow this link Tutorialpoints.in.

Multiple Selectors

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. Use a comma to separate multiple grouped selectors.

div, p { color: blue }

So the blue color applies to all <div> elements and all <p> elements. Without the comma only <p> elements that are a child of a <div> would be red.

This also applies to all types of selectors.

p, .blue, #first, div span{ color : blue }

This rule applies to:

<p>
elements of the blue class
element with the ID first every
<span> inside of a <div>

Rules, Selectors, and Declaration Blocks

A CSS rule consists of a selector (e.g. h1) and declaration block ({}).

h1 {}

IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES

noreply@blogger.com (Design for Beginners) — Mon, 20 Apr 2020 18:00:00 +0530

IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES

CSS selectors identify speciﬁc HTML elements as targets for CSS styles. This topic covers how CSS selectors target HTML elements. Selectors use a wide range of over 50 selection methods opened by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.

BASIC SELECTORS :

Selector	Description
*	Universal selector (all elements)
div	Tag selector (all elements)
.blue	Class selector (all elements with class blue)
.blue.red	All elements with class blue and red (a type of Compound selector)
ID selector	the element with “id” attribute set to headline
:pseudo-class	All elements with pseudo-class
::pseudo-element	Element that matches pseudo-element
:lang(en)	Element that matches :lang declaration, for example <span lang=”en”>
div > p	child selector

Basic selectors

Note: The value of an ID must be unique in a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree.

A complete list of selectors can be found in the CSS Selectors Level 3 speciﬁcation.

ATTRIBUTE SELECTORS

Overview

Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.

Selector	Matched element	Selects elements…	CSS Version
[attr]	<div attr>	With attribute attr	2
[attr=’val’]	<div attr=”val”>	Where attribute attr has value val	2
[attr~=’val’]	<div attr=”val val2 val3″>	Where val appears in the	2
[attr^=’val’]	<div attr=”val1 val2″>	Where attr’s value begins with val	3
[attr$=’val’]	<div attr=”sth aval”>	Where the attr’s value ends with val	3
[attr*=’val’]	<div attr=”somevalhere”>	Where attr contains val anywhere Where attr’s value is exactly val	3
[attr\|=’val’]	<div attr=”val-sth etc”>	followed by – (U+002D) or starts with val and immediately	2
[attr=’val’ i]	<div attr=”val”>	Where attr has value val,ignoring val’s letter casing	4[2]

Attribute selectors

Notes:

The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also work, but it’s not valid according to the CSS standard, and is discouraged.
There is no single, integrated CSS4 speciﬁcation, because it is split into separate modules. However, there are “level 4” modules. See browser support.

PSEUDO-CLASSES

Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state (state and dynamic pseudo-classes), to locations (structural and target pseudo-classes), to negations of the former (negation pseudo-class) or to languages (lang pseudo-class). Examples include whether or not a link has been followed (:visited), the mouse is over an element (:hover), a checkbox is checked (:checked), etc.

Syntax

selector:pseudo-class { 
         property: VALUE;
}

List of pseudo-classes:

Name	Description
:active	Applies to any element being activated (i.e. clicked) by the user.
:any	Allows you to build sets of related selectors by creating groups that the included items will match. This is an alternative to repeating an entire selector.
:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:checked	Applies to radio, checkbox, or option elements that are checked or toggled into an “on” state.
:default	Represents any user interface element that is the default among a group of similar elements.
:disabled	Applies to any UI element which is in a disabled state.
:empty	Applies to any element which has no children.
:enabled	Applies to any UI element which is in an enabled state.
:first	Used in conjunction with the @page rule, this selects the ﬁrst page in a printed document.
:first-child	Represents any element that is the ﬁrst child element of its parent.
:first-of-type	Applies when an element is the ﬁrst of the selected element type inside its parent. This may or may not be the ﬁrst-child.
:focus	Applies to any element which has the user’s focus. This can be given by the user’s keyboard, mouse events, or other forms of input.
:focus-within	Can be used to highlight a whole section when one element inside it is focused. It matches any element that the :focus pseudo-class matches or that has a descendant focused.
:full-screen	Applies to any element displayed in full-screen mode. It selects the whole stack of elements and not just the top level element.
:hover	Applies to any element being hovered by the user’s pointing device, but not activated.
:indeterminate	Applies radio or checkbox UI elements which are neither checked nor unchecked, but are in an indeterminate state. This can be due to an element’s attribute or DOM manipulation.
:in-range	The :in-range CSS pseudo-class matches when an element has its value attribute inside the speciﬁed range limitations for this element. It allows the page to give a feedback that the value currently deﬁned using the element is inside the range limits.
:invalid	Applies to elements whose values are invalid according to the type speciﬁed in the type= attribute.
:lang	Applies to any element who’s wrapping element has a properly designated lang= attribute. For the pseudo-class to be valid, it must contain a valid two or three letter language code.
:last-child	Represents any element that is the last child element of its parent.
:last-of-type	Applies when an element is the last of the selected element type inside its parent. This may or may not be the last-child.
:read-only	Applies to any element which is not editable by the user.
:read-write	Applies to any element that is editable by a user, such as elements.
:right	Used in conjunction with the @page rule, this selects all the right pages in a printed document.
:root	matches the root element of a tree representing the document.
:scope	CSS pseudo-class matches the elements that are a reference point for selectors to match against.
:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:left	Used in conjunction with the @page rule, this selects all the left pages in a printed document.
:link	Applies to any links which haven’t been visited by the user.
:visited	Applies to any links which have has been visited by the user.

Pseudo-classes




This topic is Describle with Example completely Follow this link Identify css Selector.

CLASS NAME SELECTORS

The class name selector select all elements with the targeted class name. For example, the class name .warning would select the following element:

<div class="warning">
        <p>This would be some warning copy.</p>
</div>

You can also combine class names to target elements more speciﬁcally. Let’s build on the example above to showcase a more complicated class selection.

CSS

.important {
color: orange;
}
.warning {
color: blue;
}
.warning.important {
color: red;
}

HTML

<div class="warning">
<p>This would be some warning copy.</p>
</div>

<div class="important warning">
<p class="important">This is some really important warning copy.</p>
</div>

In this example, all elements with the .warning class will have a blue text color, elements with the .important class with have an orange text color, and all elements that have both the .important and .warning class name will have a red text color.
Notice that within the CSS, the .warning.important declaration did not have any spaces between the two class names. This means it will only ﬁnd elements which contain both class names warning and important in their class attribute. Those class names could be in any order on the element.
If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a .warning class names and child elements with .important class names.

SELECT ELEMENT USING ITS ID WITHOUT THE HIGH SPECIFICITY OF THE ID SELECTO

This trick helps you select an element using the ID as a value for an attribute selector to avoid the high speciﬁcity of the ID selector.

HTML

<div id="element">...</div>

CSS

#element { ... } /*  High  SPECIFICITY  will  override  many  SELECTORS  */

[id="element"] { ... } /*  Low  SPECIFICITY,  can  be  overridden  EASILY  */

THE :LAST-OF-TYPE SELECTOR

The :last-of-type selects the element that is the last child, of a particular type, of its parent. In the example below, the css selects the last paragraph and the last heading h1

p:last-of-type {
background: #C5CAE9;
}
h1:last-of-type {
background: #CDDC39;
}

<div class="container">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
<h1>Heading 1</h1>
<h2>First heading 2</h2>
<h2>Last heading 2</h2>
</div>

CSS3 :IN-RANGE SELECTOR EXAMPLE

<style>
input:in-range {
border: 1px solid blue;
}
</style>

<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

The :in-range CSS pseudo-class matches when an element has its value attribute inside the speciﬁed range limitations for this element. It allows the page to give a feedback that the value currently deﬁned using the element is inside the range limits

A. THE :NOT PSEUDO-CLASS EXAMPLE & B. :FOCUS- WITHIN CSS PSEUDO-CLASS

A. The syntax is presented above.

The following selector matches all <input>elements in an HTML document that are not disabled and don’t have the class .

example: HTML

<form>
Phone: <input type="tel" class="example">
E-mail: <input type="email" disabled="disabled"> Password: <input type="password">
</form>

CSS

input:not([disabled]):not(.example){
background-color: #ccc;
}
input:not([disabled], .example){
background-color: #ccc;
}

The :not() pseudo-class will also support comma-separated selectors in Selectors Level 4: CSS

B. The :focus-within CSS pseudo-class

div {
height: 80px;
}
input{
margin:30px;
}
div:focus-within {
background-color: #1565C0;
}


ID SELECTORS

ID selectors select DOM elements with the targeted ID. To select an element by a speciﬁc ID in CSS, the # preﬁx is used. For example, the following HTML div element
<div id="exampleID">
<p>Example</p>
</div>


#exampleID in CSS as shown below:
#exampleID {
width: 20px;
}


Note: The HTML specs do not allow multiple elements with the same ID




This topic is Describle with Example completely Follow this link Identify css Selector.




you want to learn

CSS & HTML 

and Many more with Example

follow 

Tutorialpoints.in

New Input Types in HTML5

noreply@blogger.com (Design for Beginners) — Wed, 4 Mar 2020 19:00:00 +0530

HTML5 New Input Types

In this blog you will learn about the new input types that have been introduced in HTML 5.

HTML 5 introduces several new <input> types like email, date, time, color, range, and so on. to enhance the user experience and to form the forms more interactive. However, if a browser fails to acknowledge these new input types, it'll treat them sort of a normal text box.

In this section we're going to take a brief look at each of the following new input types:

color

date

datetime-local

email

month

number

range

search

tel

time

url

week

Syntax:

Input-browser-support

Definition and Usage

The type attribute specifies the sort of <input> element to display.The default type is text.

Tip: the type attribute isn't a required attribute, but we expect you ought to always include it.

Note: the type attribute works altogether major browsers. However, not all the various input types work together with major browsers. Look below to ascertain browser support for every input type.

Differences Between HTML 4.01 and HTML 5

HTML 5 has the subsequent new input types: color, date, datetime-local, month, week, time, email, number, range, search, tel, and URL.

HTML Input Types Attribute Values and it’s Description

<input type="button"> : Defines a clickable button (mostly used with a JavaScript to activate a script)

<input type="checkbox">:Defines a checkbox

<input type="color">:Defines a color picker

<input type="date">:Defines a date control (year, month, day (no time))

<input type="datetime-local">:Defines a date and time control (year, month, day, time (no timezone)

<input type="email">:Defines a field for an e-mail address

<input type="file">:Defines a file-select field and a "Browse" button (for file uploads)

<input type="hidden">:Defines a hidden input field

<input type="image">:Defines an image as the submit button

<input type="month">:Defines a month and year control (no timezone)

<input type="number">:Defines a field for entering a number

<input type="password">:Defines a password field

<input type="radio">:Defines a radio button

<input type="range">:Defines a range control (like a slider control)

<input type="reset">:Defines a reset button

<input type="search">:Defines a text field for entering a search string

<input type="submit">:Defines a submit button

<input type="tel">:Defines a field for entering a telephone number

<input type="text">:Default. Defines a single-line text field

<input type="time">:Defines a control for entering a time (no timezone)

<input type="url">:Defines a field for entering a URL

<input type="week">:Defines a week and year control (no timezone)

More Examples

Input type: button
A push button that activates a JavaScript when it is clicked:
example:
<input type="button" value="Click me" onclick="msg()">

Input type: checkbox
Checkboxes let a user select one or more options of a limited number of choices:

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

Input type: color

Input type: color

Select a color from a color picker:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">

Input type: date
Define a date control:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Input type: datetime-local
Define a date and time control (no time zone):

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

Input type: email
Define a field for an e-mail address (will be automatically validated when submitted):

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">

Input type: file
Define a file-select field and a "Browse..." button (for file uploads):

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">

Input type: hidden
Define a hidden field (not visible to a user).
A hidden field often stores what database record that needs to be updated when the form is submitted:

<input type="hidden" id="custId" name="custId" value="3487">

Input type: image
Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">

Input type: month
Define a month and year control (no time zone):

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">

Input type: number
Define a field for entering a number (You can also set restrictions on what numbers are accepted):

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

Use the following attributes to specify restrictions:
* max - specifies the maximum value allowed
* min - specifies the minimum value allowed
* step - specifies the legal number intervals
* value - Specifies the default value

Input type: password
Define a password field (characters are masked):

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

Input type: radio
Radio buttons let a user select only one of a limited number of choices:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

Input type: range
Define a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

Use the following attributes to specify restrictions:
* max - specifies the maximum value allowed
* min - specifies the minimum value allowed
* step - specifies the legal number intervals
* value - Specifies the default value

Input type: reset
Define a reset button (resets all form values to default values):

<input type="reset">

Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.

Input type: search
Define a search field (like a site search, or Google search):

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">

Input type: submit
Define a submit button:

<input type="submit">

Input type: tel
Define a field for entering a telephone number:

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Input type: text
Define two single-line text fields that a user can enter text into:

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>

Input type: time
Define a control for entering a time (no time zone):

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">

Input type: url
Define a field for entering a URL:

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input type: week
Define a week and year control (no time zone):

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">

Input Type Color:
The color input type allows the user to pick a color from a color picker and returns the colour value in hexadecimal format (#rrggbb). If you do not specify a worth , the default is #000000, which is black.
Example:
<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor">
</form>
Note: The color input (i.e. type="color") is supported in all major modern web browsers such as Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Not supported by the Microsoft Internet Explorer and older version of Apple Safari browsers.

Input Type Date

The date input type allows the user to select a return a drop-down calendar.
The date value includes the year, month, and day, but not the time.

Example
<form>
<label for="mydate">Select Date:</label>
<input type="date" value="2019-04-15" id="mydate">
</form>

Note: The date input (i.e. type="date") is supported by the Chrome, Firefox, Opera and Edge browsers. Not supported by the Internet Explorer and Safari browsers.

Input Type Datetime-local

The datetime-local input type allows the user to pick both local date and time, including the year, month, and day also because the time in hours and minutes.

<form>
<label for="mydatetime">Choose Date and Time:</label>
<input type="datetime-local" id="mydatetime">
</form>

Warning: The input type="datetime-local" is not supported by Firefox, Safari, and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.

Input Type Email
The email input type allows the user to enter e-mail address. it's very almost like a typical text input type, but if it's utilized in combination with the specified attribute, the browser may search for the patterns to make sure a properly-formatted e-mail address should be entered.
Let's try out this example by entering any email address to see how it actually works:

<form>
<label for="myemail">Enter Email Address:</label>
<input type="email" id="myemail" required>
</form>

Tip: You can style the email input field for different validation states, when an value is entered using the :valid, :invalid or :required pseudo-classes.
Note: The validation for the email input (i.e. type="email") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Input Type Month
The month input type allows the user to pick a month and year from a drop-down calendar.
The value may be a string within the format "YYYY-MM", where YYYY is that the four-digit year and MM is that the month number. Let's try an example to ascertain how this basically works:

<form>
<label for="mymonth">Select Month:</label>
<input type="month" id="mymonth">
</form>

Warning: The input type="month" is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported in Chrome, Edge, and Opera browsers.

Input Type Number
The number input type is often used for entering a numerical value. you'll also restrict the user to enter only acceptable values using the extra attributes min, max, and step.
The following example will allow you to enter a numeric value between 1 to 10.
<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>

Note: The number input (i.e. type="number") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above. Internet Explorer however recognized the number but do not provide increment and decrement spin buttons.

Input Type Range
The range input type are often used for entering a numerical value within a specified range. It works very almost like number input, but it offers an easier control for entering variety .
Let's try the subsequent example to know how it basically works:

<form>
<label for="mynumber">Select a Number:</label>
<input type="range" min="1" max="10" step="0.5" id="mynumber">
</form>

Note: The range input (i.e. type="range") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Search
The search input type is often used for creating search input fields.
A search field typically behaves sort of a regular text field, but in some browsers like Chrome and Safari as soon as you begin typing within the search box alittle cross appears on the proper side of the sector that allows you to quickly clear the search field. Let's try an example to ascertain how it works:
<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch">
</form>
Note: The search input (i.e. type="search") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Tel
The tel input type is often used for entering a phone number .
Browsers don't support tel input validation natively. However, you'll use the placeholder attribute to assist users in entering the right format for a telephone number , or specify a daily expression to validate the user input using the pattern attribute. Let's inspect an example:
<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
Note: The validation for tel input (i.e. type="tel") is currently not supported by any browser because format for phone numbers vary so much across countries, but it is still useful. Mobile browsers display a numeric keyboard for tel input field for entering phone numbers.
Input Type Time
The time input type is often used for entering a time (hours and minutes).
Browsers may use a 12- or 24-hour format for inputting times, supporting the local system's time setting.
<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>
Warning: The input type="time" is not supported by Internet Explorer and Safari browsers. Currently supported by Chrome, Firefox, Edge, and Opera browsers.
Input Type URL
The url input type is often used for entering URL or web addresses.
You can use the multiple attribute to enter quiet one URL. Also, if required attribute is specified browser will automatically perform validation to make sure that only text that matches the quality format for URLs is entered into the input box. let's examine how this works:
<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>

Note: The validation for the url input (i.e. type="url") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Input Type Week
The week input type allows the user to pick every week and year from a drop-down calendar.
Let's try the subsequent example to know how this works:

<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>

Warning: The input type="week" is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.

Learn to create a responsive web design using Grid Layout in css3

noreply@blogger.com (Design for Beginners) — Mon, 24 Feb 2020 21:10:00 +0530

Introduction of Grid Layout in css3.0

Grid layout using css3

With the help of CSS GridLayout we do any critical web design to design the layout of the web page with the help of rows and columns. It is a two dimensional technique that we use to make the web page responsive and mobile friendly. There are CSS grid layouts, we can design web page very easily without float and positioning.

Browser Support:

css grid layout support

Display Property:

The layout is used by the display property in a container In this property we grid the value of the display.

Example:

.grid-container {

display: grid;

}

Grid Columns & Rows:

Grid column

In a grid layout we call the vertical line the Grid Column and in the grid layout we call the horizontal line the Grid Row.

Grid row

Grid Gaps:

The spaces between each column/row are called gaps.

Grid Gaps

CSS Grid Layout We use this property of grid to create a gap between any two columns or rows, we can use this property in 3 ways.

The first property is grid-column-gap, with the help of this property, we define the gap between all the columns present in the grid.

Example:

.grid-container {

display: grid;

grid-column-gap: 50px;

}

The second property is grid-row-gap. With the help of this property, we define the gap between all the rows present in the grid.

Example:

.grid-container {

display: grid;

grid-row-gap: 50px;

}

And the third property is grid-gap. With the help of this property, we do this to give a gap between grid and column together. If we want to keep the gap between both rows and columns, then we use this property. Our code also reduces with the use of We can use this property of grid-gap in two ways.

If we give two values to the property of grid, then here the first value defines the column and the second value defines the row, in this way we define the value of both the row and the column. The gap between the two has to be defined separately.

Example:

.grid-container {

display: grid;

grid-gap: 50px 100px;

}

When we have to keep the gap between the disease and the column the same, then here we will give the same value of the great gap.

Example:

.grid-container {

display: grid;

grid-gap: 50px;

}

The grid-template-columns Property:

The next property in the CSS grid layout is grid-template-columns If we have to define 4 columns in a grid layout then we will use this property if we have to create four columns then we will give the value of grid-template-columns four times and if If you want to make it twice, you will give the value of grid-template-columns twice.

Example:

.grid-container {

display: grid;

grid-template-columns: auto auto auto auto;

}

The grid-template-rows Property:

The next property in the CSS grid layout is grid-template-rows

Just as we use grid-template-columns, similarly we use grid-template-rows. If we have to define 4 rows in a grid layout, then we will use this property if we want to create four rows. You will give the value of grid-template-rows four times and if you want to create it twice, you will give the value of grid-template-rows twice.

Example:

.grid-container {

display: grid;

grid-template-rows: 80px 200px;

}

The justify-content Property:

gird-justify-property

Next property of css grid layout app justify-content property we use this property to justify online all the cells inside the grid-container when we use this property then all the salesmen present in the great layout of the container Returns online with or affects all cells within container width

In CSS Grid Layout we can give the value of justify-content as follows:

.grid-container {

display: grid;

justify-content: space-evenly;

}

.grid-container {

display: grid;

justify-content: space-around;

}

.grid-container {

display: grid;

justify-content: space-between;

}

.grid-container {

display: grid;

justify-content: center;

}

.grid-container {

display: grid;

justify-content: start;

}

.grid-container {

display: grid;

justify-content: end;

}

The align-content Property:

align-content property

The way we use the justify-content property in grid layout, we use the align-content property in the same way, we use this property when we have to make all the sales in the container online by recording the height of the container.

Example:

.grid-container {

display: grid;

height: 400px;

align-content: center;

}

CSS Grid Item:

Grid Item

Child Elements (Items):

All the cells present in the grid-container . The CSS grid-container has a By default one cell. Here cell means the grid and column to be constituted where grid-column together form a cell. Multiple grid items in CSS. We use the grid-column property to create .

The grid-column Property:

Grid column

We use the Grid-column property in exactly the same way as we use the col-span in the table tag in HTML. In the Grid Column property we have to give the value of grid-column Start and grid-column end Property.

Example:

.item1 {

grid-column: 1/5;

}

Here the value of the grid-column where we used 1 defines the column's start point and 5 defines the end of the column.

The grid-row Property:

grid-row property

We use the grid-row property the same way we use row-span in the table tag in HTML. In grid-row property we have to give the value of grid-row start and grid-row end property.

Example:

.item1 {

grid-row: 1/4;

}

The grid-area property:

grid-area property

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example:

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

.item8 {

grid-area: 1/2/5/6;

}

Naming Grid Items:

The grid-area property can also be used to assign names to grid items.

Named grid items

Named grid items can be referred to by the grid-template-areas property of the grid container.

Example:

Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:

.item1 {

grid-area: myArea;

}

.grid-container {

grid-template-areas: 'myArea myArea myArea myArea myArea';

}

Each row is defined by apostrophes (' ')

The columns in each row is defined inside the apostrophes, separated by a space.

Example:

Let "myArea" span two columns in a five columns grid layout (period signs represent items with no name):

.item1 {

grid-area: myArea;

}

.grid-container {

grid-template-areas: 'myArea myArea . . .';

}

Example:

Name all items, and make a ready-to-use webpage template:

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

.grid-container {

grid-template-areas:

'header header header header header header'

'menu main main main right right'

'menu footer footer footer footer footer';

}

The Order of the Items:

order of item

The Grid Layout allows us to position the items anywhere we like.

The first item in the HTML code does not have to appear as the first item in the grid.

Example:

.item1 { grid-area: 1 / 3 / 2 / 4; }

.item2 { grid-area: 2 / 3 / 3 / 4; }

.item3 { grid-area: 1 / 1 / 2 / 2; }

.item4 { grid-area: 1 / 2 / 2 / 3; }

.item5 { grid-area: 2 / 1 / 3 / 2; }

.item6 { grid-area: 2 / 2 / 3 / 3; }

You can re-arrange the order for certain screen sizes, by using media queries:

Example

@media only screen and (max-width: 500px) {

.item1 { grid-area: 1 / span 3 / 2 / 4; }

.item2 { grid-area: 3 / 3 / 4 / 4; }

.item3 { grid-area: 2 / 1 / 3 / 2; }

.item4 { grid-area: 2 / 2 / span 2 / 3; }

.item5 { grid-area: 3 / 1 / 4 / 2; }

.item6 { grid-area: 2 / 3 / 3 / 4; }

}

Diffrent types to apply css on your website

noreply@blogger.com (Design for Beginners) — Sun, 23 Feb 2020 15:06:00 +0530

Full Form of css

Full Form of css : Cascading Style Sheets is fullform of css

Latest version of css :

css3 is latest version of Cascading Style Sheets

Why Use CSS :

CSS is used to decrypt the style of HTML document. HTML is displayed interactive with the help of CSS. With the help of CSS we can edit or style any HTML text, heading, paragraph, background, foreground etc.

We can use it to make HTML interactive or we can say that it is used to design web pages, with the help of CSS we can make our page or website according to the layout's are different difference screen.

Diffrent way to apply css:

Syntax for apply css whole page

Syntax for apply css on tag

Syntax for apply css on class

Syntax for apply css on id

Syntax for apply css whole page :

We use this syntax when we have to apply a CSS property to the entire web page such as font-family, line height, font size, etc.

In this method of CSS, we use * . Here * indicates that the property given in this block has to be applied in the entire web page.

Syntax :

property name : value;

}

Example:

font-family: arial;

font-size: 12px;

}

Syntax for apply css on tag:

We use this syntax when a CSS property is required to be applied to a tag. This property can be anything from it to margin line height font size weight wedding position etc.

In this method of CSS, we write the name of that Tech in place of Astric * Here Tagname indicates that the property given in this block has to be applied wherever the tag name is used in the entire web page.

Syntax :

Tagname {

property name : value;

}

Example:

h1{

font-family: arial;

font-size: 36px;

padding: 20px;

}

Syntax for apply css on class:

We use this syntax when a CSS property we have to apply to a class, this property can be anything from it, margin line height font size, weight wedding position etc.

In this method of CSS we. With this, we write the name of the class here. Indicates the class and the name written after it indicates the class. We have to apply the property given in this block wherever the name of this class is used in the entire web page.

Syntax :

.classname {

property name : value;

}

Over here * Indicates class

Example:

.item{

font-size: 12px;

padding: 20px;

}

Syntax for apply css on id:

We use this syntax when a CSS property is required to be applied to an id. This property can be anything from it to margin line height font size weight wedding position etc.

In this method of CSS, we write the name of the id with #, here #indicates the id and after that the name written indicates that id. We have to apply the property given in this block wherever the name of this id is used in the entire web page.

Syntax :

#id {

property name : value;

}

Indicates # id here

Example:

#item{

font-size: 12px;

padding: 20px;

margin-left: 10px;

}

CSS Solved Many Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML, it’s started a nightmare for web developers. Development of huge websites, where fonts and color information were added to each single page, became an extended and expensive process.

CSS removed the design formatting from the HTML page!

If you do not know what HTML is, we propose that you simply read our HTML Tutorial.

CSS Saves tons of Work!

The style definitions are normally saved in external .css files.

With an external style sheet file, you'll change the design of a whole website by changing only one file!

How To Add CSS

When a browser reads a style sheet, it'll format the HTML document consistent with the knowledge within the style sheet .

Three Ways to Insert CSS

There are 3 ways of inserting a method sheet:

External CSS
Internal CSS
Inline CSS

External CSS

With an external style sheet , you'll change the design of a whole website by changing only one file!

Each HTML page must include a regard to the external style sheet file inside the <link> element, inside the top section.

Example:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

An external sheet are often written in any text editor, and must be saved with a .css extension.

The external .css file shouldn't contain any HTML tags.

Here is how the "mystyle.css" file looks like:

Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

Internal CSS

An internal style sheet could also be used if one single HTML page features a unique style. The internal style is defined inside the <style> element, inside the top section.

Example:

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Inline CSS

An inline style could also be wont to apply a singular style for one element.

To use inline styles, add the design attribute to the relevant element. the design attribute can contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

Cascading Order

What style are going to be used when there's quite one style specified for an HTML element? All the styles during a page will "cascade" into a replacement "virtual" sheet by the subsequent rules, where favorite has the very best priority:

Inline style (inside an HTML element)

External and internal style sheets (in the top section)

Browser default

So, an inline style has the very best priority, and can override external and internal styles and browser defaults.

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

css selectors

Know about HTML and It's Prototype

noreply@blogger.com (Design for Beginners) — Sat, 22 Feb 2020 19:56:00 +0530

Introduction of HTML:

Full form of HTML is hypertext markup language

Why html called hypertext markup language:

HTML is called hypertext mark-up language because hypertext creates communication between user and the browser by which we create any web page, (web pages together with multiple, create a website) hypertext browser Indicates the instruction given by user.

HTML has two parts, one is hypertext and the other is mark-up language.

Here hypertext means to establish communication or create link between our page and browser and mark up language means to tell the browser which data will be fixed in which browser's browser and in which style we will fix hyper text markup We create a web page by creating a language connection.

HTML is very easy to learn because to learn it we do not need to have any special language. In

HTML we create web pages through some tags which are very easy.

HTML tags act as a label such as "heading", "paragraph","table" etc.

The browser does not display any HTML tag, it only displays the content or matter written inside it.

HTML Tags

HTML tags elements are name surrounded by angle brackets:

<tagname> content </tagname>

HTML tags normally come in pairs like and The first tag during a pair is that the start tag (<tagname>), the second tag is that the end tag The end tag is written just like the start tag, but with a forward slash (</tagname>) inserted before the tag name.

Tip: The beginning tag is additionally called the opening tag, and therefore the end tag is the closing tag.

HTML Page Structure

HTML Structure

A Simple HTML Prototype

<!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

This is a simple prototype of HTML. We can also call it prototype or syntax, in this
prototype we first write <!DOCTYPE html>, here<! DOCTYPE html> means that it will tell the browser which version of HTML isbeing used by the user. Here we are using the latest version of HTML. 

HTML 5 is the latest version of html 

The <html> tag here defines the root element of the HTML page. 

<head> tag stores the meta information of web pages such as title, stylesheet,  javascript and more.. 

<title>  tells the title of a web page what the title of the websit ewill be like the title of this page is index because we have written the index keyword inside the title track, so the title of this page will be index if we replace your name with If you write, the title of this page will be your name, this title appears on the top bar of the browser.<body> This is the visible content of the web pages. <body> tag is the most important tag of the web page because whatever we instruct the browser, the browser will display. 

Here we use a <h1> tag to display heading on the browser first and second we display <p> tag it means display paragraph.

HTML Web Browser View

HTML PROTOTYPE

HTML <!DOCTYPE> Declaration

 The <!DOCTYPE> declaration represents the document type, and helps browsers to display sites correctly.It must only appear once, at the highest of the page (before any HTML tags).The <!DOCTYPE> declaration isn't case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

The <!DOCTYPE> declaration for HTML4.01 is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>

Design for beginners

Wordpress Newspaper theme Free - Magazine News

3 Powerful Reasons to Chose Jannah Newspaper theme

IF You want to download News paper theme Click here..

Online Publishing Reimagined for WordPress

Responsive for Today’s Modern Devices

AMP

SEO Optimized

High Performance, Blazing Speeds

bbPress Integration

One-Click install.

Almost 1,000 Font Options

Ajax Mega Menus

Mobile Navigation

Parallax Effects & Video Backgrounds

IF You want to download News paper theme Click here..

Features List

IF You want to download News paper theme Click here..

MOST IMPORTANT RULES OF CSS (STRUCTURE AND FORMATTING)

Structure and Formatting of a CSS Rule

Multiple Selectors

Rules, Selectors, and Declaration Blocks

IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES

IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES

BASIC SELECTORS :

ATTRIBUTE SELECTORS

PSEUDO-CLASSES

CLASS NAME SELECTORS

SELECT ELEMENT USING ITS ID WITHOUT THE HIGH SPECIFICITY OF THE ID SELECTO

THE :LAST-OF-TYPE SELECTOR

CSS3 :IN-RANGE SELECTOR EXAMPLE

A. THE :NOT PSEUDO-CLASS EXAMPLE & B. :FOCUS- WITHIN CSS PSEUDO-CLASS

ID SELECTORS

New Input Types in HTML5

HTML5 New Input Types

Syntax:

Definition and Usage

Differences Between HTML 4.01 and HTML 5

HTML Input Types Attribute Values and it’s Description

More Examples

Learn to create a responsive web design using Grid Layout in css3

Introduction of Grid Layout in css3.0

Browser Support:

Display Property:

Grid Columns & Rows:

Grid Gaps:

Grid Gaps

The grid-template-columns Property:

The grid-template-rows Property:

The justify-content Property:

The align-content Property:

CSS Grid Item:

Child Elements (Items):

The grid-column Property:

The grid-row Property: grid-row property

The grid-area property: grid-area property

Naming Grid Items:

The Order of the Items: order of item

Diffrent types to apply css on your website

Full Form of css

Latest version of css :

Why Use CSS :

Diffrent way to apply css:

Syntax for apply css whole page :

Syntax for apply css on tag:

Syntax for apply css on class:

Syntax for apply css on id:

CSS Solved Many Problem

How To Add CSS

Three Ways to Insert CSS

There are 3 ways of inserting a method sheet:

External CSS

Internal CSS

Inline CSS

Cascading Order

CSS Selectors

Know about HTML and It's Prototype

Introduction of HTML:

Full form of HTML is hypertext markup language

Why html called hypertext markup language:

IF You want to download News paper theme
Click here..

IF You want to download News paper theme
Click here..

IF You want to download News paper theme
Click here..

The grid-row Property:

grid-row property

The grid-area property:

grid-area property

The Order of the Items:

order of item