CSS Syntax — How to Code 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 syntax, coding css, how to code, stylesheets, cascading style sheets"> <meta name="Description" content="Learn the CSS syntax - how to code CSS. Includes interactive examples."> <link rel="canonical" href="https://www.quackit.com/css/tutorial/css_syntax.cfm"> <title>CSS Syntax — How to Code 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 Syntax — How to Code CSS</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/css/tutorial/css_introduction.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS Introduction</a></li> <li><a href="/css/tutorial/implementing_css.cfm">Add CSS to a Website <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">This page describes the basic syntax that that you can use to apply CSS to any website.</p> <p>The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.</p> <p>You don't need to remember this in order to code CSS. Once you start coding CSS, you'll do so without thinking "this is a selector" or "that is a property". This should begin to make sense once you study the examples on this page.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <p>Syntax:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">selector { property: value }</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The selector represents the HTML element that you want to style. For example:</p> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">h1 { color: blue }</textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>This code tells the browser to render all occurences of the HTML <a href="/html/tags/html_h1_tag.cfm"><code><h1></code></a> element in blue. </p> <h2>Grouping Selectors</h2> <p>You can apply a style to many selectors if you like. Just separate the selectors with a comma.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">h1, h2, h3, h4, h5, h6 { color: blue }</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Applying Multiple Properties</h2> <p>To apply more than one property separate each declaration with a semi-colon.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false">h1 { color:blue; font-family: arial, helvetica, "sans serif" }</textarea> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Readability</h2> <p>You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false">h1 {
	color: blue;
	font-family: arial, helvetica, "sans serif";
	font-size: 150%;
}</textarea> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>OK, so you've now learned about the CSS syntax. But how do you incorporate this syntax into your website? The next lesson will show you how to incorporate CSS into your HTML documents.</p> <ul class="pager"> <li><a href="/css/tutorial/css_introduction.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS Introduction</a></li> <li><a href="/css/tutorial/implementing_css.cfm">Add CSS to a Website <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></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="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></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 Syntax — How to Code CSS