Selector css cheat sheet

CSS CheatSheet

Style sheet to reset to assure uniform look in all browsers. To be added at the start of the stylesheet.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;> article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section < display: block;> body < line-height: 1;> ol,ul < list-style: none;> blockquote,q < quotes: none;> blockquote:before,blockquote:after,q:before,q:after < content: ''; content: none;> table < border-collapse: collapse; border-spacing: 0;>

Ads

px — em

Online Interactive CSS Cheat Sheet

CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators, color picker and more. All these and other useful web designer tools can be found on a single page.

Test the generated syle sheets clicking the blue arrows pointing down. This will populate the interactive HTML-CSS editor on the bottom of the page with your CSS code and a demo HTML markup, giving you a live preview to test and adjust the code further.

• Basics – CSS syntax and how to include them in HTML.
• Selectors – How to target elements in CSS3.
• Properties – An updated list of valid properties. Click the bold text to highlight the text!
• Color picker – Click the blue input field and use your mouse to select another color. The slider on the right side sets the transparency of the selected color. Use the generated code snippets.
• CSS background generator – Optionally set a background image from URL, set the position, repeat, attachment and color. See the live preview as you adjust the settings then take the generated code when you’re satisfied with the result.
• Gradient generator – Sset two and optionally a third middle transition color to get the CSS gradient code which works almost in every web browser. Change the transition direction, the position of the middle color and choose between RGB or HEX codes.
• Box shadow generator – Get the CSS code for any inset or outset box shadow, customizing the right and down offset, spread, blur, color and opacity.
• CSS button generator – create styles for HTML buttons with this panel. Set the size, padding, radius, color and opacity. Adjust the gradient, box shadow, font style and border in other panels.
• Text shadow generator – Get the CSS code for your text shadow by setting your own color, opacity, blur, right and down shift, or pick a predefined style from the effect gallery.
• Font style generator – Select font-family, size, letter and word spacing, color, font-weight, decoration, style, variant and case for your font and get the CSS code instantly.
• CSS transform generator – Scale the size, rotate, shift and skew HTML elements with the transform CSS3 property.
• CSS border and outline generator – Set the properties for your box border or outline to get the CSS code. Adjust the width, style, color and position of the lines surrounding your box HTML elements.
• Border radius generator – Apply border radius to the corners of your elements, setting it globally or for each individual corner.
• Reset CSS – A short code to be added to the top of your stylesheet. This will assure that your page will look the same in all browsers.
• Media queries – Declare different views for various media types and properties.
• Pixel — EM calculator – Calculate the PX or EM values, knowing the pixel size of the parent element.
• Useful links – Look around on other websites we recommend.

Bookmark this CSS cheat sheet with Ctrl + D.

Источник

The Ultimate CSS Selectors Cheat Sheet You Must Know

As a front-end developer, there are many times when you say, “What’s that property that takes child elements and applies CSS?” or something on the same thoughts. CSS is endless when you start to learn it.

Selectors are among the first things you’ll need to know when you start using CSS. Once you dig deep into the CSS selectors, you’ll discover a lot more to CSS selectors than you initially assumed. Whether you’re an experienced web developer or just a novice, the CSS selectors cheat sheet will always come in handy to create cross browser compatible websites.

With the ultimate CSS selectors cheat sheet, you’ll learn sophisticated highly functional CSS selectors that will save your significant amount of manual coding by allowing you to control and manipulate multiple elements based on their properties.

What are CSS Selectors?

CSS selectors are a part of the CSS rule set that selects the element we want to style. They are used in the CSS file or inside the “style” tag while declaring the CSS. CSS selectors play an essential role in applying the style to multiple elements at once. We can use the inline CSS using the “style” attribute.

But what if we want to apply the same CSS to 15 elements, we have to do that 15 times. What if something needs to be changed? We have to do that edition again 15 times. A smart choice is to use the selector, group elements using the identifier and apply CSS in a single place. An example of a selector is given below.

Источник