Css few small tips and information

67 %
33 %
Information about Css few small tips and information
Education

Published on March 12, 2014

Author: nagaharish_movva

Source: slideshare.net

Description

In this video you can how CSS multiple classes and style orders works on HTML elements

CSS- It brings the site to life

Types of CSS Style Applying • Inline Styles – High Priority • Embedded Styles – Normal Priority • External Styles – Low Priority

Applying more than one class to the same element • <a class=“hyperlink”>Hyper Link 1</a> • <a class=“hyperlink mystyle”>Mystyle Link</a> • <a class=“hyperlink”> Hyper Link 2 </a> CSS: a{} .hyperlink{color:#1270bb;font-size:18px;font-weight:bold; text-decoration: none;} .mystyle{color:#ee481d;border:1px solid #ee481d;} Hyper Link1 Mystyle Link Hyper Link2 HTML:-

HTML <div class=“blue grey orange”>One</div> <div class=“grey orange blue”>Two</div> <div class=“orange blue grey”>Three</div> CSS div{width:100px;height:100px;float:left;col or:#fff; margin:5px;} .blue{background-color:#1270bb;} .grey{background-color:#5c5d60;} .orange{background-color:#ee481d;} One Two Three Guess output style?

One Two Styles applied like this… Three So, the last style will overwrite the existing style. Here orange class defined at last so, it overwrites blue and grey.

Importing a CSS file from within CSS (file) • @import url("blogstyles.css“); • Apply different styles for print Printed Content <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="myprintstyles.css" media=" print" />

Thank you!

Add a comment

Related presentations

Related pages

CSS-Tricks

Zeke Sikelianos: So. We have variables in CSS now. That's pretty neat, but it doesn't get us all the way to CSS heaven. What we really need is a way to ...
Read more

CSS/Eigenschaften/Schriftformatierung – SELFHTML-Wiki

Von „http://wiki.selfhtml.org/index.php?title=CSS/Eigenschaften/Schriftformatierung&oldid=34904 ... Nähere Informationen finden Sie unter SELFHTML: ...
Read more

Few Small Building Tips and Information Minecraft Blog

The Minecraft Few Small Building Tips and Information Blog was contributed by MinecraftxGod. My Building Advice Measure blocks and choose if you want odd or
Read more

Website Tips

Adobe Photoshop Tutorials and Tips; CSS: ... helpful Web design tools, and information on the Web for ... What began in 1996 as a few helpful annotated ...
Read more

CSS: fonts - World Wide Web Consortium (W3C)

Web Style Sheets CSS tips & tricks. ... somewhat less often a small-caps and in a few cases extra-light/extra-bold or ... small-caps: The ...
Read more

CSS Tooltip - Web components for building beautiful websites

Pure CSS pop up tooltip with clean semantic code for your website. ... Small pictures carousel ... CSS Tooltip. If you need a really ...
Read more

5 Useful CSS Tricks for Responsive Design

5 Useful CSS Tricks for Responsive Design 124. ... text field to prevent the input from getting very small when scaling ... for these tips. Richard ...
Read more

Optimize Your WordPress Website Using These Simple Tips ...

It is not uncommon for some WordPress themes to be a few ... Great tips, The best tool to Minify CSS ... Be sure to subscribe to the Elegant Themes ...
Read more

Images in HTML - W3C Wiki - World Wide Web Consortium (W3C)

Images in HTML. From W3C ... have images turned off because of small screens and the ... element’s title attribute as a tool-tip when you hover ...
Read more