CSS <integer> Data Type

<!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 <integer> number, integers, valid, invalid, Data Type, types, value, values"> <meta name="Description" content="Explains the <integer> CSS data type and how you can use it."> <link rel="canonical" href="https://www.quackit.com/css/data_types/css_integer_data_type.cfm"> <title>CSS <integer> Data Type</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 <integer> Data Type</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">The CSS <code><integer></code> data type denotes an integer number, positive or negative.</p> <p>When you see <code><integer></code> (including the <code><</code> and <code>></code>) anywhere in the CSS specifications, this refers to the fact that the value can be a valid integer.</p> <p>An integer consists of one or more decimal digits <code>0</code> through <code>9</code>.</p> <p>Integers can be immediately preceded by <code>-</code> to indicate a negative value, or <code>+</code> to indicate a positive value.</p> <p>Here are examples of valid <code><integer></code> values:</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">0
43
+97
92003
-450</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> <aside class="info"> <h4>Restrictions on Range</h4> <p>Many properties that allow an integer as a value actually restrict the value to some range, often to a non-negative value. </p> <p>So even though the <code><integer></code> data type allows negative values (for example), whether you can actually use negative values will depend on the property (or function) that it's being applied to.</p> </aside> <h2>Unit Identifiers</h2> <p>No unit identifiers are required with integers, however, a unit identifier may be required if the integer is part of another data type. For example, a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> value might look like this:</p> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">12px</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>However, in this case, the CSS specifications will state that the value must be a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> (or whatever the value type is).</p> <p>Also, strictly speaking, a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> is a <dfn>dimension</dfn>, which is a <a href="/css/data_types/css_number_data_type.cfm"><code><number></code></a> data type immediately followed by a unit identifier. The <a href="/css/data_types/css_number_data_type.cfm"><code><number></code></a> data type allows a broader set of values than the <code><integer></code> type.</p> <h2>Fractional Components</h2> <p>You can't use a <code>.</code> (dot) within an integer, so you can't use values like <code>2.5</code> in places where only an <code><integer></code> data type is allowed.</p> <p>However, the <a href="/css/data_types/css_number_data_type.cfm"><code><number></code></a> data type does allow dots.</p> <h2>An <code><integer></code> Example</h2> <p>The <a href="/css/css3/properties/css_column-count.cfm"><code>column-count</code></a> property accepts either of the following two values.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><integer> | auto</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> <p>So you could write something like this: </p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false">column-count: 3;</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> <p>Here's a working example:</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false"><style>
.multicol {
 column-count: 3;
 font-family: sans-serif;
 width: 360px;
 background: gold;
 padding: 10px;
}
</style>
<div class="multicol">
 <h3>Column-Count Example</h3>
 <p>If your browser supports the column-count property, this text should span across three different columns. If it doesn't, then it will only span one long column. </p>
 <p>Try changing the numbers to see how it affects the number of columns. Add more text if you need to.</p>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/data_types/css_integer_data_type_column-count_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Specifications</h2> <ul> <li>The <code><integer></code> data type is <a href="https://www.w3.org/TR/css3-values/#integer-value">defined</a> in <a href="https://www.w3.org/TR/css3-values/">CSS Values and Units Module Level 3</a> (W3C Candidate Recommendation, 29 September 2016)</li> <li>It is also <a href="https://www.w3.org/TR/CSS21/syndata.html#numbers">defined</a> in <a href="https://www.w3.org/TR/CSS21/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a> (W3C Recommendation 07 June 2011)</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/data_types/">CSS Data Types</a></h3> <ul> <li><a href="/css/data_types/css_angle_data_type.cfm"><angle></a></li> <li><a href="/css/data_types/css_basic-shape_data_type.cfm"><basic-shape></a></li> <li><a href="/css/data_types/css_blend-mode_data_type.cfm"><blend-mode></a></li> <li><a href="/css/data_types/css_color_data_type.cfm"><color></a></li> <li><a href="/css/data_types/css_counter-style_data_type.cfm"><counter-style></a></li> <li><a href="/css/data_types/css_custom-ident_data_type.cfm"><custom-ident></a></li> <li><a href="/css/data_types/css_frequency_data_type.cfm"><frequency></a></li> <li><a href="/css/data_types/css_image_data_type.cfm"><image></a></li> <li><a href="/css/data_types/css_inherit_data_type.cfm"><inherit></a></li> <li><a href="/css/data_types/css_integer_data_type.cfm"><integer></a></li> <li><a href="/css/data_types/css_length_data_type.cfm"><length></a></li> <li><a href="/css/data_types/css_number_data_type.cfm"><number></a></li> <li><a href="/css/data_types/css_percentage_data_type.cfm"><percentage></a></li> <li><a href="/css/data_types/css_position_data_type.cfm"><position></a></li> <li><a href="/css/data_types/css_ratio_data_type.cfm"><ratio></a></li> <li><a href="/css/data_types/css_resolution_data_type.cfm"><resolution></a></li> <li><a href="/css/data_types/css_single-transition-timing-function_data_type.cfm"><single-transition-timing-function></a></li> <li><a href="/css/data_types/css_string_data_type.cfm"><string></a></li> <li><a href="/css/data_types/css_time_data_type.cfm"><time></a></li> <li><a href="/css/data_types/css_url_data_type.cfm"><url></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 <integer> Data Type