{"id":113760,"date":"2023-06-12T09:00:37","date_gmt":"2023-06-12T03:30:37","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113760"},"modified":"2024-07-27T18:12:12","modified_gmt":"2024-07-27T12:42:12","slug":"css-user-interface","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-user-interface\/","title":{"rendered":"CSS User Interface"},"content":{"rendered":"<p>In order to design HTML and XML, this specification provides user interface-related attributes and values (including XHTML). The user interface-related features from earlier CSS levels&#8217; properties and values are included and expanded. Basic consumer experience components are styled in a document using a variety of attributes and values.<br \/>\nA language called CSS is used to describe how structured documents\u2014like HTML and XML\u2014are rendered on screens, in print, etc.<\/p>\n<p>People&#8217;s interactions with information systems are outlined in the User Interface (UI) standard. Interface (UI) is the layperson&#8217;s word for the collection of screens, pages, buttons, forms, as well as other graphic cues that are employed to communicate with the device. Every website and app has a user experience.<\/p>\n<p>Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS.<\/p>\n<p>You can transform any component into one of numerous common user interface elements using the user interface attribute.<\/p>\n<p>Here is a list of some typical CSS user interface properties:<\/p>\n<ul>\n<li><strong>Box-sizing:<\/strong> It makes it easier for users to clearly fix objects on an area.<\/li>\n<li><strong>Resize:<\/strong> It is employed to resize items that are on an area.<\/li>\n<li><strong>Appearance:<\/strong> It makes it easier for users to create pieces for user interfaces.<\/li>\n<li><strong>Icon:<\/strong> It serves as the icon for the area.<\/li>\n<li><strong>Nav-up:<\/strong> When hitting the up arrow on the keyboard, nav-up is utilised to advance up.<\/li>\n<li><strong>Nav-left:<\/strong> While hitting the left arrow key on the keypad, the nav-left command is used to navigate left.<\/li>\n<li><strong>Nav-down:<\/strong> When the down arrow on the keypad is pressed, the nav-down command is used to go down.<\/li>\n<li><strong>Nav-right:<\/strong> When hitting the right cursor keys on the keypad, it is utilized to move to the right.<\/li>\n<li><strong>Outline-offset:<\/strong> It is employed to define the distance between an element&#8217;s border or edge and its outline.<\/li>\n<\/ul>\n<p>There are several CSS User Interface Properties that can greatly help in designing more responsive and adaptable layouts. Hence, developers are able to cater for usability and flexibility across different formats and devices on the internet. This flexibility is especially important in the modern world where users visit the website using a variety of devices\/ gadgets like smart phones, tablets, laptops and PCs.<\/p>\n<p>Also, CSS User Interface properties play an important role when it comes to getting the face value of a given website. Well-adopted properties such as box-sizing, resize, and outline-offset are important as they enhance a clean and well-structured layout that is easy to manage and appealing to the eyes. A good interface design ensures visitors stay for a longer time in a site, and the end result is that they are likely to explore site depths with interest.<\/p>\n<h3>Resize<\/h3>\n<p>The user can change the size of a box using the resize property. Inline and block elements with visible overflow are exempt from this feature. The overflow setting in this property must be either &#8220;scroll,&#8221; &#8220;auto,&#8221; or &#8220;hidden.&#8221;<\/p>\n<p><strong>a. Horizontal:<\/strong> The element&#8217;s width can be changed using the horizontal property.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\n.One\r\n{\r\ncolor: rgb(255, 0, 242);\r\n}\r\ndiv{\r\nborder: 4px solid black;\r\npadding: 20px;\r\nwidth: 300px;\r\nresize: horizontal;\r\noverflow: auto;\r\ncolor: green;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 class=\"One\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;div&gt;\r\n&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. &lt;\/p&gt;\r\n&lt;p&gt;&lt;\/p&gt;\r\n&lt;p&gt;Click and drag this div element's bottom right corner to resize it.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-horizontal.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113820\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-horizontal.webp\" alt=\"resize horizontal\" width=\"1752\" height=\"872\" \/><\/a><\/p>\n<p><strong>b. Vertical:<\/strong> The element&#8217;s height can be changed using this property.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv {\r\nborder: 4px solid black;\r\npadding: 20px;\r\nwidth: 300px;\r\nresize: vertical;\r\noverflow: auto;\r\ncolor: green;\r\n}\r\n.One\r\n{\r\ncolor:rgb(255, 0, 242);\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 class=\"One\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;div&gt;\r\n&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. &lt;\/p&gt;\r\n&lt;p&gt;Click and drag this div element's bottom right corner to resize it.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-vertical.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113821\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-vertical.webp\" alt=\"resize vertical\" width=\"1776\" height=\"872\" \/><\/a><\/p>\n<p><strong>c. Both:<\/strong> The element&#8217;s height and width can be changed with this property.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt; \r\n .One\r\n  {\r\n    color: rgb(255, 0, 242);\r\n  }\r\ndiv{\r\n  border: 4px solid black;\r\n  padding: 20px; \r\n  width: 300px;\r\n  resize: both;\r\n  overflow: auto;\r\n  color: green;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 class=\"One\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;div&gt;\r\n  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. &lt;\/p&gt;\r\n  &lt;p&gt;&lt;\/p&gt;\r\n  &lt;p&gt;Click and drag this div element's bottom right corner to resize it.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-both.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113822\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/resize-both.webp\" alt=\"resize both\" width=\"1792\" height=\"872\" \/><\/a><\/p>\n<h3>Outline-offset<\/h3>\n<p>This Stylesheet attribute controls the distance with an outline and an element&#8217;s edge or border. Transparent space separates the element from its outline.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;user interface property&lt;\/title&gt;\r\n&lt;style&gt;\r\ndiv.ex1 {\r\nmargin: auto;\r\npadding: 8px;\r\ncolor: black;\r\nwidth: 600px;\r\nborder: 1px solid black;\r\nbackground-color: aqua;\r\noutline: 4px solid black;\r\noutline-offset: 15px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body style = \"text-align: center;\"&gt;\r\n&lt;h1 style = \"color: rgb(255,0,242);\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;br&gt;\r\n&lt;div class=\"ex1\"&gt;CSS User Interface&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/outline-offset.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113819\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/outline-offset.webp\" alt=\"outline offset\" width=\"1792\" height=\"860\" \/><\/a><\/p>\n<p>The outline-offset property accepts values in pixels, ems, rems, and percentages. Negative values are also allowed, which will cause the outline to overlap with the element&#8217;s border or content.<\/p>\n<p>It&#8217;s worth noting that the outline property and the border property are not the same. The border property is a part of the element&#8217;s box model and affects its layout, while the outline property is purely visual and doesn&#8217;t affect the layout. The outline-offset property is also purely visual and doesn&#8217;t affect the layout.<\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>The supported browsers for the outline-offset property are Internet Explorer 15.0, Apple Safari 3.1, Google Chrome 4.0, Firefox 3.5, and Opera 10.5. A user experience (UI) is the area where interactions between people and machines take place in the automotive engineering field of human-computer interaction. This connection allows efficient machine operation and control for the user while providing feedback for informed decision making.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order to design HTML and XML, this specification provides user interface-related attributes and values (including XHTML). The user interface-related features from earlier CSS levels&#8217; properties and values are included and expanded. Basic consumer&#46;&#46;&#46;<\/p>\n","protected":false},"author":581,"featured_media":113818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27453],"class_list":["post-113760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-user-interface"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS User Interface - DataFlair<\/title>\n<meta name=\"description\" content=\"Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS. See its properties with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-user-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS User Interface - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS. See its properties with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-user-interface\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-12T03:30:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T12:42:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS User Interface - DataFlair","description":"Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS. See its properties with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/css-user-interface\/","og_locale":"en_US","og_type":"article","og_title":"CSS User Interface - DataFlair","og_description":"Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS. See its properties with examples.","og_url":"https:\/\/data-flair.training\/blogs\/css-user-interface\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-06-12T03:30:37+00:00","article_modified_time":"2024-07-27T12:42:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"CSS User Interface","datePublished":"2023-06-12T03:30:37+00:00","dateModified":"2024-07-27T12:42:12+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/"},"wordCount":699,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp","keywords":["CSS User Interface"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-user-interface\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/","url":"https:\/\/data-flair.training\/blogs\/css-user-interface\/","name":"CSS User Interface - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp","datePublished":"2023-06-12T03:30:37+00:00","dateModified":"2024-07-27T12:42:12+00:00","description":"Many user interface capabilities, such as resizing items, outlines, and box sizes, are provided via CSS. See its properties with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-user-interface\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-user-interface.webp","width":1200,"height":628,"caption":"css user interface"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-user-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS User Interface"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113760"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113760\/revisions"}],"predecessor-version":[{"id":142982,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113760\/revisions\/142982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113818"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}