CINXE.COM

<!doctype html> <html lang="en"> <head> <title>CSS Definition - What are cascading style sheets (CSS)?</title> <link rel="canonical" href="https://techterms.com/definition/css"> <meta name="description" content="Learn how web developers use CSS to format the appearance of text and other elements on webpages."> <meta name="keywords" content="CSS, Cascading Style Sheet, definition, Web page, layout, style, font, tables, formatting, HTML"> <meta name="robots" content="max-image-preview:large"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-itunes-app" content="app-id=923672016"> <meta charset="utf-8"> <link rel="preconnect" href="https://www.google-analytics.com"> <link rel="preconnect" href="securepubads.g.doubleclick.net"> <link rel="preconnect" href="https://www.googletagservices.com"> <link rel="stylesheet" href="https://techterms.com/css/tt.css?v=1" media="screen, print"> <link rel="icon" href="/svg/favicon.svg"> <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('consent','default',{'ad_storage':'granted','ad_user_data':'granted','ad_personalization':'granted','analytics_storage':'granted'});gtag('consent','default',{'ad_storage':'denied','ad_user_data':'denied','ad_personalization':'denied','region':["NO","DE","FI","BE","PT","BG","DK","LT","LU","LV","HR","FR","HU","SE","SI","MC","SK","MF","SM","YT","IE","GF","EE","MQ","MT","GP","IS","GR","IT","ES","AT","RE","CY","CZ","AX","PL","RO","LI","NL"]})</script> <script>let adsLoaded=!1;function loadAds(){var e,a,t;googletag.cmd.push(function(){googletag.pubads().refresh()}),t=document,e="script",a=t.createElement(e),t=t.getElementsByTagName(e)[0],a.async=1,a.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",a.setAttribute("data-ad-client","ca-pub-0087137714961591"),t.parentNode.insertBefore(a,t),adsLoaded=!0}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5K7VMN5PX3"></script> <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-5K7VMN5PX3')</script> <script>for(var ca=document.cookie.split("; "),i=0;i<ca.length;i++){var c=ca[i];if(-1!=c.indexOf("tt_theme=")){var theme=c.substring(9,c.length),html=document.getElementsByTagName("html")[0];html.classList.add("theme-"+theme),USERTHEME=theme;}else-1!=c.indexOf("tt_size=")&&(USERSIZE=c.substring(8,c.length))}</script> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script>var sizes_tlb = [[970, 90], [728, 90], [468, 60], [320, 100], [320, 50]];var sizes_ss = [[300, 600], [160, 600], [468, 60], [320, 100], [320, 50]];var sizes_ra = [[336, 280], [300, 250], [320, 100], [320, 50]];var sizes_lb = [[728, 90], [468, 60], [320, 100], [320, 50], "fluid"];window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() {function defineAdSlot(e,d,g,i){e="/1009901/"+e,g="div-gpt-ad-"+g+"-0",slot0=googletag.defineSlot(e,d,g).defineSizeMapping(i).addService(googletag.pubads())}var mapping_tlb = googletag.sizeMapping().addSize([1000, 0], [[970, 90], [728, 90], [468, 60], [320, 100], [320, 50]]).addSize([758, 0], [[728, 90], [468, 60], [320, 100], [320, 50]]).addSize([488, 0], [[468, 60], [320, 100], [320, 50]]).addSize([0, 0], [[320, 100], [320, 50]]).build();var mapping_ss = googletag.sizeMapping().addSize([981, 0], [[300, 600], [160, 600]]).build();var mapping_ra = googletag.sizeMapping().addSize([971, 0], [[336, 280], [300, 250], [320, 100], [320, 50]]).addSize([551, 0], [[300, 250]]).build();var mapping_lb = googletag.sizeMapping().addSize([1178, 0], [[728, 90], [468, 60], [320, 100], [320, 50], "fluid"]).addSize([966, 0], [[468, 60], [320, 100], [320, 50], "fluid"]).addSize([820, 0], [[728, 90], [468, 60], [320, 100], [320, 50], "fluid"]).addSize([520, 0], [[468, 60], [320, 100], [320, 50], "fluid"]).addSize([0, 0], [[320, 100], [320, 50], "fluid"]).build();var mapping_qlb = googletag.sizeMapping().addSize([758, 0], [[728, 90], [468, 60], [320, 100], [320, 50], "fluid"]).addSize([488, 0], [[468, 60], [320, 100], [320, 50], "fluid"]).addSize([0, 0], [[320, 100], [320, 50], "fluid"]).build();if (window.innerWidth >= 0) defineAdSlot('tt_tlb_2020', sizes_tlb, '1589388248615', mapping_tlb);if (window.innerWidth >= 551) defineAdSlot('tt_dra_2020', sizes_ra, '1589302365809', mapping_ra);if (window.innerWidth >= 0) defineAdSlot('tt_dlb_2020', sizes_lb, '1589236206757', mapping_lb);if (window.innerWidth >= 980) defineAdSlot('tt_dss_2020', sizes_ss, '1589233879778', mapping_ss);});googletag.cmd.push(function(){googletag.pubads().disableInitialLoad(),googletag.pubads().enableSingleRequest(),googletag.pubads().setTargeting("page_url","/definition/css"),googletag.enableServices()});adsReady=true;loadAds();if (window.innerWidth >= 0) googletag.cmd.push(function(){googletag.display("div-gpt-ad-1589388248615-0")});if (window.innerWidth >= 551) googletag.cmd.push(function(){googletag.display("div-gpt-ad-1589302365809-0")});if (window.innerWidth >= 0) googletag.cmd.push(function(){googletag.display("div-gpt-ad-1589236206757-0")});if (window.innerWidth >= 980) googletag.cmd.push(function(){googletag.display("div-gpt-ad-1589233879778-0")});</script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Article","dateCreated":"2006","datePublished":"2006","dateModified":"2023-03-07","copyrightYear":"2006","copyrightHolder":{"@type":"Organization","name":"Sharpened Productions"},"name":"CSS","description":"A technical definition of CSS","headline":"CSS","abstract":"Definition of CSS","author":{"@type":"Person","name":"Per Christensson","url":"https://techterms.com/authors/per_christensson"},"publisher":{"@type":"Organization","name":"TechTerms.com","logo":"https://techterms.com/img/main/techterms.png"},"teaches":{"@type":"DefinedTerm","url":"https://techterms.com/definition/css","name":"CSS","description":"A technical definition of CSS"},"audience":{"@type":"Audience","audienceType":"everyone"},"genre":"Technology","inLanguage":"en-US","isFamilyFriendly":"True","keywords":"Web page, layout, style, font, tables, formatting, HTML","locationCreated":{"@type":"Place","name":"United States"},"text":"Stands for \"Cascading Style Sheet.\" CSS is a style sheet language used for formatting content in HTML (webpages|webpage). CSS style sheets can define the appearance and formatting of text, (tables|table), and other elements separately from the content itself. Styles may be found within a webpage's (HTML|html) file or in a separate document referenced by multiple webpages.","contributor":{"@type":"Person","name":"Brian Pickle","url":"https://techterms.com/authors/brian_pickle"},"alternateName":"Cascading Style Sheet","image":"https://techterms.com/img/md/css_448.png","url":"https://techterms.com/definition/css"} </script> </head> <body> <div id="full"> <header id="siteheader"> <div class="content"> <a href="#main" class="visuallyhidden">Skip to main content</a> <a href="/" class="logo"><img src="/svg/logo.svg" width="212" height="24" alt="TechTerms.com"></a> <div class="siteheader-middle"> <div class="searchwrapper collapsed"> <form id="search" class="search" action="/search" method="post"> <div class='autocomplete' role='combobox' aria-expanded='false' aria-owns='autocomplete-results'> <input type="text" id="term" name="term" placeholder="Search (e.g. css, CPU, GPU, RAM)" aria-label="Search (e.g. psd, docx, exe, jpg, zip)" autocomplete="off" class='autocomplete-input term' aria-autocomplete='both' aria-controls='autocomplete-results'> <button id="searchsubmit" class="searchsubmit"></button> </div> <ul id='autocomplete-results' class='autocomplete-results hidden' aria-label='Search'> </ul> </form> </div> <a href="/random" class="headerbutton random" id="random"><img src="/svg/random.svg" alt="random" width="16" height="16"></a> <button id="searchtoggle"><img src="/svg/search-white.svg" alt="search" width="18" height="18"></button> </div> <div class="siteheader-right"> <button id="menuopen"><img src="/svg/menu.svg" alt="open menu" width="18" height="16"></button> <nav id="sitemenu" class="collapsed"> <button id="menuclose"><img src="/svg/close.svg" alt="close menu" width="14" height="14"></button> <ul> <li><a href="/browse/">Terms</a></li> <li><a href="/quiz/">Quizzes</a></li> <li><a href="/help/">Help Center</a></li> <li class="mobile"><a href="/random">Random Term</a></li> <li class="settings"><button id="settings"><img src="/svg/settings.svg" alt="settings" width="22" height="22"></button> <div class="settingsmenu"> <fieldset> <legend>Theme</legend> <input id="theme-default" value="default" type="radio" name="theme" checked> <label for="theme-default">Light</label> <input id="theme-dark" value="dark" type="radio" name="theme" > <label for="theme-dark">Dark</label> <input id="theme-hc" value="hc" type="radio" name="theme" > <label for="theme-hc">High Contrast</label> </fieldset> <div class="fontsizewrapper"><label for="fontsize">Font Size<input type="range" id="fontsize" name="fontsize" min="14" max="26" step="2" value="20"></label><span class="currentsize">20</span></div> <button id="resetsettings">Reset</button> </div> </li> </ul> </nav> </div> </div> </header> <main> <div class="adTopLB"> <div id='div-gpt-ad-1589388248615-0'> </div> </div> <div id="main" class="def"> <div id="left"> <div class="card hasheader"> <div class="cardheader"> <div class="breadcrumbs"><a href="/">Home</a><svg viewBox="0 0 9 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 14 9-7-9-7z"/></svg><a href="/category/internet">Internet Terms</a><svg viewBox="0 0 9 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 14 9-7-9-7z"/></svg>CSS Definition</div> </div> <article> <h1>CSS</h1> <div class="adDefRect"> <div id='div-gpt-ad-1589302365809-0'> </div> </div> <p>Stands for "<b>Cascading Style Sheet</b>."</p> <p>CSS is a style sheet language used for formatting content in HTML <a href="/definition/webpage">webpages</a>. CSS style sheets can define the appearance and formatting of text, <a href="/definition/table">tables</a>, and other elements separately from the content itself. Styles may be found within a webpage's <a href="/definition/html">HTML</a> file or in a separate document referenced by multiple webpages.</p> <p>CSS helps web developers create a uniform look across an entire <a href="/definition/website">website</a>. Instead of formatting the appearance of each table and block of text in a webpage's HTML code, a style is defined once in a CSS style sheet. Common HTML formatting <a href="/definition/tag">tags</a>, like <span class="command"><h2></span>, <span class="command"><strong></span>, and <span class="command"><em></span> can have custom formatting defined in a CSS file; custom styles can also be created and applied to text, images, and tables. Once a style is defined, it can be used by any page that links to the CSS file. </p> <p>By separating a webpage's content from its formatting, CSS makes it easy to update styles across several pages at once. For example, if you want to increase the body text size from 10pt to 12pt across dozens of separate HTML pages, you only need to change the style once in the CSS file. The text size changes for every instance of that style on any webpage using that style sheet.</p> <div class="summary">Some web browsers include a reader mode that automatically changes text formatting from the webpage's default to a special built-in stylesheet optimized for easy reading.</div> <p><b>NOTE:</b> The word "cascade" refers to the priority scheme used by CSS when multiple style rules overlap. User-defined CSS overrules styles applied directly to an HTML tag, which overrule any styles defined within the HTML document's header, which overrule any styles defined in an external CSS file.</p> <div class="adBotLB"> <div id='div-gpt-ad-1589236206757-0'> </div> </div> <div class="cardfooter"> <div class="upDate"><div class="author">Updated <span class="pdate">March 7, 2023</span> by <a href="/authors/brian_pickle">Brian P.</a></div></div><div id="citations"> <div class="tabs"> <div role="tablist" aria-label="citations"> <button role="tab" aria-selected="false" aria-controls="apa" tabindex="-1">APA</button> <button role="tab" aria-selected="false" aria-controls="mla" tabindex="-1">MLA</button> <button role="tab" aria-selected="false" aria-controls="chicago" tabindex="-1">Chicago</button> <button role="tab" aria-selected="false" aria-controls="html" tabindex="-1">HTML</button> <button role="tab" aria-selected="false" aria-controls="link" tabindex="-1">Link</button> </div> <div class="citationwrap"> <div id="apa" role="tabpanel" class="citation" hidden> </div> <div id="mla" role="tabpanel" class="citation" hidden> </div> <div id="chicago" role="tabpanel" class="citation" hidden> </div> <div id="html" role="tabpanel" class="citation" hidden> </div> <div id="link" role="tabpanel" class="citation" hidden> <div>https://techterms.com/definition/css</div> </div> <button id="citecopy"><span class="visuallyhidden">Copy</span><svg enable-background="new 0 0 488.3 488.3" viewBox="-7.5 -7.5 495.8 503.3" xmlns="http://www.w3.org/2000/svg"><path d="m314.25 85.4h-227c-21.3 0-38.6 17.3-38.6 38.6v325.7c0 21.3 17.3 38.6 38.6 38.6h227c21.3 0 38.6-17.3 38.6-38.6v-325.7c-.1-21.3-17.4-38.6-38.6-38.6zm11.5 364.2c0 6.4-5.2 11.6-11.6 11.6h-227c-6.4 0-11.6-5.2-11.6-11.6v-325.6c0-6.4 5.2-11.6 11.6-11.6h227c6.4 0 11.6 5.2 11.6 11.6z" stroke-width="15"/><path d="m401.05 0h-227c-21.3 0-38.6 17.3-38.6 38.6 0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5c0-6.4 5.2-11.6 11.6-11.6h227c6.4 0 11.6 5.2 11.6 11.6v325.7c0 6.4-5.2 11.6-11.6 11.6-7.5 0-13.5 6-13.5 13.5s6 13.5 13.5 13.5c21.3 0 38.6-17.3 38.6-38.6v-325.7c0-21.3-17.3-38.6-38.6-38.6z" stroke-width="15"/></svg></button> </div> </div> </div> </div> </article> </div> <div id="defquiz" class="card"> <h2 class="heading logoheading"><img src="/img/main/quiz.png" alt="quiz" style="width:45px">Test Your Knowledge</h2> <div class="quizBox"> <div class="quizBody"> <p class="quizQuestion">Adobe RGB and sRBG are examples of what?</p> <div class="quizTable"> <div id="ansButtonA" class="answerButton activeButton" data-answer="Anum" data-date="2024-08-23"><span class="ansLetter">A</span> <div class="answerCell"><span id="answerA" class="quizAnswer">Color wheels</span> <div class="answerBar"> <div id="quizBarA" class="quizBar"></div><span id="quizPercA" class="quizperc">0%</span> </div> </div> </div> <div id="ansButtonB" class="answerButton activeButton" data-answer="Bnum" data-date="2024-08-23"><span class="ansLetter">B</span> <div class="answerCell"><span id="answerB" class="quizAnswer">Color models</span> <div class="answerBar"> <div id="quizBarB" class="quizBar"></div><span id="quizPercB" class="quizperc">0%</span> </div> </div> </div> <div id="ansButtonC" class="answerButton activeButton" data-answer="Cnum" data-date="2024-08-23"><span class="ansLetter">C</span> <div class="answerCell"><span id="answerC" class="quizAnswer">Color spaces</span> <div class="answerBar"> <div id="quizBarC" class="quizBar"></div><span id="quizPercC" class="quizperc">0%</span> </div> </div> </div> <div id="ansButtonD" class="answerButton activeButton" data-answer="Dnum" data-date="2024-08-23"><span class="ansLetter">D</span> <div class="answerCell"><span id="answerD" class="quizAnswer">Color depths</span> <div class="answerBar"> <div id="quizBarD" class="quizBar"></div><span id="quizPercD" class="quizperc">0%</span> </div> </div> </div> <div class="quizResult"><div class="qmsg"> <b class="quizPass">Correct!</b> <b class="quizFail">Incorrect!</b>   <span class="customMessage"></span>  View the <a href="/definition/color_space">Color Space definition</a>.</div> <a href="/quiz/#morequizzes" class="quizNext btnprimary">More Quizzes →</a> </div> </div> </div> </div> </div> </div> <div id="right"> <div class="prevnext"> <a href="cryptography"><span class="arrow">‹</span>  <span class="linktext">Cryptography</span></a><span> | </span><a href="csv"><span class="linktext">CSV</span>  <span class="arrow">›</span></a></div> <div class="tf card"> <h2 class="heading">Tech Factor</h2> <a href="/help/tech_factor" class="info" title="What is the Tech Factor?">?</a> <a href="/techfactor/5"><span class="factor">5</span><span class="denom"> / 10</span></a></div> <div class="listBox card related"> <h2 class="heading">Related Terms</h2> <div class="rlists"> <ol> <li><a href="/definition/webpage">Webpage</a></li> <li><a href="/definition/web_design">Web Design</a></li> <li><a href="/definition/font">Font</a></li> <li><a href="/definition/html">HTML</a></li> </ol> <ol start="5"><li><a href="/definition/table">Table</a></li> <li><a href="/definition/tag">Tag</a></li> <li><a href="/definition/website">Website</a></li> <li><a href="/definition/web_development">Web Development</a></li> </ol> </div> </div> <div class="card"> <h2 class="heading">CSS Images</h2> <div class="baguetteBox gallery"> <figure> <a href="https://techterms.com/img/xl/css_448-2.png"><img src="https://techterms.com/img/sm/css_448-2.png" alt="A webpage with default CSS" width="225" height="156" srcset="https://techterms.com/img/md/css_448-2.png 450w, https://techterms.com/img/sm/css_448-2.png 225w" sizes="(max-width: 748px) 225px, (max-width: 970px) 162px, 225px"></a> <figcaption class="caption">A webpage with default CSS</figcaption> </figure> <figure> <a href="https://techterms.com/img/xl/css_448.png"><img src="https://techterms.com/img/sm/css_448.png" alt="A webpage with modified CSS" width="225" height="156" srcset="https://techterms.com/img/md/css_448.png 450w, https://techterms.com/img/sm/css_448.png 225w" sizes="(max-width: 748px) 225px, (max-width: 970px) 162px, 225px"></a> <figcaption class="caption">A webpage with modified CSS</figcaption> </figure> </div> </div> <div class="adRightSky"> <div id='div-gpt-ad-1589233879778-0'> </div> </div> </div> <div class="techterms card"> <h2 class="heading">The Tech Terms Computer Dictionary</h2> <p>The definition of CSS on this page is an original definition written by the <a href="/authors/">TechTerms.com team</a>. If you would like to reference this page or cite this definition, please use the green citation bar directly below the definition.</p> <p>Our goal to explain computer terminology in a way that is easy to understand. We strive for accuracy and simplicity with every definition we publish. If you have feedback about this definition or would like to suggest a new technical term, please <a href="/contact">contact us</a>.</p> <h2 class="heading">TechTerms Newsletter</h2> <p>Improve your technical knowledge with our daily or weekly newsletter! Subscribe today and get new terms and quizzes delivered to your inbox.</p> <button id="ttn_open" class="btnprimary">Subscribe</button> </div> </div> <div class="popupwrapper"> <div id="newsletter_popup"> <button class="close">×</button> <div id="ttnform"> <h3 class="heading">Sign up for the free TechTerms Newsletter</h3> <form id="subscribe"> <div class="field"><label for="newsletter_email">Email (required):</label> <input type="email" id="newsletter_email" name="newsletter_email" required aria-label="email address"> </div> <div class="row1"> <div class="field"><label for="first_name">First Name:</label> <input type="text" name="first_name" id="first_name"></div> <div class="field"><label for="first_name">Last Name:</label> <input type="text" name="last_name" id="last_name"></div> </div> <fieldset class="row2"> <legend>How often would you like to receive an email?</legend> <input type="radio" name="frequency" id="daily" value="d" checked><label for="daily">Daily</label> <input type="radio" name="frequency" id="weekly" value="w"><label for="weekly">Weekly (Every Tuesday)</label> <input type="text" id="newsletter_message" name="message" class="cfieldhid" aria-hidden="true" aria-label="If you are a human, please do not fill in this field." tabindex="-1"> </fieldset> <input type="submit" class="btnprimary" value="Subscribe"> <div id="ttnerror"> </div> <p>You can unsubscribe or change your frequency setting at any time using the links available in each email.<br><br>Questions? Please <a href="/contact">contact us</a>.</p> </form> </div> <div id="ttnconfirm" style="display: none;"> <h3>Thank You</h3> <p>We just sent you an email to confirm your email address. Once you confirm your address, you will begin to receive the newsletter.</p> <p>If you have any questions, please <a href="/contact">contact us</a>.</p> <button class="ok btnprimary">Ok</button> </div> </div> </div> </main> <footer id="sitefooter"><a href="https://sharpened.com/" target="_blank" rel="noopener"><span class="copyright">© 2025 Sharpened Productions</span></a>  |  <a href="/terms">Terms of Use</a>  |  <a href="/privacy">Privacy Policy</a>  |  <a href="/about">About</a>  |  <a href="/contact">Contact</a></footer> </div> <script defer src="https://techterms.com/js/tt.js"></script><script> var cterm = 'CSS'; var curl = 'css'; quizDate = '2024-08-23'; T = cterm; C = "3ea17b4f06f4997b40044de6173c3300"; </script> <script defer src="https://techterms.com/js/quiz.js?v=1"></script> </body> </html>