• Like
Less css
Upcoming SlideShare
Loading in...5
×

Less css

  • 146 views
Uploaded on

At Above

At Above

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
146
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Life Style. By : Amit Kumar UNICON TEAM
  • 2. 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.
  • 3. 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.
  • 4. 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
  • 5. 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
  • 6. CSS Layers. How CSS Works .
  • 7. CSS and CSS 3 pseudo- class and selector
  • 8. 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
  • 9. Universal selector *{ ⋮ declarations } *EM{ ⋮ declarations } * .CLASS{ ⋮ declarations }
  • 10. Element type selector E { declaration block } P{ declaration block }
  • 11. ID Selector #ID { declaration block } ul#navigation { ⋮ declarations }
  • 12. Class Selector .className { declaration block }
  • 13. Element type selector E { declaration block } P{ declaration block }
  • 14. AttributeSelector 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".
  • 15. Selector Grouping #above td { ⋮ declarations } th { ⋮ declarations } Old Way #above td, #above th { ⋮ declarations } New Way..
  • 16. Combinators Descendant Selector matches an element that’s a descendant of a specified element Child Selector selects an element that’s the immediate child of a specified element Adjacent Sibling Selector selects an element that’s an adjacent sibling to a specified element General Sibling Selector selects 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>
  • 17. Pseudo-classes 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
  • 18. Pseudo-elements 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
  • 19. Setup and Working atmosphere
  • 20. 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>
  • 21. Go go go go with css.
  • 22. • Variables • Mixins • Parametric Mixins • Pattern-matching and Guard expressions • Nested rules • Operations • Functions
  • 23. • Namespaces • Scope • comment • Importing • Escaping • Selector Interpolation • Media Queries as Variables • JavaScript evaluation
  • 24. Q&A
  • 25. Thank You. Amit Kumar E-mail: amit.kumar@above-inc.com