Using Primer CSS - A Simple and Transparent CSS Library for Web Development Last Updated : 06 Jun, 2023 Comments Improve Suggest changes Like Article Like Report Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to-use set of styles for web development. Obvious and transparent: That means the code is understandable for all coders or all beginners. When code is obvious and transparent, it means that it is easy to understand, maintain, and modify. It is clear and concise, and there are no hidden complexities or surprises that might cause confusion or errors. Obvious and transparent code is also easy to read and follow, and it doesn't require a lot of mental effort to understand what it is doing. For writing understandable code, we will be learning some principles that are going to make our code more obvious and transparent. They are the following: Use a meaningful class or id name that describes the visual style applied. Primer CSS provides an intuitive set of class names.Use comments to explain your code. Comments can help you remember what your code is doing and help others understand your code. Avoid unnecessarily complex writing code. If there is a simpler way to do something, use it.The class names are easy to understand and remember, making it easy for developers to use them in their code.Primer CSS provides styles that can be applied to any HTML element without affecting its layout or functionality.The styles provided by Primer CSS have a minimal impact on the underlying HTML structure of the page, making it easy for developers to apply them without worrying about how they will affect the page's structure or behavior. Some classes that are used in this article: .bg-white: This class sets the background color of an element to white..text-black: This class sets the text color of an element to black..border: This class sets a border around an element with a width of 1 pixel..rounded: This class rounds the corners of an element..p-4: This class sets the padding of an element to 4 pixels..m-4: This class sets the margin of an element to 4 pixels. Syntax: <div class="bg-white"> ... </div> Example 1: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="ml-6"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Obvious and transparent</h3> <br /> </div> <div class="bg-white text-black border rounded p-4 m-4"> This is a sample text with Primer CSS styles applied. </div> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="ml-6"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Obvious and transparent</h3> <br /> </div> <button class="color-bg-sponsors-emphasis text-white border rounded p-2 m-6"> Click me! </button> </body> </html> Output: Reference: https://primer.style/css/principles#obvious-and-transparent Comment More infoAdvertise with us Next Article Using Primer CSS - A Simple and Transparent CSS Library for Web Development P pokhrajverma6266 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Primer-CSS Similar Reads 10 Best CSS Frameworks for Frontend Developers in 2024 " NASA has landed robots on Mars, and some developers are still struggling with the center alignments of the divs in their website" This joke has a lot of truth in it. Making a beautiful website that looks good on every browser is not an easy thing for web developers, mainly frontend developers. Dev 10 min read Tailwind CSS: Utility-First Styling for Rapid UI Development Tailwind CSS is a utility-first CSS framework that simplifies web development by providing a set of pre-designed utility classes. These utility classes enable developers to build custom designs without writing any custom CSS. Tailwind CSS is becoming a revolutionary framework that has gained immense 9 min read CSS Rules in Web Design for All Screens A website is a beautiful convergence of art, tech, and science. It reflects all in the web design field. To craft a fully functional, appealing, intuitive, user-friendly HTML, CSS, and Javascript are the three major parts of web design. HTML is like a document skeleton; CSS manages the visuals and l 6 min read CSS Rules in Web Design for Mobile Screens With the increasing prevalence of mobile devices, designing websites that are responsive and visually appealing on mobile screens has become paramount. Mobile web design focuses on crafting websites that are responsive, adaptive, and optimized for mobile devices such as smartphones and tablets. Unli 7 min read CSS Tricks That Every Web Developer Should Know CSS (Cascading Style Sheets) is the magic ingredient that breathes life into the raw structure of HTML, transforming it into visually captivating and user-friendly interfaces. While the core concepts of CSS are relatively easy to grasp, mastering its nuances takes dedication and practice. But the re 7 min read Most Common CSS Mistakes that Web Developers Make Cascading Style Sheets (CSS) is a style sheet language used to apply styles on HTML tags. Most people think that CSS is easy to learn but the fact is that CSS is really straightforward to learn but it is difficult to master. It requires a lot of practice to master CSS. There are some common mistakes 6 min read Free Website Templates - HTML and CSS Templates with Source Code HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental building blocks for designing and developing any web page or website. They create an interactive and visually appealing user interface through various CSS properties. This article curates a list of top-notch HTML 5 min read CSS Viewer Chrome Extension for Web Developers CSS viewer inspect and displays the CSS properties of a web page. It is a very smart and useful extension that identifies CSS properties anywhere one points his mouse. It is time-saving and very fast, and also it makes identifying CSS easy. It allows one to click on any image, button, text, etc on a 4 min read Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De 4 min read 5 Amazing CSS Styles that Every Developer Should Know CSS (Cascading Style sheets) helps the developer to enhance the visual appearance of web pages, In other words, we can say that CSS adds life to web pages and beautifies it. Using CSS, we can change the layout, color, fonts, images, and the best part is that for a particular style or layout we can w 5 min read Like