CSS Life Style.By : Amit KumarUNICON TEAM
Agenda
• Introduction.
• Benefits of Less Css.
• CSS and CSS 3 pseudo-class and selector.
• Setup and Working atmosphere
• Go go go go with css.
• Q&A.
Introduction.
• LESS is a dynamic stylesheet language.
• Influenced Sass, Less FrameworkCSS.
• Develop in JavaScript.
• Open source.
• Main difference between other CSS precompilers being that it allows real-time compilation via LESS.js by the browse.
• LESS can run on the client-side and server-side,[4]or can be compiled into plain CSS.
Browser support
Less CSS is not yet a W3C Standard, but the major browsers support many of the properties like css and css 3.
CSS/3 Less css
IE 7 and earlier YES YES
Firefox + YES YES
Opera + YES YES
Chrome + YES YES
Safari + YES YES
Mobile Web App
YES YES
Benefits of Less Css.
• Help to enhance cross browser compatibility.
• Improve loading time.
• Improve text effects with new attributes like test shadow and text overflow.
• Improve user interface with the help multiple layout for same web site.
• Time saver for developer and client side.
E-Commerce E- Learning
Web Apps Local host App
Dynamic Web site
Mobile And Smart TV
CSS Layers.How CSS Works .
CSS and CSS 3 pseudo-class and selector
CSS and CSS 3 pseudo-class and selector
• Universal selector
• Element type selector
• Class Selector
• ID Selector
• Attribute Selector
• Selector Grouping
• Combinators
• Pseudo-classes
• Pseudo-elements
Universal selector
*{ ⋮ declarations }
*EM{ ⋮ declarations }
* .CLASS{ ⋮ declarations }
Element type selector
E {declaration block}
P{declaration block}
ID Selector
#ID {declaration block}
ul#navigation { ⋮ declarations }
Class Selector
.className {declaration block}
Element type selector
E {declaration block}
P{declaration block}
Att
ribute
Sele
ctor
CSS / css3 Details
a[href] { ⋮ declarations } the simplest form of an attribute selector
[href] { ⋮ declarations } This selector matches any a element that has an href attribute
input[type="submit"] { ⋮ declarations } This selector matches any input element that has a type attribute
a[href^="http:"] { ⋮ declarations } an attribute containing a value that starts with the specified value
img[src$=".png"] { ⋮ declarations } an attribute containing a value that end with the specified value
div[id*=“above"] { ⋮ declarations } matches div elements whose id attribute value contains the characters "above".
Selector Grouping
#above td { ⋮ declarations }
th { ⋮ declarations } Old Way
#above td, #above th { ⋮ declarations }
New Way..
CombinatorsDescendant Selectormatches an element that’s a descendant of a specified elementChild Selectorselects an element that’s the immediate child of a specified elementAdjacent Sibling Selectorselects an element that’s an adjacent sibling to a specified elementGeneral Sibling Selectorselects an element that’s a sibling to a specific element
ul li { ⋮ declarations }
Table tr td {⋮ declarations }
ul>li { ⋮ declarations }
h2+p { ⋮ declarations }
<h2>Heading</h2> <p>Content</p>
h2~p { ⋮ declarations } <h2>Heading</h2> <div>
<p>content.</p> </div>
Pse
udo-c
lass
es
CSS / css3 Details
:link matches link elements that are unvisited
:visited matches link elements that have been visited
:active matches any element that’s being activated by the user
:hover matches elements that are being designated by a pointing device
:focus matches any element that’s currently in focus
:first-child matches any element that’s the first child element of its parent
:lang(C) allows elements to be matched on the basis of their languages
Pse
udo-e
lem
ents
CSS / css3 Details
:first-letter represents the first character of the first line of text within an element
:first-line represents the first formatted line of text
:before specifies content to be inserted before another element
:after specifies content to be inserted after another element
:focus matches any element that’s currently in focus
::selection represents a part of the document that’s been highlighted by the user
Setup and Working atmosphere
Setup with Client-side usage
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" /> Then download less.js from the top of the page, and include it in the <head> element of your page.
<script src="less.js" type="text/javascript"></script>
Go go go go with css.
• Variables
• Mixins
• Parametric Mixins
• Pattern-matching and Guard expressions
• Nested rules
• Operations
• Functions
• Namespaces
• Scope
• comment
• Importing
• Escaping
• Selector Interpolation
• Media Queries as Variables
• JavaScript evaluation
Q&A
Thank You.Amit KumarE-mail: [email protected]
