CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS, Cascading Style Sheets, Stylesheets, External Style Sheet, hidden layers, css examples, HTML, javascript, js, .css file, free tutorial, tutorials, learn, codes, code, ccs"> <meta name="Description" content="CSS (Cascading Style Sheet) enables you to change the style of your HTML documents. We provide free tutorials, examples and CSS codes for web developers. CSS provides you with enormous control over the styes of your HTML documents."> <link rel="canonical" href="https://www.quackit.com/css/"> <title>CSS</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <p class="lead">CSS (Cascading Style Sheets) allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page.</p> <p>CSS has become a crucial part of building websites and blogs. CSS goes hand in hand with HTML to display your website the way it's intended to be displayed. Here, you'll find CSS tutorials, code examples, and CSS reference material.</p> <div class="cards"> <article class="card"> <a class="wrapper" href="/css/examples/"> <img src="/pix/stock/html_examples.png" alt="CSS examples"> <div class="card-body"> <h2>CSS Examples</h2> <p>Loads of copy & paste code examples. Includes backgrounds, borders, colors, gradients, CSS grid, flexbox, animations, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/reference/"> <img src="/pix/stock/reference_2.png" alt="CSS reference"> <div class="card-body"> <h2>CSS Reference</h2> <p>CSS properties, functions, @-rules, data types, color values, and more — all on one page. Filter by keyword.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/grid/tutorial/"> <img src="/pix/stock/css_grid_placement_basic_500x200_1.png" alt="Grid tutorial"> <div class="card-body"> <h2>Grid Layout Tutorial</h2> <p>CSS grid layout will soon be an essential skill for any front-end developer's toolkit. Check it out and see all the fuss is about.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/flexbox/tutorial/"> <img src="/pix/stock/flexbox_example_1_500x200.gif" alt="Flexbox tutorial"> <div class="card-body"> <h2>Flexbox Tutorial</h2> <p>Learn how to create flexible layouts and widgets without having to resort to floats and clearfixes! </p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/tutorial/"> <img src="/pix/stock/css_tutorial_500x200_1.gif" alt="CSS tutorial"> <div class="card-body"> <h2>CSS Tutorial</h2> <p>CSS is the standard way to style web pages. It allows you to set colors, fonts, widths, heights, margins, padding, and much more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/color/"> <img src="/pix/stock/css_colors_2.png" alt="CSS colors"> <div class="card-body"> <h2>CSS Color</h2> <p>Loads of CSS color resources. Color pickers, color charts, converters, generators. Full reference for color properties and color values.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/css3/gradients/"> <img src="/pix/stock/css_colors.png" alt="CSS gradients"> <div class="card-body"> <h2>CSS Gradients</h2> <p>Use CSS to blend two or more colors. Gradients can be linear or radial.</p> </div> </a> </article> <div class="ad">  <div data-fuse="23059883644"></div> </div> <article class="card"> <a class="wrapper" href="/css/properties/"> <img src="/pix/stock/css_properties_500x200_1.gif" alt="CSS properties"> <div class="card-body"> <h2>CSS Properties</h2> <p>Alphabetical list of CSS properties. Includes CSS properties for colors, fonts, widths, heights, margins, padding, and much more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/functions/"> <img src="/pix/stock/css_functions_500x200.png" alt="CSS functions"> <div class="card-body"> <h2>CSS Functions</h2> <p>Full list of CSS functions available in CSS3. Includes transform functions, color functions, shape functions and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/data_types/"> <img src="/pix/stock/css_patterns_2.png" alt="CSS data types"> <div class="card-body"> <h2>CSS Data Types</h2> <p>List of CSS data types. These are the types of values that are accepted in each CSS property, function, etc.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/at-rules/"> <img src="/pix/stock/css_at-rule.png" alt="CSS at-rules"> <div class="card-body"> <h2>CSS @-Rules</h2> <p>List of CSS at-rules. At-rules (or @-rules) define special processing rules or values for the style sheet. They start with an <code>@</code> followed by their name.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/selectors/"> <img src="/pix/stock/css_selectors.gif" alt="CSS selectors"> <div class="card-body"> <h2>CSS Selectors</h2> <p>Full list of CSS selectors with examples and explanations.</p> <p>Includes selectors from CSS1, CSS2, CSS3 (Selectors Level 3) and Selectors Level 4.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/css3/animations/animatable_properties/"> <img src="/pix/html/codes/marquee_codes.png" alt="CSS animatable properties"> <div class="card-body"> <h2>CSS Animatable Properties</h2> <p>Full list of properties that are able to be animated with CSS.</p> <p>Animate background colors, border widths, element position, padding, margins, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/bootstrap/tutorial/"> <img src="/pix/stock/bootstrap_tutorial_500x200_3.png" alt="Bootstrap logo"> <div class="card-body"> <h2>Bootstrap Tutorial</h2> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/sass/tutorial/"> <img src="/pix/stock/sass_logo_500x200.png" alt="Sass logo"> <div class="card-body"> <h2>Sass Tutorial</h2> <p>Sass is a CSS preprocessor that helps you create CSS. Sass can speed up your CSS development. Learn how!</p> </div> </a> </article> </div> <ul class="steps"> <li> <h2>Style Sheet Types</h2> <div class="index"> <ul> <li> <h4><a href="/css/inline_style_sheets.cfm">Inline Style Sheets</a></h4> <p>Add styles directly to your HTML document as you code.</p> </li> <li> <h4><a href="/css/embedded_style_sheets.cfm">Embedded Style Sheets</a></h4> <p>Add styles to the head of your HTML document.</p> </li> <li> <h4><a href="/css/external_style_sheets.cfm">External Style Sheets</a></h4> <p>Declare your styles in an external style sheet which you can reference from all your HTML pages.</p> </li> </ul> </div> <div class="ad">  <div data-fuse="23059511721"></div> </div> <h2>Code Examples & Quick Reference</h2> <div class="index"> <ul> <li> <h4><a href="/css/css_color_codes.cfm">CSS Color Codes</a></h4> <p>Color picker, color charts, and code examples all in one page. Includes hex values, RGB, color names, transparency, and more.</p> </li> <li> <h4><a href="/css/at-rules/">CSS @-Rules</a></h4> <p>List of CSS at-rules. At-rules (or @-rules) define special processing rules or values for the style sheet. They start with an <code>@</code> followed by their name. </p> </li> <li> <h4><a href="/css/css3/properties/">CSS3 Properties</a></h4> <p>List of properties introduced in CSS3. Includes animations, flexbox, gradients, multi-column layouts, and more.</p> </li> <li> <h4><a href="/css/codes/marquees/">CSS Marquees</a></h4> <p>Use CSS to create scrolling text and images in a standards-compliant way.</p> </li> <li> <h4><a href="/css/codes/patterns/">CSS Patterns</a></h4> <p>CSS gradients aren't limited to just fading from one color to another.</p> <p>Here's how you can use gradients to create interesting background patterns.</p> </li> <li> <h4><a href="/css/css_media_types.cfm">CSS Media Types</a></h4> <p>Used with media queries. Apply a separate style depending on the media type that's displaying your web page.</p> </li> <li> <h4><a href="/css/css_media_features.cfm">CSS Media Features</a></h4> <p>Used with media queries. Apply a separate style depending on the media features available in the output device.</p> </li> <li> <h4><a href="/css/codes/css_floating_menu.cfm">Floating Menu</a></h4> <p>Quick code to make a hovering menu.</p> </li> <li> <h4><a href="/css/css_bgcolor.cfm">CSS Background Color</a></h4> <p>Set the background color of an HTML element.</p> </li> <li> <h4><a href="/css/css_leading.cfm">CSS Leading</a></h4> <p>Apply the CSS equivalent of leading to your text.</p> </li> <li> <h4><a href="/css/css_align.cfm">CSS Align</a></h4> <p>Align your elements vertically and horizontally.</p> </li> <li> <h4><a href="/css/css_table_width.cfm">CSS Table Width</a></h4> <p>Use CSS to set the width of your tables.</p> </li> <li> <h4><a href="/css/css_cellpadding.cfm">CSS Cellpadding</a></h4> <p>Looking for a way to apply cellpadding to a table cell? Here it is.</p> </li> <li> <h4><a href="/css/css_cellspacing.cfm">CSS Cellspacing</a></h4> <p>Modify the space between table cells using CSS.</p> </li> <li> <h4><a href="/css/css_hyperlinks.cfm">Hyperlink Effects</a></h4> <p>If you don't like the default way browsers display your hyperlinks, check this out!</p> </li> <li> <h4><a href="/css/css_table-layout.cfm">Faster Loading Tables with CSS</a></h4> <p>Explains the CSS property that can help large tables load faster.</p> </li> <li> <h4><a href="/css/css_scrollbars.cfm">CSS Scrollbars</a></h4> <p>You can use CSS to add scrollbars to an HTML element when its contents become to big.</p> </li> <li> <h4><a href="/css/css_print_version.cfm">CSS Print Version</a></h4> <p>Use CSS to apply a separate style to the printed version of your web pages.</p> </li> </ul> </div> <div class="clr"></div> </li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/tutorial/">CSS Tutorial</a></h3> <ul> <li><a href="/css/tutorial/css_introduction.cfm">Introduction to CSS</a></li> <li><a href="/css/tutorial/css_syntax.cfm">CSS Syntax - How to Code CSS</a></li> <li><a href="/css/tutorial/implementing_css.cfm">How to add CSS to a Website</a></li> <li><a href="/css/tutorial/css_class.cfm">CSS Class Selectors</a></li> <li><a href="/css/tutorial/css_id.cfm">CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_font.cfm">CSS Font Properties</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties</a></li> <li><a href="/css/tutorial/css_height_width.cfm">CSS Height & Width Properties</a></li> <li><a href="/css/tutorial/css_background_code.cfm">CSS Background Code</a></li> <li><a href="/css/tutorial/css_border.cfm">CSS Border Properties</a></li> <li><a href="/css/tutorial/css_margin.cfm">CSS Margin Properties</a></li> <li><a href="/css/tutorial/css_padding.cfm">CSS Padding Properties</a></li> <li><a href="/css/tutorial/css_lists.cfm">How to Style Lists</a></li> <li><a href="/css/tutorial/css_positioning.cfm">CSS Positioning</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float</a></li> <li><a href="/css/tutorial/css_layers.cfm">CSS Layers</a></li> <li><a href="/css/tutorial/css_flexbox_and_grid.cfm">CSS Flexbox & Grid</a></li> <li><a href="/css/tutorial/css_summary.cfm">CSS Summary</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS