🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 83 (from laksa048)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa083.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css\')), getAhrefsUnparsedNoserviceFromURL(\'https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css","crawl_time":1774250190,"first_indexed_time":1602603494,"http_code":200,"src_unparsed":"com,digitalocean!www,\/community\/tutorials\/how-to-create-classes-with-css s443","src_root_hash":"13428457316079428483","history_drop_reason":null,"meta_title":"How To Create Classes With CSS | DigitalOcean","meta_descriptions":["In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class …"],"attrs_boilerpipe_text":"Introduction\nIn this tutorial, you will create a CSS\nclass\nselector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element.\nPrerequisites\nTo follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series\nHow To Set Up You CSS and HTML Practice Project\n.\nHow CSS Class Selectors Work\nA CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than\nall\ninstances of a certain element. Unlike HTML elements (such as\n<p>\n,\n<h1>\nor\n<img>\n), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a\n.\n, which can help you distinguish between tag selectors and class selectors in CSS files.\nA CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the\n.\nprepended to the class name:\n.red-text\n{\ncolor\n:\nred\n;\n}\nTo use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class\nattribute\nin your HTML document like so:\n<\nh1\nclass\n=\n\"\n.red-text\n\"\n>\nContent.\n<\/\nelement\n>\nCreating a CSS Class Using a Class Selector\nLet’s begin exploring CSS classes in practice. Erase everything in your\nstyles.css\nfile and add the following code snippet to specify a rule for the class\nred-text\n:\nstyles.css\n.red-text\n{\ncolor\n:\nred\n;\n}\nAfter adding the code snippet to your\nstyles.css\nfile, save the file.\nReturn to your\nindex.html\nand erase everything but the first line of code\n<link rel=\"stylesheet\" href=\"css\/styles.css\">\nthat links to your CSS stylesheet. Then add the following HTML code snippet:\nindex.html\n<\np\nclass\n=\n\"\nred-text\n\"\n>\nHere is the first sample of paragraph text.\n<\/\np\n>\nNote that the class name is not prepended here with a\n.\nas it is when being used as a selector for a CSS rule. Your entire\nindex.html\nfile should have the following contents:\nindex.html\n. . .\n<\nlink\nrel\n=\n\"\nstylesheet\n\"\nhref\n=\n\"\ncss\/styles.css\n\"\n>\n<p class=\"red-text\" Here is the first sample of paragraph text.\n<\/\np\n>\nIn this code snippet you have added text using the HTML\n<p>\ntag. But you have also specified the\nred-text\nclass by adding the highlighted class\nattribute\nclass=\"red-text\"\ninside\nthe opening HTML tag.\nSave your\nindex.html\nfile and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step\nHow To View An Offline HTML File In Your Browser\n).\nYou should receive a webpage with red text:\nLet’s add an additional CSS class to explore styling different pieces of\n<p>\ntext content with different classes. Add the following code snippet to your\nstyles.css\nfile (after your CSS rule for “red-text”):\nstyles.css\n.yellow-background-text\n{\nbackground-color\n:\nyellow\n;\n}\nThis CSS rule declares that the class\nyellow-background-text\nis assigned the\nyellow\nvalue for the\nbackground-color\nproperty. Any HTML text element assigned this class will have a yellow background. Note that the use of the word\ntext\nin the class\nyellow-background-*text*\nis for human readability purposes only. You do not need to include the word\ntext\nin your class names for classes assigned to HTML text.\nTo apply this new CSS class, return to your\nindex.html\nfile and add the following line of code to the bottom:\nindex.html\n<\np\nclass\n=\n\"\nyellow-background-text\n\"\n>\nHere is the second sample of paragraph text.\n<\np\n>\nIn this code snippet, you have added some text content with the\n<p>\nelement and specified the\nyellow-background-text\nclass. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background:\nNote that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your\nindex.html\nfile:\nindex.html\n<\np\nclass\n=\n\"\nred-text yellow-background-text\n\"\n>\nHere is a third sample of text.\n<\/\np\n>\nNote that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this:\nYour third line of text should now be styled according to the property values set in the\nred-text\nclass and the\nyellow-background-text\nclass and have a red font and yellow background.\nAdding CSS Classes to Images\nCSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your\nstyles.css\nfile and add the following code snippet:\nstyles.css\n.black-img\n{\nborder\n:\n5px dotted black\n;\nborder-radius\n:\n10%\n;\n}\n.yellow-img\n{\nborder\n:\n25px solid yellow\n;\nborder-radius\n:\n50%\n;\n}\n.red-img\n{\nborder\n:\n15px double red\n;\n}\nHere you have created CSS rules for three different classes that can be applied to the HTML\n<img>\ntag. Before you move on, let’s briefly study what we’ve declared in each ruleset:\nThe first CSS rule declares that the class\nblack-img\nshould have a\nblack\n,\ndotted\nborder five pixels wide and a\nborder-radius\nsized at 10%, which gives the element rounded corners.\nThe second CSS rule declares that the class\nyellow-img\nshould have a\nyellow\n,\nsolid\nborder 25 pixels wide and a\nborder-radius\nsized at 50%, which gives the element a circular shape.\nThe third CSS rule declares that the class\nred-img\nshould have a\nred\n,\ndouble\nborder 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape.\nSave the\nstyles.css\nfile. Then erase everything from your\nindex.html\nfile (except for the first line of code:\n<link rel=\"stylesheet\" href=\"css\/styles.css\">\n) and add the following code snippet:\nindex.html\n<\nimg\nsrc\n=\n\"\nhttps:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\n\"\nclass\n=\n\"\nblack-img\n\"\n>\n<\nimg\nsrc\n=\n\"\nhttps:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\n\"\nclass\n=\n\"\nyellow-img\n\"\n>\n<\nimg\nsrc\n=\n\"\nhttps:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\n\"\nclass\n=\n\"\nred-img\n\"\n>\nEach of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the\nstyles.css\nfile. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial\nHow To Add Images To Your Webpage With HTML\n.\nSave your\nindex.html\nfile and load it in the browser. You should receive something like this:\nYour webpage should now display three images, each styled with the different specifications of their assigned class.\nTo continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a\nfont-color\ndeclaration will not change the color of an image border. Likewise, a\nheight\ndeclaration will not change the size of the font.\nConclusion\nYou have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the\nsecond half of this tutorial series\n.\nIn the next tutorial, you will create CSS\nID\nselectors, which work similarly as class selectors with the exception of some unique features.\nWas this helpful?\nThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.","attrs_markdown":"[Now Available: OpenAI GPT-5.4 on the Gradient™ AI Platform](https:\/\/www.digitalocean.com\/blog\/whats-new-on-gradient-ai-platform#week-of-march-2)\n\n[Now Available: OpenAI GPT-5.3 Codex on the Gradient™ AI Platform](https:\/\/www.digitalocean.com\/blog\/whats-new-on-gradient-ai-platform#week-of-february-23rd)\n\n[Now Available: Claude Sonnet 4.6 on the Gradient™ AI Platform](https:\/\/www.digitalocean.com\/blog\/whats-new-on-gradient-ai-platform#week-of-february-17th)\n\n[Heroku is shifting to sustaining engineering. Migrate your workloads to DigitalOcean](https:\/\/www.digitalocean.com\/blog\/migrate-heroku-to-digitalocean)\n\n[Now Available: Claude Opus 4.6 on Gradient™ AI Platform](https:\/\/www.digitalocean.com\/blog\/claude-opus-4-6-gradient-ai-platform)\n\n[🔥 Run OpenClaw on DigitalOcean App Platform](https:\/\/www.digitalocean.com\/blog\/openclaw-digitalocean-app-platform)\n\n[Join us for Deploy in San Francisco, on April 28, 2026. Register now](https:\/\/www.digitalocean.com\/deploy)\n\n- [Blog](https:\/\/www.digitalocean.com\/blog)\n- [Docs](https:\/\/docs.digitalocean.com\/products)\n- [Careers](https:\/\/www.digitalocean.com\/careers)\n- [Get Support](https:\/\/www.digitalocean.com\/support)\n- [Contact Sales](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=tophat)\n\n[DigitalOcean](https:\/\/www.digitalocean.com\/)\n\n- Products\n  - Featured Products\n    - [Droplets Scalable virtual machines](https:\/\/www.digitalocean.com\/products\/droplets)\n    - [Kubernetes Scale more effectively](https:\/\/www.digitalocean.com\/products\/kubernetes)\n    - [Gradient™ AI Inference Cloud Build and scale with AI](https:\/\/www.digitalocean.com\/products\/gradient)\n    - [Cloudways Managed cloud hosting](https:\/\/www.digitalocean.com\/products\/cloudways)\n    - [App Platform Get apps to market faster](https:\/\/www.digitalocean.com\/products\/app-platform)\n    - [Managed Databases Fully-managed database hosting](https:\/\/www.digitalocean.com\/products\/managed-databases)\n  \n  [See all products](https:\/\/www.digitalocean.com\/products)\n- Solutions\n  - - - [AI and Machine Learning](https:\/\/www.digitalocean.com\/products\/gradient)\n        \n        Develop, train, and deploy AI apps\n        - [GPUs](https:\/\/www.digitalocean.com\/products\/gradient\/gpu-droplets)\n        - [Platform](https:\/\/www.digitalocean.com\/products\/gradient\/platform)\n        - [1-Click Models](https:\/\/www.digitalocean.com\/products\/gradient\/1-click-models)\n        - [HR Knowledge Assistant](https:\/\/www.digitalocean.com\/solutions\/ai-hr-knowledge-assistant)\n        - [Code Copilot](https:\/\/www.digitalocean.com\/solutions\/ai-code-copilot)\n        - [Support Ticket Triage](https:\/\/www.digitalocean.com\/solutions\/ai-support-ticket-triage)\n        - [Recommendation Engine](https:\/\/www.digitalocean.com\/solutions\/ai-recommendation-engine)\n      - [Blockchain](https:\/\/www.digitalocean.com\/solutions\/blockchain)\n        \n        Infrastructure for decentralized apps\n      - [Blogs, Forums and Content Websites](https:\/\/www.digitalocean.com\/solutions\/content-hosting)\n        \n        Lightning-fast, reliable CMS hosting\n        - [Wordpress](https:\/\/www.digitalocean.com\/solutions\/wordpress-hosting)\n        - [Ghost](https:\/\/marketplace.digitalocean.com\/apps\/ghost)\n        - [Mastodon](https:\/\/marketplace.digitalocean.com\/apps\/mastodon)\n      - [Data Analytics](https:\/\/www.digitalocean.com\/solutions\/data-analytics)\n        \n        Real-time data processing at scale\n        - [Data Streaming](https:\/\/www.digitalocean.com\/solutions\/data-streaming-cloud)\n        - [AdTech & Martech](https:\/\/www.digitalocean.com\/solutions\/adtech-martech)\n        - [Kafka](https:\/\/www.digitalocean.com\/products\/managed-databases-kafka?utm_source=top-nav-data-analytics)\n    - - [Developer Tools](https:\/\/www.digitalocean.com\/solutions\/developer-tools)\n        \n        DevOps and CI\/CD solutions\n        - [CI\/CD](https:\/\/www.digitalocean.com\/solutions\/cicd-pipelines)\n        - [Prototyping](https:\/\/www.digitalocean.com\/solutions\/prototype-hosting)\n      - [Digital Marketing Agencies](https:\/\/www.digitalocean.com\/solutions\/digital-marketing-agencies)\n        \n        Power your clients’ websites and campaigns\n        - [Freelancer](https:\/\/www.digitalocean.com\/solutions\/freelancer-website-hosting)\n        - [IT Consulting](https:\/\/www.digitalocean.com\/solutions\/it-consulting)\n      - [Ecommerce](https:\/\/www.digitalocean.com\/solutions\/ecommerce-hosting)\n        \n        Build beautiful online storefronts\n        - [Dropshipping](https:\/\/www.digitalocean.com\/solutions\/dropshipping-hosting)\n        - [WooCommerce](https:\/\/marketplace.digitalocean.com\/apps\/wordpress-woocommerce)\n        - [Magento](https:\/\/marketplace.digitalocean.com\/apps\/magento-2-open-source)\n      - [Game Development](https:\/\/www.digitalocean.com\/solutions\/gaming-development)\n        \n        Low-latency multiplayer servers\n        - [Minecraft Hosting](https:\/\/marketplace.digitalocean.com\/apps\/minecraft-java-edition-server)\n    - - [IoT](https:\/\/www.digitalocean.com\/solutions\/iot-cloud)\n        \n        Connect to the power of the cloud\n        - [Kafka](https:\/\/www.digitalocean.com\/products\/managed-databases-kafka?utm_source=top-nav-iot)\n      - [ISVs](https:\/\/www.digitalocean.com\/solutions\/isv)\n        \n        Streamlined ISV application development\n      - [Secure Web Hosting](https:\/\/www.digitalocean.com\/solutions\/secure-web-hosting)\n        \n        Powerful protection from DDoS and more\n        - [Private VPN](https:\/\/www.digitalocean.com\/solutions\/vpn)\n      - [Startup Cloud Hosting](https:\/\/www.digitalocean.com\/solutions\/startups)\n        \n        Scalable, cost-effective infrastructure\n        - [Small Business](https:\/\/www.digitalocean.com\/solutions\/small-business-website-hosting)\n      - [Video Streaming](https:\/\/www.digitalocean.com\/solutions\/streaming)\n        \n        High-bandwidth, low-latency delivery\n        - [Kafka](https:\/\/www.digitalocean.com\/products\/managed-databases-kafka?utm_source=top-nav-video-streaming)\n    - - [Web and Mobile Apps](https:\/\/www.digitalocean.com\/solutions\/web-mobile-apps)\n        \n        Simple cross-platform app hosting\n        - [cPanel](https:\/\/www.digitalocean.com\/solutions\/cpanel-hosting)\n        - [Docker](https:\/\/www.digitalocean.com\/solutions\/docker-hosting)\n        - [Next.js](https:\/\/www.digitalocean.com\/solutions\/nextjs-hosting)\n        - [Node.js](https:\/\/www.digitalocean.com\/solutions\/nodejs-hosting)\n      - [Website Hosting](https:\/\/www.digitalocean.com\/solutions\/website-hosting)\n        \n        Fast page loads and reliable site uptime\n        - [VPS Hosting](https:\/\/www.digitalocean.com\/solutions\/vps-hosting)\n        - [Virtual Machines](https:\/\/www.digitalocean.com\/solutions\/virtual-machines)\n  \n  [See all solutions](https:\/\/www.digitalocean.com\/business)\n- Developers\n  - Our Community\n    - [Community Home DevOps and development guides](https:\/\/www.digitalocean.com\/community)\n    - [CSS-Tricks All things web design](https:\/\/css-tricks.com\/)\n    - [The Wave Content to level up your business.](https:\/\/www.digitalocean.com\/resources)\n- Partners\n  - DigitalOcean Partner Programs\n    - [Become a Partner](https:\/\/www.digitalocean.com\/partners\/pod)\n    - [Partner Services Program](https:\/\/www.digitalocean.com\/partners\/services)\n    - [DigitalOcean AI Partner Program](https:\/\/www.digitalocean.com\/partners\/ai-partner-program)\n    - [Marketplace](https:\/\/marketplace.digitalocean.com\/)\n    - [DigitalOcean Startups](https:\/\/www.digitalocean.com\/startups)\n    - [Connect with a Partner](https:\/\/www.digitalocean.com\/partners\/directory)\n- [Pricing](https:\/\/www.digitalocean.com\/pricing)\n\n- Log in\n  - [Community](https:\/\/www.digitalocean.com\/api\/dynamic-content\/v1\/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=login)\n  - [DigitalOcean](https:\/\/cloud.digitalocean.com\/login)\n- Sign up\n  - [Community](https:\/\/www.digitalocean.com\/api\/dynamic-content\/v1\/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register)\n  - [DigitalOcean](https:\/\/cloud.digitalocean.com\/registrations\/new)\n\n- [Blog](https:\/\/www.digitalocean.com\/blog)\n- [Docs](https:\/\/docs.digitalocean.com\/products)\n- [Careers](https:\/\/www.digitalocean.com\/careers)\n- [Get Support](https:\/\/www.digitalocean.com\/support)\n- [Contact Sales](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=tophat)\n\n- Log in\n  - [Community](https:\/\/www.digitalocean.com\/api\/dynamic-content\/v1\/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=login)\n  - [DigitalOcean](https:\/\/cloud.digitalocean.com\/login)\n- Sign up\n  - [Community](https:\/\/www.digitalocean.com\/api\/dynamic-content\/v1\/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register)\n  - [DigitalOcean](https:\/\/cloud.digitalocean.com\/registrations\/new)\n\n- [Tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n- [Questions](https:\/\/www.digitalocean.com\/community\/questions)\n- [Product Docs](https:\/\/docs.digitalocean.com\/)\n- Search Community\n\n## Report this\nWhat is the reason for this report?\n\nThis undefined is spam\n\nThis undefined is offensive\n\nThis undefined is off-topic\n\nThis undefined is other\n\nSubmit\n\n## Table of contents\n1. [Prerequisites](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#prerequisites)\n2. [How CSS Class Selectors Work](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#how-css-class-selectors-work)\n3. [Creating a CSS Class Using a Class Selector](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector)\n4. [Adding CSS Classes to Images](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#adding-css-classes-to-images)\n5. [Conclusion](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#conclusion)\n\n1. [Tutorial Series](https:\/\/www.digitalocean.com\/community\/tutorials?type=tutorial_series&subtype=tutorial_series)\n2. How To Build a Website With CSS\n\n[Tutorial](https:\/\/www.digitalocean.com\/community\/tutorials?subtype=tutorial)\n\n# How To Create Classes With CSS\nPublished on October 13, 2020\n\n[CSS](https:\/\/www.digitalocean.com\/community\/tags\/css)\n\n[Spin Up](https:\/\/www.digitalocean.com\/community\/tags\/spin-up)\n\n![Erin Glass](https:\/\/www.gravatar.com\/avatar\/a0f19b54dd93645bbb10a0e06719054c5f77c687d9066b70921e3f0aa644d08d?default=retro&size=256)\n\nBy [Erin Glass](https:\/\/www.digitalocean.com\/community\/users\/eglass)\n\nSenior Manager, DevEd\n\n![How To Create Classes With CSS](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=https%3A%2F%2Fcommunity-cdn-digitalocean-com.global.ssl.fastly.net%2FxP6vGmY7Cwr29DDyNUcucPgR&width=1920)\n\nTable of contents\n\nPopular topics\n\n### [Introduction](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#introduction)\nIn this tutorial, you will create a CSS *class* selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element.\n\n## [Prerequisites](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#prerequisites)\nTo follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series [How To Set Up You CSS and HTML Practice Project](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-your-css-and-html-practice-project).\n\n## [How CSS Class Selectors Work](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#how-css-class-selectors-work)\nA CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than *all* instances of a certain element. Unlike HTML elements (such as `<p>`, `<h1>` or `<img>`), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a `.`, which can help you distinguish between tag selectors and class selectors in CSS files.\n\nA CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the `.` prepended to the class name:\n\n```\n.red-text {\n  color: red;\n}\n```\nCopy\n\nTo use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class [attribute](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-html-attributes) in your HTML document like so:\n\n```\n<h1 class=\".red-text \">Content.<\/element>\n```\nCopy\n\n## [Creating a CSS Class Using a Class Selector](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector)\nLet’s begin exploring CSS classes in practice. Erase everything in your `styles.css` file and add the following code snippet to specify a rule for the class `red-text`:\n\nstyles.css\n\n```\n.red-text {\n  color: red;\n}\n```\nCopy\n\nAfter adding the code snippet to your `styles.css` file, save the file.\n\nReturn to your `index.html` and erase everything but the first line of code `<link rel=\"stylesheet\" href=\"css\/styles.css\">` that links to your CSS stylesheet. Then add the following HTML code snippet:\n\nindex.html\n\n```\n<p class=\"red-text \">Here is the first sample of paragraph text.<\/p>\n```\nCopy\n\nNote that the class name is not prepended here with a `.` as it is when being used as a selector for a CSS rule. Your entire `index.html` file should have the following contents:\n\nindex.html\n\n```\n. . .\n<link rel=\"stylesheet\" href=\"css\/styles.css\">\n<p class=\"red-text\" Here is the first sample of paragraph text.<\/p>\n```\nCopy\n\nIn this code snippet you have added text using the HTML `<p>` tag. But you have also specified the `red-text` class by adding the highlighted class [attribute](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-html-attributes) `class=\"red-text\"` *inside* the opening HTML tag.\n\nSave your `index.html` file and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step [How To View An Offline HTML File In Your Browser](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser)).\n\nYou should receive a webpage with red text:\n\n![Webpage output with red paragraph text](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/red-text.png)\n\nLet’s add an additional CSS class to explore styling different pieces of `<p>` text content with different classes. Add the following code snippet to your `styles.css` file (after your CSS rule for “red-text”):\n\nstyles.css\n\n```\n.yellow-background-text {\n  background-color: yellow;\n}\n```\nCopy\n\nThis CSS rule declares that the class `yellow-background-text` is assigned the `yellow` value for the `background-color` property. Any HTML text element assigned this class will have a yellow background. Note that the use of the word `text`in the class `yellow-background-*text*` is for human readability purposes only. You do not need to include the word `text` in your class names for classes assigned to HTML text.\n\nTo apply this new CSS class, return to your `index.html` file and add the following line of code to the bottom:\n\nindex.html\n\n```\n<p class=\"yellow-background-text\"> Here is the second sample of paragraph text.<p>\n```\nCopy\n\nIn this code snippet, you have added some text content with the `<p>` element and specified the `yellow-background-text` class. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background:\n\n![Webpage with text styled by two classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/two-classes.png)\n\nNote that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your `index.html` file:\n\nindex.html\n\n```\n<p class=\"red-text yellow-background-text\">Here is a third sample of text.<\/p>\n```\nCopy\n\nNote that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this:\n\n![IWebpage with text styled by three classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/three-classes.png)\n\nYour third line of text should now be styled according to the property values set in the `red-text` class and the `yellow-background-text` class and have a red font and yellow background.\n\n## [Adding CSS Classes to Images](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#adding-css-classes-to-images)\nCSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your `styles.css` file and add the following code snippet:\n\nstyles.css\n\n```\n.black-img {\n  border: 5px dotted black;\n  border-radius: 10%;\n}\n\n.yellow-img {\n  border: 25px solid yellow;\n  border-radius: 50%;\n}\n\n.red-img {\n  border: 15px double red;\n}\n```\nCopy\n\nHere you have created CSS rules for three different classes that can be applied to the HTML `<img>` tag. Before you move on, let’s briefly study what we’ve declared in each ruleset:\n\n- The first CSS rule declares that the class `black-img` should have a `black`, `dotted` border five pixels wide and a `border-radius` sized at 10%, which gives the element rounded corners.\n- The second CSS rule declares that the class `yellow-img` should have a `yellow`, `solid` border 25 pixels wide and a `border-radius` sized at 50%, which gives the element a circular shape.\n- The third CSS rule declares that the class `red-img` should have a `red`, `double` border 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape.\n\nSave the `styles.css` file. Then erase everything from your `index.html` file (except for the first line of code: `<link rel=\"stylesheet\" href=\"css\/styles.css\">`) and add the following code snippet:\n\nindex.html\n\n```\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"black-img\">\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"yellow-img\">\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"red-img\">\n```\nCopy\n\nEach of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the `styles.css` file. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial [How To Add Images To Your Webpage With HTML](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-add-images-to-your-webpage-using-html).\n\nSave your `index.html` file and load it in the browser. You should receive something like this:\n\n![Webpage with images styled with three classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/image-classes.png)\n\nYour webpage should now display three images, each styled with the different specifications of their assigned class.\n\nTo continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a `font-color` declaration will not change the color of an image border. Likewise, a `height` declaration will not change the size of the font.\n\n## [Conclusion](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#conclusion)\nYou have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the [second half of this tutorial series](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-your-css-and-html-website-project).\n\nIn the next tutorial, you will create CSS *ID* selectors, which work similarly as class selectors with the exception of some unique features.\n\nThanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.\n\n[Learn more about our products](https:\/\/www.digitalocean.com\/products \"Learn more about our products\")\n\n### Tutorial Series: How To Build a Website With CSS\nThis tutorial is part of a series on creating and customizing [this website](http:\/\/css.sammy-codes.com\/) with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.\n\nBefore proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series [How To Build a Website With HTML](https:\/\/www.digitalocean.com\/community\/tutorial_series\/how-to-build-a-website-with-html) before starting this series.\n\n[CSS](https:\/\/www.digitalocean.com\/community\/tags\/css)\n\n[Spin Up](https:\/\/www.digitalocean.com\/community\/tags\/spin-up)\n\n[Visit series page](https:\/\/www.digitalocean.com\/community\/tutorial-series\/how-to-build-a-website-with-css)\n\nBrowse Series: 20 tutorials\n\n- 1\/20 - [A Brief Introduction To CSS](https:\/\/www.digitalocean.com\/community\/tutorials\/a-brief-introduction-to-css)\n- 2\/20 - [How To Set Up Your CSS and HTML Practice Project With a Code Editor](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-your-css-and-html-practice-project-with-a-code-editor)\n- 3\/20 - [How To Understand and Create CSS Rules](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-understand-and-create-css-rules)\n\nExpand to view all\n\n### About the author\n![Erin Glass](https:\/\/www.gravatar.com\/avatar\/a0f19b54dd93645bbb10a0e06719054c5f77c687d9066b70921e3f0aa644d08d?default=retro&size=256)\n\nErin Glass\n\nAuthor\n\nSenior Manager, DevEd\n\n[See author profile](https:\/\/www.digitalocean.com\/community\/users\/eglass)\n\nOpen source advocate and lover of education, culture, and community.\n\n[See author profile](https:\/\/www.digitalocean.com\/community\/users\/eglass)\n\nCategory:\n\n[Tutorial](https:\/\/www.digitalocean.com\/community\/tutorials?subtype=tutorial)\n\nTags:\n\n[CSS](https:\/\/www.digitalocean.com\/community\/tags\/css)\n\n[Spin Up](https:\/\/www.digitalocean.com\/community\/tags\/spin-up)\n\n#### Still looking for an answer?\n[Ask a question](https:\/\/www.digitalocean.com\/community\/questions)[Search for more help](https:\/\/www.digitalocean.com\/community)\n\nWas this helpful?\n\nYes\n\nNo\n\nComments(0)\n\nFollow-up questions(0)\n\nThis textbox defaults to using Markdown to format your answer.\n\nYou can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link\\!\n\n[Sign in\/up to comment](https:\/\/www.digitalocean.com\/api\/dynamic-content\/v1\/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register)\n\n[![Creative Commons](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fcreativecommons.c0a877f1.png&width=384)](https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/)This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.\n\n## Deploy on DigitalOcean\nClick below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.\n\n[Sign up](https:\/\/cloud.digitalocean.com\/registrations\/new?refcode=f6fcd01aaffb)\n\n## Popular Topics\n1. [AI\/ML](https:\/\/www.digitalocean.com\/community\/tags\/ai-ml)\n2. [Ubuntu](https:\/\/www.digitalocean.com\/community\/tags\/ubuntu)\n3. [Linux Basics](https:\/\/www.digitalocean.com\/community\/tags\/linux-basics)\n4. [JavaScript](https:\/\/www.digitalocean.com\/community\/tags\/javascript)\n5. [Python](https:\/\/www.digitalocean.com\/community\/tags\/python)\n6. [MySQL](https:\/\/www.digitalocean.com\/community\/tags\/mysql)\n7. [Docker](https:\/\/www.digitalocean.com\/community\/tags\/docker)\n8. [Kubernetes](https:\/\/www.digitalocean.com\/community\/tags\/kubernetes)\n9. [All tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n10. [Talk to an expert](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=tutorials)\n\n### Connect on Discord\nJoin the conversation in our Discord to connect with fellow developers\n\n[Visit Discord](https:\/\/discord.gg\/digitalocean)\n\n## Featured tutorials\n1. [SOLID Design Principles Explained: Building Better Software Architecture](https:\/\/www.digitalocean.com\/community\/tutorials\/s-o-l-i-d-the-first-five-principles-of-object-oriented-design)\n2. [How To Remove Docker Images, Containers, and Volumes](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-remove-docker-images-containers-and-volumes)\n3. [How to Create a MySQL User and Grant Privileges (Step-by-Step)](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-a-new-user-and-grant-permissions-in-mysql)\n\n- [All tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n- [All topic tags](https:\/\/www.digitalocean.com\/community\/tags)\n##### Join the Tech Talk\n- [Prerequisites](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#prerequisites)\n- [How CSS Class Selectors Work](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#how-css-class-selectors-work)\n- [Creating a CSS Class Using a Class Selector](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector)\n- [Adding CSS Classes to Images](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#adding-css-classes-to-images)\n- [Conclusion](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#conclusion)\n\n- ## Deploy on DigitalOcean\n  Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.\n  \n  [Sign up](https:\/\/cloud.digitalocean.com\/registrations\/new?refcode=f6fcd01aaffb)\n  \n  ## Popular Topics\n  1. [AI\/ML](https:\/\/www.digitalocean.com\/community\/tags\/ai-ml)\n  2. [Ubuntu](https:\/\/www.digitalocean.com\/community\/tags\/ubuntu)\n  3. [Linux Basics](https:\/\/www.digitalocean.com\/community\/tags\/linux-basics)\n  4. [JavaScript](https:\/\/www.digitalocean.com\/community\/tags\/javascript)\n  5. [Python](https:\/\/www.digitalocean.com\/community\/tags\/python)\n  6. [MySQL](https:\/\/www.digitalocean.com\/community\/tags\/mysql)\n  7. [Docker](https:\/\/www.digitalocean.com\/community\/tags\/docker)\n  8. [Kubernetes](https:\/\/www.digitalocean.com\/community\/tags\/kubernetes)\n  9. [All tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n  10. [Talk to an expert](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=tutorials)\n  \n  ### Connect on Discord\n  Join the conversation in our Discord to connect with fellow developers\n  \n  [Visit Discord](https:\/\/discord.gg\/digitalocean)\n  \n  ## Featured tutorials\n  1. [SOLID Design Principles Explained: Building Better Software Architecture](https:\/\/www.digitalocean.com\/community\/tutorials\/s-o-l-i-d-the-first-five-principles-of-object-oriented-design)\n  2. [How To Remove Docker Images, Containers, and Volumes](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-remove-docker-images-containers-and-volumes)\n  3. [How to Create a MySQL User and Grant Privileges (Step-by-Step)](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-a-new-user-and-grant-permissions-in-mysql)\n  \n  - [All tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n  - [All topic tags](https:\/\/www.digitalocean.com\/community\/tags)\n\n![](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Ftutorials-2-tulip.764b9f59.svg&width=1920)\n\n## Become a contributor for community\nGet paid to write technical tutorials and select a tech-focused charity to receive a matching donation.\n\n[Sign Up](https:\/\/www.digitalocean.com\/community\/pages\/write-for-digitalocean)\n\n![](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fdocs-2-kiwi.239a03ef.svg&width=1920)\n\n## DigitalOcean Documentation\nFull documentation for every DigitalOcean product.\n\n[Learn more](https:\/\/docs.digitalocean.com\/)\n\n![](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fblogs-1-lavender.495d1f00.svg&width=1920)\n\n## Resources for startups and AI-native businesses\nThe Wave has everything you need to know about building a business, from raising funding to marketing your product.\n\n[Learn more](https:\/\/www.digitalocean.com\/resources)\n\n## Get our newsletter\nStay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.\n\nNew accounts only. By submitting your email you agree to our [Privacy Policy](https:\/\/www.digitalocean.com\/legal\/privacy-policy)\n\n## The developer cloud\nScale up as you grow — whether you're running one virtual machine or ten thousand.\n\n[View all products](https:\/\/www.digitalocean.com\/products)\n\n![](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fclouds-mobile.5d14bead.svg&width=3840)\n\n## Get started for free\nSign up and get \\$200 in credit for your first 60 days with DigitalOcean.\\*\n\n[Get started](https:\/\/cloud.digitalocean.com\/registrations\/new?refcode=f6fcd01aaffb)\n\n![](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fwaves-mobile.a054c63e.svg&width=3840)\n\n\\*This promotional offer applies to new accounts only.\n\n## Company\n- [About](https:\/\/www.digitalocean.com\/about)\n- [Leadership](https:\/\/www.digitalocean.com\/leadership\/executive-management)\n- [Blog](https:\/\/www.digitalocean.com\/blog)\n- [Careers](https:\/\/www.digitalocean.com\/careers)\n- [Customers](https:\/\/www.digitalocean.com\/customers)\n- [Partners](https:\/\/www.digitalocean.com\/partners)\n- [Referral Program](https:\/\/www.digitalocean.com\/referral-program)\n- [Affiliate Program](https:\/\/www.digitalocean.com\/affiliates)\n- [Press](https:\/\/www.digitalocean.com\/press)\n- [Legal](https:\/\/www.digitalocean.com\/legal)\n- [Privacy Policy](https:\/\/www.digitalocean.com\/legal\/privacy-policy)\n- [Security](https:\/\/www.digitalocean.com\/security)\n- [Investor Relations](https:\/\/investors.digitalocean.com\/)\n\n## Products\n- [Overview](https:\/\/www.digitalocean.com\/products)\n- [Droplets](https:\/\/www.digitalocean.com\/products\/droplets)\n- [Kubernetes](https:\/\/www.digitalocean.com\/products\/kubernetes)\n- [Functions](https:\/\/www.digitalocean.com\/products\/functions)\n- [App Platform](https:\/\/www.digitalocean.com\/products\/app-platform)\n- [Gradient™ AI GPU Droplets](https:\/\/www.digitalocean.com\/products\/gradient\/gpu-droplets)\n- [Gradient™ AI Bare Metal GPUs](https:\/\/www.digitalocean.com\/products\/gradient\/bare-metal-gpus)\n- [Gradient™ AI 1-Click Models](https:\/\/www.digitalocean.com\/products\/gradient\/1-click-models)\n- [Gradient™ AI Platform](https:\/\/www.digitalocean.com\/products\/gradient\/platform)\n- [Load Balancers](https:\/\/www.digitalocean.com\/products\/load-balancers)\n- [Managed Databases](https:\/\/www.digitalocean.com\/products\/managed-databases)\n- [Spaces](https:\/\/www.digitalocean.com\/products\/spaces)\n- [Block Storage](https:\/\/www.digitalocean.com\/products\/block-storage)\n- [Network File Storage](https:\/\/www.digitalocean.com\/products\/storage\/network-file-storage)\n- [API](https:\/\/docs.digitalocean.com\/reference\/api)\n- [Uptime](https:\/\/www.digitalocean.com\/products\/uptime-monitoring)\n- [Identity and Access Management](https:\/\/www.digitalocean.com\/products\/identity-access-management)\n- [Cloudways](https:\/\/www.digitalocean.com\/products\/cloudways)\n\n## Resources\n- [Community Tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n- [Community Q\\&A](https:\/\/www.digitalocean.com\/community\/questions)\n- [CSS-Tricks](https:\/\/css-tricks.com\/)\n- [Write for DOnations](https:\/\/www.digitalocean.com\/community\/pages\/write-for-digitalocean)\n- [Currents Research](https:\/\/www.digitalocean.com\/currents)\n- [DigitalOcean Startups](https:\/\/www.digitalocean.com\/startups)\n- [Wavemakers Program](https:\/\/www.digitalocean.com\/wavemakers)\n- [Compass Council](https:\/\/www.digitalocean.com\/research)\n- [Open Source](https:\/\/www.digitalocean.com\/open-source)\n- [Newsletter Signup](https:\/\/www.digitalocean.com\/community#iaan)\n- [Marketplace](https:\/\/www.digitalocean.com\/products\/marketplace)\n- [Pricing](https:\/\/www.digitalocean.com\/pricing)\n- [Pricing Calculator](https:\/\/www.digitalocean.com\/pricing\/calculator)\n- [Documentation](https:\/\/docs.digitalocean.com\/)\n- [Release Notes](https:\/\/docs.digitalocean.com\/release-notes)\n- [Code of Conduct](https:\/\/www.digitalocean.com\/community\/pages\/code-of-conduct)\n- [Shop Swag](http:\/\/store.digitalocean.com\/)\n\n## Solutions\n- [Website Hosting](https:\/\/www.digitalocean.com\/solutions\/website-hosting)\n- [VPS Hosting](https:\/\/www.digitalocean.com\/solutions\/vps-hosting)\n- [Web & Mobile Apps](https:\/\/www.digitalocean.com\/solutions\/web-mobile-apps)\n- [Game Development](https:\/\/www.digitalocean.com\/solutions\/gaming-development)\n- [Streaming](https:\/\/www.digitalocean.com\/solutions\/streaming)\n- [VPN](https:\/\/www.digitalocean.com\/solutions\/vpn)\n- [SaaS Platforms](https:\/\/www.digitalocean.com\/solutions\/saas)\n- [Cloud Hosting for Blockchain](https:\/\/www.digitalocean.com\/solutions\/blockchain)\n- [Startup Resources](https:\/\/www.digitalocean.com\/resources)\n- [Migration Assistance](https:\/\/www.digitalocean.com\/migrate)\n\n## Contact\n- [Support](https:\/\/www.digitalocean.com\/support)\n- [Sales](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=footer)\n- [Report Abuse](https:\/\/www.digitalocean.com\/company\/contact\/abuse)\n- [System Status](https:\/\/status.digitalocean.com\/)\n- [Share your ideas](https:\/\/ideas.digitalocean.com\/)\n\n## Company\n- [About](https:\/\/www.digitalocean.com\/about)\n- [Leadership](https:\/\/www.digitalocean.com\/leadership\/executive-management)\n- [Blog](https:\/\/www.digitalocean.com\/blog)\n- [Careers](https:\/\/www.digitalocean.com\/careers)\n- [Customers](https:\/\/www.digitalocean.com\/customers)\n- [Partners](https:\/\/www.digitalocean.com\/partners)\n- [Referral Program](https:\/\/www.digitalocean.com\/referral-program)\n- [Affiliate Program](https:\/\/www.digitalocean.com\/affiliates)\n- [Press](https:\/\/www.digitalocean.com\/press)\n- [Legal](https:\/\/www.digitalocean.com\/legal)\n- [Privacy Policy](https:\/\/www.digitalocean.com\/legal\/privacy-policy)\n- [Security](https:\/\/www.digitalocean.com\/security)\n- [Investor Relations](https:\/\/investors.digitalocean.com\/)\n\n## Products\n- [Overview](https:\/\/www.digitalocean.com\/products)\n- [Droplets](https:\/\/www.digitalocean.com\/products\/droplets)\n- [Kubernetes](https:\/\/www.digitalocean.com\/products\/kubernetes)\n- [Functions](https:\/\/www.digitalocean.com\/products\/functions)\n- [App Platform](https:\/\/www.digitalocean.com\/products\/app-platform)\n- [Gradient™ AI GPU Droplets](https:\/\/www.digitalocean.com\/products\/gradient\/gpu-droplets)\n- [Gradient™ AI Bare Metal GPUs](https:\/\/www.digitalocean.com\/products\/gradient\/bare-metal-gpus)\n- [Gradient™ AI 1-Click Models](https:\/\/www.digitalocean.com\/products\/gradient\/1-click-models)\n- [Gradient™ AI Platform](https:\/\/www.digitalocean.com\/products\/gradient\/platform)\n- [Load Balancers](https:\/\/www.digitalocean.com\/products\/load-balancers)\n- [Managed Databases](https:\/\/www.digitalocean.com\/products\/managed-databases)\n- [Spaces](https:\/\/www.digitalocean.com\/products\/spaces)\n- [Block Storage](https:\/\/www.digitalocean.com\/products\/block-storage)\n- [Network File Storage](https:\/\/www.digitalocean.com\/products\/storage\/network-file-storage)\n- [API](https:\/\/docs.digitalocean.com\/reference\/api)\n- [Uptime](https:\/\/www.digitalocean.com\/products\/uptime-monitoring)\n- [Identity and Access Management](https:\/\/www.digitalocean.com\/products\/identity-access-management)\n- [Cloudways](https:\/\/www.digitalocean.com\/products\/cloudways)\n\n## Resources\n- [Community Tutorials](https:\/\/www.digitalocean.com\/community\/tutorials)\n- [Community Q\\&A](https:\/\/www.digitalocean.com\/community\/questions)\n- [CSS-Tricks](https:\/\/css-tricks.com\/)\n- [Write for DOnations](https:\/\/www.digitalocean.com\/community\/pages\/write-for-digitalocean)\n- [Currents Research](https:\/\/www.digitalocean.com\/currents)\n- [DigitalOcean Startups](https:\/\/www.digitalocean.com\/startups)\n- [Wavemakers Program](https:\/\/www.digitalocean.com\/wavemakers)\n- [Compass Council](https:\/\/www.digitalocean.com\/research)\n- [Open Source](https:\/\/www.digitalocean.com\/open-source)\n- [Newsletter Signup](https:\/\/www.digitalocean.com\/community#iaan)\n- [Marketplace](https:\/\/www.digitalocean.com\/products\/marketplace)\n- [Pricing](https:\/\/www.digitalocean.com\/pricing)\n- [Pricing Calculator](https:\/\/www.digitalocean.com\/pricing\/calculator)\n- [Documentation](https:\/\/docs.digitalocean.com\/)\n- [Release Notes](https:\/\/docs.digitalocean.com\/release-notes)\n- [Code of Conduct](https:\/\/www.digitalocean.com\/community\/pages\/code-of-conduct)\n- [Shop Swag](http:\/\/store.digitalocean.com\/)\n\n## Solutions\n- [Website Hosting](https:\/\/www.digitalocean.com\/solutions\/website-hosting)\n- [VPS Hosting](https:\/\/www.digitalocean.com\/solutions\/vps-hosting)\n- [Web & Mobile Apps](https:\/\/www.digitalocean.com\/solutions\/web-mobile-apps)\n- [Game Development](https:\/\/www.digitalocean.com\/solutions\/gaming-development)\n- [Streaming](https:\/\/www.digitalocean.com\/solutions\/streaming)\n- [VPN](https:\/\/www.digitalocean.com\/solutions\/vpn)\n- [SaaS Platforms](https:\/\/www.digitalocean.com\/solutions\/saas)\n- [Cloud Hosting for Blockchain](https:\/\/www.digitalocean.com\/solutions\/blockchain)\n- [Startup Resources](https:\/\/www.digitalocean.com\/resources)\n- [Migration Assistance](https:\/\/www.digitalocean.com\/migrate)\n\n## Contact\n- [Support](https:\/\/www.digitalocean.com\/support)\n- [Sales](https:\/\/www.digitalocean.com\/company\/contact\/sales?referrer=footer)\n- [Report Abuse](https:\/\/www.digitalocean.com\/company\/contact\/abuse)\n- [System Status](https:\/\/status.digitalocean.com\/)\n- [Share your ideas](https:\/\/ideas.digitalocean.com\/)\n\n© 2026 DigitalOcean, LLC.[Sitemap](https:\/\/www.digitalocean.com\/sitemap).[Cookie Preferences]()\n\nThis site uses cookies and related technologies, as described in our [privacy policy](https:\/\/www.digitalocean.com\/legal\/privacy-policy\/), for purposes that may include site operation, analytics, enhanced user experience, or advertising. You may choose to consent to our use of these technologies, or manage your own preferences. Please visit our [cookie policy](https:\/\/www.digitalocean.com\/legal\/cookie-policy) for more information.\n\nAgree & Proceed\n\nDecline All\n\nManage Choices\n\nLoading...\n\n## Community\n## Product Docs\n## Marketplace\n## DigitalOcean Blog\n\nnavigate\n\ngo\n\nexit","attrs_readable_markdown":"### [Introduction](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#introduction)\nIn this tutorial, you will create a CSS *class* selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element.\n\n## [Prerequisites](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#prerequisites)\nTo follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series [How To Set Up You CSS and HTML Practice Project](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-your-css-and-html-practice-project).\n\n## [How CSS Class Selectors Work](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#how-css-class-selectors-work)\nA CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than *all* instances of a certain element. Unlike HTML elements (such as `<p>`, `<h1>` or `<img>`), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a `.`, which can help you distinguish between tag selectors and class selectors in CSS files.\n\nA CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the `.` prepended to the class name:\n```\n.red-text {\n  color: red;\n}\n```\nTo use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class [attribute](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-html-attributes) in your HTML document like so:\n```\n<h1 class=\".red-text \">Content.<\/element>\n```\n\n## [Creating a CSS Class Using a Class Selector](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector)\nLet’s begin exploring CSS classes in practice. Erase everything in your `styles.css` file and add the following code snippet to specify a rule for the class `red-text`:\n\nstyles.css\n```\n.red-text {\n  color: red;\n}\n```\nAfter adding the code snippet to your `styles.css` file, save the file.\n\nReturn to your `index.html` and erase everything but the first line of code `<link rel=\"stylesheet\" href=\"css\/styles.css\">` that links to your CSS stylesheet. Then add the following HTML code snippet:\n\nindex.html\n```\n<p class=\"red-text \">Here is the first sample of paragraph text.<\/p>\n```\nNote that the class name is not prepended here with a `.` as it is when being used as a selector for a CSS rule. Your entire `index.html` file should have the following contents:\n\nindex.html\n```\n. . .\n<link rel=\"stylesheet\" href=\"css\/styles.css\">\n<p class=\"red-text\" Here is the first sample of paragraph text.<\/p>\n```\nIn this code snippet you have added text using the HTML `<p>` tag. But you have also specified the `red-text` class by adding the highlighted class [attribute](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-html-attributes) `class=\"red-text\"` *inside* the opening HTML tag.\n\nSave your `index.html` file and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step [How To View An Offline HTML File In Your Browser](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser)).\n\nYou should receive a webpage with red text:\n\n![Webpage output with red paragraph text](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/red-text.png)\n\nLet’s add an additional CSS class to explore styling different pieces of `<p>` text content with different classes. Add the following code snippet to your `styles.css` file (after your CSS rule for “red-text”):\n\nstyles.css\n```\n.yellow-background-text {\n  background-color: yellow;\n}\n```\nThis CSS rule declares that the class `yellow-background-text` is assigned the `yellow` value for the `background-color` property. Any HTML text element assigned this class will have a yellow background. Note that the use of the word `text`in the class `yellow-background-*text*` is for human readability purposes only. You do not need to include the word `text` in your class names for classes assigned to HTML text.\n\nTo apply this new CSS class, return to your `index.html` file and add the following line of code to the bottom:\n\nindex.html\n```\n<p class=\"yellow-background-text\"> Here is the second sample of paragraph text.<p>\n```\nIn this code snippet, you have added some text content with the `<p>` element and specified the `yellow-background-text` class. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background:\n\n![Webpage with text styled by two classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/two-classes.png)\n\nNote that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your `index.html` file:\n\nindex.html\n```\n<p class=\"red-text yellow-background-text\">Here is a third sample of text.<\/p>\n```\nNote that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this:\n\n![IWebpage with text styled by three classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/three-classes.png)\n\nYour third line of text should now be styled according to the property values set in the `red-text` class and the `yellow-background-text` class and have a red font and yellow background.\n\n## [Adding CSS Classes to Images](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#adding-css-classes-to-images)\nCSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your `styles.css` file and add the following code snippet:\n\nstyles.css\n```\n.black-img {\n  border: 5px dotted black;\n  border-radius: 10%;\n}\n\n.yellow-img {\n  border: 25px solid yellow;\n  border-radius: 50%;\n}\n\n.red-img {\n  border: 15px double red;\n}\n```\nHere you have created CSS rules for three different classes that can be applied to the HTML `<img>` tag. Before you move on, let’s briefly study what we’ve declared in each ruleset:\n\n- The first CSS rule declares that the class `black-img` should have a `black`, `dotted` border five pixels wide and a `border-radius` sized at 10%, which gives the element rounded corners.\n- The second CSS rule declares that the class `yellow-img` should have a `yellow`, `solid` border 25 pixels wide and a `border-radius` sized at 50%, which gives the element a circular shape.\n- The third CSS rule declares that the class `red-img` should have a `red`, `double` border 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape.\n\nSave the `styles.css` file. Then erase everything from your `index.html` file (except for the first line of code: `<link rel=\"stylesheet\" href=\"css\/styles.css\">`) and add the following code snippet:\n\nindex.html\n```\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"black-img\">\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"yellow-img\">\n<img src=\"https:\/\/css.sammy-codes.com\/images\/small-profile.jpeg\" class=\"red-img\">\n```\nEach of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the `styles.css` file. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial [How To Add Images To Your Webpage With HTML](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-add-images-to-your-webpage-using-html).\n\nSave your `index.html` file and load it in the browser. You should receive something like this:\n\n![Webpage with images styled with three classes](https:\/\/assets.digitalocean.com\/articles\/how-to-build-a-website-with-css\/image-classes.png)\n\nYour webpage should now display three images, each styled with the different specifications of their assigned class.\n\nTo continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a `font-color` declaration will not change the color of an image border. Likewise, a `height` declaration will not change the size of the font.\n\n## [Conclusion](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-classes-with-css#conclusion)\nYou have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the [second half of this tutorial series](https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-your-css-and-html-website-project).\n\nIn the next tutorial, you will create CSS *ID* selectors, which work similarly as class selectors with the exception of some unique features.\n\nWas this helpful?\n\n[![Creative Commons](https:\/\/www.digitalocean.com\/api\/static-content\/v1\/images?src=%2F_next%2Fstatic%2Fmedia%2Fcreativecommons.c0a877f1.png&width=384)](https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/)This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

15 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.5 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css
Last Crawled	2026-03-23 07:16:30 (15 days ago)
First Indexed	2020-10-13 15:38:14 (5 years ago)
HTTP Status Code	200
Meta Title	How To Create Classes With CSS \| DigitalOcean
Meta Description	In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class …
Meta Canonical	null
Boilerpipe Text	Introduction In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element. Prerequisites To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project . How CSS Class Selectors Work A CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as <p> , <h1> or <img> ), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a . , which can help you distinguish between tag selectors and class selectors in CSS files. A CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the . prepended to the class name: .red-text { color : red ; } To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class attribute in your HTML document like so: < h1 class = " .red-text " > Content. </ element > Creating a CSS Class Using a Class Selector Let’s begin exploring CSS classes in practice. Erase everything in your styles.css file and add the following code snippet to specify a rule for the class red-text : styles.css .red-text { color : red ; } After adding the code snippet to your styles.css file, save the file. Return to your index.html and erase everything but the first line of code <link rel="stylesheet" href="css/styles.css"> that links to your CSS stylesheet. Then add the following HTML code snippet: index.html < p class = " red-text " > Here is the first sample of paragraph text. </ p > Note that the class name is not prepended here with a . as it is when being used as a selector for a CSS rule. Your entire index.html file should have the following contents: index.html . . . < link rel = " stylesheet " href = " css/styles.css " > <p class="red-text" Here is the first sample of paragraph text. </ p > In this code snippet you have added text using the HTML <p> tag. But you have also specified the red-text class by adding the highlighted class attribute class="red-text" inside the opening HTML tag. Save your index.html file and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser ). You should receive a webpage with red text: Let’s add an additional CSS class to explore styling different pieces of <p> text content with different classes. Add the following code snippet to your styles.css file (after your CSS rule for “red-text”): styles.css .yellow-background-text { background-color : yellow ; } This CSS rule declares that the class yellow-background-text is assigned the yellow value for the background-color property. Any HTML text element assigned this class will have a yellow background. Note that the use of the word text in the class yellow-background-text is for human readability purposes only. You do not need to include the word text in your class names for classes assigned to HTML text. To apply this new CSS class, return to your index.html file and add the following line of code to the bottom: index.html < p class = " yellow-background-text " > Here is the second sample of paragraph text. < p > In this code snippet, you have added some text content with the <p> element and specified the yellow-background-text class. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background: Note that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your index.html file: index.html < p class = " red-text yellow-background-text " > Here is a third sample of text. </ p > Note that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this: Your third line of text should now be styled according to the property values set in the red-text class and the yellow-background-text class and have a red font and yellow background. Adding CSS Classes to Images CSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your styles.css file and add the following code snippet: styles.css .black-img { border : 5px dotted black ; border-radius : 10% ; } .yellow-img { border : 25px solid yellow ; border-radius : 50% ; } .red-img { border : 15px double red ; } Here you have created CSS rules for three different classes that can be applied to the HTML <img> tag. Before you move on, let’s briefly study what we’ve declared in each ruleset: The first CSS rule declares that the class black-img should have a black , dotted border five pixels wide and a border-radius sized at 10%, which gives the element rounded corners. The second CSS rule declares that the class yellow-img should have a yellow , solid border 25 pixels wide and a border-radius sized at 50%, which gives the element a circular shape. The third CSS rule declares that the class red-img should have a red , double border 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape. Save the styles.css file. Then erase everything from your index.html file (except for the first line of code: <link rel="stylesheet" href="css/styles.css"> ) and add the following code snippet: index.html < img src = " https://css.sammy-codes.com/images/small-profile.jpeg " class = " black-img " > < img src = " https://css.sammy-codes.com/images/small-profile.jpeg " class = " yellow-img " > < img src = " https://css.sammy-codes.com/images/small-profile.jpeg " class = " red-img " > Each of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the styles.css file. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial How To Add Images To Your Webpage With HTML . Save your index.html file and load it in the browser. You should receive something like this: Your webpage should now display three images, each styled with the different specifications of their assigned class. To continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a font-color declaration will not change the color of an image border. Likewise, a height declaration will not change the size of the font. Conclusion You have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the second half of this tutorial series . In the next tutorial, you will create CSS ID selectors, which work similarly as class selectors with the exception of some unique features. Was this helpful? This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Markdown	[Now Available: OpenAI GPT-5.4 on the Gradient™ AI Platform](https://www.digitalocean.com/blog/whats-new-on-gradient-ai-platform#week-of-march-2) [Now Available: OpenAI GPT-5.3 Codex on the Gradient™ AI Platform](https://www.digitalocean.com/blog/whats-new-on-gradient-ai-platform#week-of-february-23rd) [Now Available: Claude Sonnet 4.6 on the Gradient™ AI Platform](https://www.digitalocean.com/blog/whats-new-on-gradient-ai-platform#week-of-february-17th) [Heroku is shifting to sustaining engineering. Migrate your workloads to DigitalOcean](https://www.digitalocean.com/blog/migrate-heroku-to-digitalocean) [Now Available: Claude Opus 4.6 on Gradient™ AI Platform](https://www.digitalocean.com/blog/claude-opus-4-6-gradient-ai-platform) [🔥 Run OpenClaw on DigitalOcean App Platform](https://www.digitalocean.com/blog/openclaw-digitalocean-app-platform) [Join us for Deploy in San Francisco, on April 28, 2026. Register now](https://www.digitalocean.com/deploy) - [Blog](https://www.digitalocean.com/blog) - [Docs](https://docs.digitalocean.com/products) - [Careers](https://www.digitalocean.com/careers) - [Get Support](https://www.digitalocean.com/support) - [Contact Sales](https://www.digitalocean.com/company/contact/sales?referrer=tophat) [DigitalOcean](https://www.digitalocean.com/) - Products - Featured Products - [Droplets Scalable virtual machines](https://www.digitalocean.com/products/droplets) - [Kubernetes Scale more effectively](https://www.digitalocean.com/products/kubernetes) - [Gradient™ AI Inference Cloud Build and scale with AI](https://www.digitalocean.com/products/gradient) - [Cloudways Managed cloud hosting](https://www.digitalocean.com/products/cloudways) - [App Platform Get apps to market faster](https://www.digitalocean.com/products/app-platform) - [Managed Databases Fully-managed database hosting](https://www.digitalocean.com/products/managed-databases) [See all products](https://www.digitalocean.com/products) - Solutions - - - [AI and Machine Learning](https://www.digitalocean.com/products/gradient) Develop, train, and deploy AI apps - [GPUs](https://www.digitalocean.com/products/gradient/gpu-droplets) - [Platform](https://www.digitalocean.com/products/gradient/platform) - [1-Click Models](https://www.digitalocean.com/products/gradient/1-click-models) - [HR Knowledge Assistant](https://www.digitalocean.com/solutions/ai-hr-knowledge-assistant) - [Code Copilot](https://www.digitalocean.com/solutions/ai-code-copilot) - [Support Ticket Triage](https://www.digitalocean.com/solutions/ai-support-ticket-triage) - [Recommendation Engine](https://www.digitalocean.com/solutions/ai-recommendation-engine) - [Blockchain](https://www.digitalocean.com/solutions/blockchain) Infrastructure for decentralized apps - [Blogs, Forums and Content Websites](https://www.digitalocean.com/solutions/content-hosting) Lightning-fast, reliable CMS hosting - [Wordpress](https://www.digitalocean.com/solutions/wordpress-hosting) - [Ghost](https://marketplace.digitalocean.com/apps/ghost) - [Mastodon](https://marketplace.digitalocean.com/apps/mastodon) - [Data Analytics](https://www.digitalocean.com/solutions/data-analytics) Real-time data processing at scale - [Data Streaming](https://www.digitalocean.com/solutions/data-streaming-cloud) - [AdTech & Martech](https://www.digitalocean.com/solutions/adtech-martech) - [Kafka](https://www.digitalocean.com/products/managed-databases-kafka?utm_source=top-nav-data-analytics) - - [Developer Tools](https://www.digitalocean.com/solutions/developer-tools) DevOps and CI/CD solutions - [CI/CD](https://www.digitalocean.com/solutions/cicd-pipelines) - [Prototyping](https://www.digitalocean.com/solutions/prototype-hosting) - [Digital Marketing Agencies](https://www.digitalocean.com/solutions/digital-marketing-agencies) Power your clients’ websites and campaigns - [Freelancer](https://www.digitalocean.com/solutions/freelancer-website-hosting) - [IT Consulting](https://www.digitalocean.com/solutions/it-consulting) - [Ecommerce](https://www.digitalocean.com/solutions/ecommerce-hosting) Build beautiful online storefronts - [Dropshipping](https://www.digitalocean.com/solutions/dropshipping-hosting) - [WooCommerce](https://marketplace.digitalocean.com/apps/wordpress-woocommerce) - [Magento](https://marketplace.digitalocean.com/apps/magento-2-open-source) - [Game Development](https://www.digitalocean.com/solutions/gaming-development) Low-latency multiplayer servers - [Minecraft Hosting](https://marketplace.digitalocean.com/apps/minecraft-java-edition-server) - - [IoT](https://www.digitalocean.com/solutions/iot-cloud) Connect to the power of the cloud - [Kafka](https://www.digitalocean.com/products/managed-databases-kafka?utm_source=top-nav-iot) - [ISVs](https://www.digitalocean.com/solutions/isv) Streamlined ISV application development - [Secure Web Hosting](https://www.digitalocean.com/solutions/secure-web-hosting) Powerful protection from DDoS and more - [Private VPN](https://www.digitalocean.com/solutions/vpn) - [Startup Cloud Hosting](https://www.digitalocean.com/solutions/startups) Scalable, cost-effective infrastructure - [Small Business](https://www.digitalocean.com/solutions/small-business-website-hosting) - [Video Streaming](https://www.digitalocean.com/solutions/streaming) High-bandwidth, low-latency delivery - [Kafka](https://www.digitalocean.com/products/managed-databases-kafka?utm_source=top-nav-video-streaming) - - [Web and Mobile Apps](https://www.digitalocean.com/solutions/web-mobile-apps) Simple cross-platform app hosting - [cPanel](https://www.digitalocean.com/solutions/cpanel-hosting) - [Docker](https://www.digitalocean.com/solutions/docker-hosting) - [Next.js](https://www.digitalocean.com/solutions/nextjs-hosting) - [Node.js](https://www.digitalocean.com/solutions/nodejs-hosting) - [Website Hosting](https://www.digitalocean.com/solutions/website-hosting) Fast page loads and reliable site uptime - [VPS Hosting](https://www.digitalocean.com/solutions/vps-hosting) - [Virtual Machines](https://www.digitalocean.com/solutions/virtual-machines) [See all solutions](https://www.digitalocean.com/business) - Developers - Our Community - [Community Home DevOps and development guides](https://www.digitalocean.com/community) - [CSS-Tricks All things web design](https://css-tricks.com/) - [The Wave Content to level up your business.](https://www.digitalocean.com/resources) - Partners - DigitalOcean Partner Programs - [Become a Partner](https://www.digitalocean.com/partners/pod) - [Partner Services Program](https://www.digitalocean.com/partners/services) - [DigitalOcean AI Partner Program](https://www.digitalocean.com/partners/ai-partner-program) - [Marketplace](https://marketplace.digitalocean.com/) - [DigitalOcean Startups](https://www.digitalocean.com/startups) - [Connect with a Partner](https://www.digitalocean.com/partners/directory) - [Pricing](https://www.digitalocean.com/pricing) - Log in - [Community](https://www.digitalocean.com/api/dynamic-content/v1/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=login) - [DigitalOcean](https://cloud.digitalocean.com/login) - Sign up - [Community](https://www.digitalocean.com/api/dynamic-content/v1/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register) - [DigitalOcean](https://cloud.digitalocean.com/registrations/new) - [Blog](https://www.digitalocean.com/blog) - [Docs](https://docs.digitalocean.com/products) - [Careers](https://www.digitalocean.com/careers) - [Get Support](https://www.digitalocean.com/support) - [Contact Sales](https://www.digitalocean.com/company/contact/sales?referrer=tophat) - Log in - [Community](https://www.digitalocean.com/api/dynamic-content/v1/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=login) - [DigitalOcean](https://cloud.digitalocean.com/login) - Sign up - [Community](https://www.digitalocean.com/api/dynamic-content/v1/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register) - [DigitalOcean](https://cloud.digitalocean.com/registrations/new) - [Tutorials](https://www.digitalocean.com/community/tutorials) - [Questions](https://www.digitalocean.com/community/questions) - [Product Docs](https://docs.digitalocean.com/) - Search Community ## Report this What is the reason for this report? This undefined is spam This undefined is offensive This undefined is off-topic This undefined is other Submit ## Table of contents 1. [Prerequisites](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#prerequisites) 2. [How CSS Class Selectors Work](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#how-css-class-selectors-work) 3. [Creating a CSS Class Using a Class Selector](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector) 4. [Adding CSS Classes to Images](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#adding-css-classes-to-images) 5. [Conclusion](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#conclusion) 1. [Tutorial Series](https://www.digitalocean.com/community/tutorials?type=tutorial_series&subtype=tutorial_series) 2. How To Build a Website With CSS [Tutorial](https://www.digitalocean.com/community/tutorials?subtype=tutorial) # How To Create Classes With CSS Published on October 13, 2020 [CSS](https://www.digitalocean.com/community/tags/css) [Spin Up](https://www.digitalocean.com/community/tags/spin-up) ![Erin Glass](https://www.gravatar.com/avatar/a0f19b54dd93645bbb10a0e06719054c5f77c687d9066b70921e3f0aa644d08d?default=retro&size=256) By [Erin Glass](https://www.digitalocean.com/community/users/eglass) Senior Manager, DevEd ![How To Create Classes With CSS](https://www.digitalocean.com/api/static-content/v1/images?src=https%3A%2F%2Fcommunity-cdn-digitalocean-com.global.ssl.fastly.net%2FxP6vGmY7Cwr29DDyNUcucPgR&width=1920) Table of contents Popular topics ### [Introduction](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#introduction) In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element. ## [Prerequisites](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#prerequisites) To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series [How To Set Up You CSS and HTML Practice Project](https://www.digitalocean.com/community/tutorials/how-to-set-up-your-css-and-html-practice-project). ## [How CSS Class Selectors Work](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#how-css-class-selectors-work) A CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as `<p>`, `<h1>` or `<img>`), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a `.`, which can help you distinguish between tag selectors and class selectors in CSS files. A CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the `.` prepended to the class name: ``` .red-text { color: red; } ``` Copy To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class [attribute](https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes) in your HTML document like so: ``` <h1 class=".red-text ">Content.</element> ``` Copy ## [Creating a CSS Class Using a Class Selector](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector) Let’s begin exploring CSS classes in practice. Erase everything in your `styles.css` file and add the following code snippet to specify a rule for the class `red-text`: styles.css ``` .red-text { color: red; } ``` Copy After adding the code snippet to your `styles.css` file, save the file. Return to your `index.html` and erase everything but the first line of code `<link rel="stylesheet" href="css/styles.css">` that links to your CSS stylesheet. Then add the following HTML code snippet: index.html ``` <p class="red-text ">Here is the first sample of paragraph text.</p> ``` Copy Note that the class name is not prepended here with a `.` as it is when being used as a selector for a CSS rule. Your entire `index.html` file should have the following contents: index.html ``` . . . <link rel="stylesheet" href="css/styles.css"> <p class="red-text" Here is the first sample of paragraph text.</p> ``` Copy In this code snippet you have added text using the HTML `<p>` tag. But you have also specified the `red-text` class by adding the highlighted class [attribute](https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes) `class="red-text"` inside the opening HTML tag. Save your `index.html` file and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step [How To View An Offline HTML File In Your Browser](https://www.digitalocean.com/community/tutorials/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser)). You should receive a webpage with red text: ![Webpage output with red paragraph text](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/red-text.png) Let’s add an additional CSS class to explore styling different pieces of `<p>` text content with different classes. Add the following code snippet to your `styles.css` file (after your CSS rule for “red-text”): styles.css ``` .yellow-background-text { background-color: yellow; } ``` Copy This CSS rule declares that the class `yellow-background-text` is assigned the `yellow` value for the `background-color` property. Any HTML text element assigned this class will have a yellow background. Note that the use of the word `text`in the class `yellow-background-text` is for human readability purposes only. You do not need to include the word `text` in your class names for classes assigned to HTML text. To apply this new CSS class, return to your `index.html` file and add the following line of code to the bottom: index.html ``` <p class="yellow-background-text"> Here is the second sample of paragraph text.<p> ``` Copy In this code snippet, you have added some text content with the `<p>` element and specified the `yellow-background-text` class. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background: ![Webpage with text styled by two classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/two-classes.png) Note that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your `index.html` file: index.html ``` <p class="red-text yellow-background-text">Here is a third sample of text.</p> ``` Copy Note that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this: ![IWebpage with text styled by three classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/three-classes.png) Your third line of text should now be styled according to the property values set in the `red-text` class and the `yellow-background-text` class and have a red font and yellow background. ## [Adding CSS Classes to Images](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#adding-css-classes-to-images) CSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your `styles.css` file and add the following code snippet: styles.css ``` .black-img { border: 5px dotted black; border-radius: 10%; } .yellow-img { border: 25px solid yellow; border-radius: 50%; } .red-img { border: 15px double red; } ``` Copy Here you have created CSS rules for three different classes that can be applied to the HTML `<img>` tag. Before you move on, let’s briefly study what we’ve declared in each ruleset: - The first CSS rule declares that the class `black-img` should have a `black`, `dotted` border five pixels wide and a `border-radius` sized at 10%, which gives the element rounded corners. - The second CSS rule declares that the class `yellow-img` should have a `yellow`, `solid` border 25 pixels wide and a `border-radius` sized at 50%, which gives the element a circular shape. - The third CSS rule declares that the class `red-img` should have a `red`, `double` border 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape. Save the `styles.css` file. Then erase everything from your `index.html` file (except for the first line of code: `<link rel="stylesheet" href="css/styles.css">`) and add the following code snippet: index.html ``` <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img"> ``` Copy Each of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the `styles.css` file. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial [How To Add Images To Your Webpage With HTML](https://www.digitalocean.com/community/tutorials/how-to-add-images-to-your-webpage-using-html). Save your `index.html` file and load it in the browser. You should receive something like this: ![Webpage with images styled with three classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/image-classes.png) Your webpage should now display three images, each styled with the different specifications of their assigned class. To continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a `font-color` declaration will not change the color of an image border. Likewise, a `height` declaration will not change the size of the font. ## [Conclusion](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#conclusion) You have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the [second half of this tutorial series](https://www.digitalocean.com/community/tutorials/how-to-set-up-your-css-and-html-website-project). In the next tutorial, you will create CSS ID selectors, which work similarly as class selectors with the exception of some unique features. Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases. [Learn more about our products](https://www.digitalocean.com/products "Learn more about our products") ### Tutorial Series: How To Build a Website With CSS This tutorial is part of a series on creating and customizing [this website](http://css.sammy-codes.com/) with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects. Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series [How To Build a Website With HTML](https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) before starting this series. [CSS](https://www.digitalocean.com/community/tags/css) [Spin Up](https://www.digitalocean.com/community/tags/spin-up) [Visit series page](https://www.digitalocean.com/community/tutorial-series/how-to-build-a-website-with-css) Browse Series: 20 tutorials - 1/20 - [A Brief Introduction To CSS](https://www.digitalocean.com/community/tutorials/a-brief-introduction-to-css) - 2/20 - [How To Set Up Your CSS and HTML Practice Project With a Code Editor](https://www.digitalocean.com/community/tutorials/how-to-set-up-your-css-and-html-practice-project-with-a-code-editor) - 3/20 - [How To Understand and Create CSS Rules](https://www.digitalocean.com/community/tutorials/how-to-understand-and-create-css-rules) Expand to view all ### About the author ![Erin Glass](https://www.gravatar.com/avatar/a0f19b54dd93645bbb10a0e06719054c5f77c687d9066b70921e3f0aa644d08d?default=retro&size=256) Erin Glass Author Senior Manager, DevEd [See author profile](https://www.digitalocean.com/community/users/eglass) Open source advocate and lover of education, culture, and community. [See author profile](https://www.digitalocean.com/community/users/eglass) Category: [Tutorial](https://www.digitalocean.com/community/tutorials?subtype=tutorial) Tags: [CSS](https://www.digitalocean.com/community/tags/css) [Spin Up](https://www.digitalocean.com/community/tags/spin-up) #### Still looking for an answer? [Ask a question](https://www.digitalocean.com/community/questions)[Search for more help](https://www.digitalocean.com/community) Was this helpful? Yes No Comments(0) Follow-up questions(0) This textbox defaults to using Markdown to format your answer. You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link\! [Sign in/up to comment](https://www.digitalocean.com/api/dynamic-content/v1/login?success_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-classes-with-css&error_redirect=https%3A%2F%2Fwww.digitalocean.com%2Fauth-error&type=register) [![Creative Commons](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fcreativecommons.c0a877f1.png&width=384)](https://creativecommons.org/licenses/by-nc-sa/4.0/)This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License. ## Deploy on DigitalOcean Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products. [Sign up](https://cloud.digitalocean.com/registrations/new?refcode=f6fcd01aaffb) ## Popular Topics 1. [AI/ML](https://www.digitalocean.com/community/tags/ai-ml) 2. [Ubuntu](https://www.digitalocean.com/community/tags/ubuntu) 3. [Linux Basics](https://www.digitalocean.com/community/tags/linux-basics) 4. [JavaScript](https://www.digitalocean.com/community/tags/javascript) 5. [Python](https://www.digitalocean.com/community/tags/python) 6. [MySQL](https://www.digitalocean.com/community/tags/mysql) 7. [Docker](https://www.digitalocean.com/community/tags/docker) 8. [Kubernetes](https://www.digitalocean.com/community/tags/kubernetes) 9. [All tutorials](https://www.digitalocean.com/community/tutorials) 10. [Talk to an expert](https://www.digitalocean.com/company/contact/sales?referrer=tutorials) ### Connect on Discord Join the conversation in our Discord to connect with fellow developers [Visit Discord](https://discord.gg/digitalocean) ## Featured tutorials 1. [SOLID Design Principles Explained: Building Better Software Architecture](https://www.digitalocean.com/community/tutorials/s-o-l-i-d-the-first-five-principles-of-object-oriented-design) 2. [How To Remove Docker Images, Containers, and Volumes](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes) 3. [How to Create a MySQL User and Grant Privileges (Step-by-Step)](https://www.digitalocean.com/community/tutorials/how-to-create-a-new-user-and-grant-permissions-in-mysql) - [All tutorials](https://www.digitalocean.com/community/tutorials) - [All topic tags](https://www.digitalocean.com/community/tags) ##### Join the Tech Talk - [Prerequisites](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#prerequisites) - [How CSS Class Selectors Work](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#how-css-class-selectors-work) - [Creating a CSS Class Using a Class Selector](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector) - [Adding CSS Classes to Images](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#adding-css-classes-to-images) - [Conclusion](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#conclusion) - ## Deploy on DigitalOcean Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products. [Sign up](https://cloud.digitalocean.com/registrations/new?refcode=f6fcd01aaffb) ## Popular Topics 1. [AI/ML](https://www.digitalocean.com/community/tags/ai-ml) 2. [Ubuntu](https://www.digitalocean.com/community/tags/ubuntu) 3. [Linux Basics](https://www.digitalocean.com/community/tags/linux-basics) 4. [JavaScript](https://www.digitalocean.com/community/tags/javascript) 5. [Python](https://www.digitalocean.com/community/tags/python) 6. [MySQL](https://www.digitalocean.com/community/tags/mysql) 7. [Docker](https://www.digitalocean.com/community/tags/docker) 8. [Kubernetes](https://www.digitalocean.com/community/tags/kubernetes) 9. [All tutorials](https://www.digitalocean.com/community/tutorials) 10. [Talk to an expert](https://www.digitalocean.com/company/contact/sales?referrer=tutorials) ### Connect on Discord Join the conversation in our Discord to connect with fellow developers [Visit Discord](https://discord.gg/digitalocean) ## Featured tutorials 1. [SOLID Design Principles Explained: Building Better Software Architecture](https://www.digitalocean.com/community/tutorials/s-o-l-i-d-the-first-five-principles-of-object-oriented-design) 2. [How To Remove Docker Images, Containers, and Volumes](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes) 3. [How to Create a MySQL User and Grant Privileges (Step-by-Step)](https://www.digitalocean.com/community/tutorials/how-to-create-a-new-user-and-grant-permissions-in-mysql) - [All tutorials](https://www.digitalocean.com/community/tutorials) - [All topic tags](https://www.digitalocean.com/community/tags) ![](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Ftutorials-2-tulip.764b9f59.svg&width=1920) ## Become a contributor for community Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation. [Sign Up](https://www.digitalocean.com/community/pages/write-for-digitalocean) ![](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fdocs-2-kiwi.239a03ef.svg&width=1920) ## DigitalOcean Documentation Full documentation for every DigitalOcean product. [Learn more](https://docs.digitalocean.com/) ![](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fblogs-1-lavender.495d1f00.svg&width=1920) ## Resources for startups and AI-native businesses The Wave has everything you need to know about building a business, from raising funding to marketing your product. [Learn more](https://www.digitalocean.com/resources) ## Get our newsletter Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter. New accounts only. By submitting your email you agree to our [Privacy Policy](https://www.digitalocean.com/legal/privacy-policy) ## The developer cloud Scale up as you grow — whether you're running one virtual machine or ten thousand. [View all products](https://www.digitalocean.com/products) ![](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fclouds-mobile.5d14bead.svg&width=3840) ## Get started for free Sign up and get \$200 in credit for your first 60 days with DigitalOcean.\* [Get started](https://cloud.digitalocean.com/registrations/new?refcode=f6fcd01aaffb) ![](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fwaves-mobile.a054c63e.svg&width=3840) \*This promotional offer applies to new accounts only. ## Company - [About](https://www.digitalocean.com/about) - [Leadership](https://www.digitalocean.com/leadership/executive-management) - [Blog](https://www.digitalocean.com/blog) - [Careers](https://www.digitalocean.com/careers) - [Customers](https://www.digitalocean.com/customers) - [Partners](https://www.digitalocean.com/partners) - [Referral Program](https://www.digitalocean.com/referral-program) - [Affiliate Program](https://www.digitalocean.com/affiliates) - [Press](https://www.digitalocean.com/press) - [Legal](https://www.digitalocean.com/legal) - [Privacy Policy](https://www.digitalocean.com/legal/privacy-policy) - [Security](https://www.digitalocean.com/security) - [Investor Relations](https://investors.digitalocean.com/) ## Products - [Overview](https://www.digitalocean.com/products) - [Droplets](https://www.digitalocean.com/products/droplets) - [Kubernetes](https://www.digitalocean.com/products/kubernetes) - [Functions](https://www.digitalocean.com/products/functions) - [App Platform](https://www.digitalocean.com/products/app-platform) - [Gradient™ AI GPU Droplets](https://www.digitalocean.com/products/gradient/gpu-droplets) - [Gradient™ AI Bare Metal GPUs](https://www.digitalocean.com/products/gradient/bare-metal-gpus) - [Gradient™ AI 1-Click Models](https://www.digitalocean.com/products/gradient/1-click-models) - [Gradient™ AI Platform](https://www.digitalocean.com/products/gradient/platform) - [Load Balancers](https://www.digitalocean.com/products/load-balancers) - [Managed Databases](https://www.digitalocean.com/products/managed-databases) - [Spaces](https://www.digitalocean.com/products/spaces) - [Block Storage](https://www.digitalocean.com/products/block-storage) - [Network File Storage](https://www.digitalocean.com/products/storage/network-file-storage) - [API](https://docs.digitalocean.com/reference/api) - [Uptime](https://www.digitalocean.com/products/uptime-monitoring) - [Identity and Access Management](https://www.digitalocean.com/products/identity-access-management) - [Cloudways](https://www.digitalocean.com/products/cloudways) ## Resources - [Community Tutorials](https://www.digitalocean.com/community/tutorials) - [Community Q\&A](https://www.digitalocean.com/community/questions) - [CSS-Tricks](https://css-tricks.com/) - [Write for DOnations](https://www.digitalocean.com/community/pages/write-for-digitalocean) - [Currents Research](https://www.digitalocean.com/currents) - [DigitalOcean Startups](https://www.digitalocean.com/startups) - [Wavemakers Program](https://www.digitalocean.com/wavemakers) - [Compass Council](https://www.digitalocean.com/research) - [Open Source](https://www.digitalocean.com/open-source) - [Newsletter Signup](https://www.digitalocean.com/community#iaan) - [Marketplace](https://www.digitalocean.com/products/marketplace) - [Pricing](https://www.digitalocean.com/pricing) - [Pricing Calculator](https://www.digitalocean.com/pricing/calculator) - [Documentation](https://docs.digitalocean.com/) - [Release Notes](https://docs.digitalocean.com/release-notes) - [Code of Conduct](https://www.digitalocean.com/community/pages/code-of-conduct) - [Shop Swag](http://store.digitalocean.com/) ## Solutions - [Website Hosting](https://www.digitalocean.com/solutions/website-hosting) - [VPS Hosting](https://www.digitalocean.com/solutions/vps-hosting) - [Web & Mobile Apps](https://www.digitalocean.com/solutions/web-mobile-apps) - [Game Development](https://www.digitalocean.com/solutions/gaming-development) - [Streaming](https://www.digitalocean.com/solutions/streaming) - [VPN](https://www.digitalocean.com/solutions/vpn) - [SaaS Platforms](https://www.digitalocean.com/solutions/saas) - [Cloud Hosting for Blockchain](https://www.digitalocean.com/solutions/blockchain) - [Startup Resources](https://www.digitalocean.com/resources) - [Migration Assistance](https://www.digitalocean.com/migrate) ## Contact - [Support](https://www.digitalocean.com/support) - [Sales](https://www.digitalocean.com/company/contact/sales?referrer=footer) - [Report Abuse](https://www.digitalocean.com/company/contact/abuse) - [System Status](https://status.digitalocean.com/) - [Share your ideas](https://ideas.digitalocean.com/) ## Company - [About](https://www.digitalocean.com/about) - [Leadership](https://www.digitalocean.com/leadership/executive-management) - [Blog](https://www.digitalocean.com/blog) - [Careers](https://www.digitalocean.com/careers) - [Customers](https://www.digitalocean.com/customers) - [Partners](https://www.digitalocean.com/partners) - [Referral Program](https://www.digitalocean.com/referral-program) - [Affiliate Program](https://www.digitalocean.com/affiliates) - [Press](https://www.digitalocean.com/press) - [Legal](https://www.digitalocean.com/legal) - [Privacy Policy](https://www.digitalocean.com/legal/privacy-policy) - [Security](https://www.digitalocean.com/security) - [Investor Relations](https://investors.digitalocean.com/) ## Products - [Overview](https://www.digitalocean.com/products) - [Droplets](https://www.digitalocean.com/products/droplets) - [Kubernetes](https://www.digitalocean.com/products/kubernetes) - [Functions](https://www.digitalocean.com/products/functions) - [App Platform](https://www.digitalocean.com/products/app-platform) - [Gradient™ AI GPU Droplets](https://www.digitalocean.com/products/gradient/gpu-droplets) - [Gradient™ AI Bare Metal GPUs](https://www.digitalocean.com/products/gradient/bare-metal-gpus) - [Gradient™ AI 1-Click Models](https://www.digitalocean.com/products/gradient/1-click-models) - [Gradient™ AI Platform](https://www.digitalocean.com/products/gradient/platform) - [Load Balancers](https://www.digitalocean.com/products/load-balancers) - [Managed Databases](https://www.digitalocean.com/products/managed-databases) - [Spaces](https://www.digitalocean.com/products/spaces) - [Block Storage](https://www.digitalocean.com/products/block-storage) - [Network File Storage](https://www.digitalocean.com/products/storage/network-file-storage) - [API](https://docs.digitalocean.com/reference/api) - [Uptime](https://www.digitalocean.com/products/uptime-monitoring) - [Identity and Access Management](https://www.digitalocean.com/products/identity-access-management) - [Cloudways](https://www.digitalocean.com/products/cloudways) ## Resources - [Community Tutorials](https://www.digitalocean.com/community/tutorials) - [Community Q\&A](https://www.digitalocean.com/community/questions) - [CSS-Tricks](https://css-tricks.com/) - [Write for DOnations](https://www.digitalocean.com/community/pages/write-for-digitalocean) - [Currents Research](https://www.digitalocean.com/currents) - [DigitalOcean Startups](https://www.digitalocean.com/startups) - [Wavemakers Program](https://www.digitalocean.com/wavemakers) - [Compass Council](https://www.digitalocean.com/research) - [Open Source](https://www.digitalocean.com/open-source) - [Newsletter Signup](https://www.digitalocean.com/community#iaan) - [Marketplace](https://www.digitalocean.com/products/marketplace) - [Pricing](https://www.digitalocean.com/pricing) - [Pricing Calculator](https://www.digitalocean.com/pricing/calculator) - [Documentation](https://docs.digitalocean.com/) - [Release Notes](https://docs.digitalocean.com/release-notes) - [Code of Conduct](https://www.digitalocean.com/community/pages/code-of-conduct) - [Shop Swag](http://store.digitalocean.com/) ## Solutions - [Website Hosting](https://www.digitalocean.com/solutions/website-hosting) - [VPS Hosting](https://www.digitalocean.com/solutions/vps-hosting) - [Web & Mobile Apps](https://www.digitalocean.com/solutions/web-mobile-apps) - [Game Development](https://www.digitalocean.com/solutions/gaming-development) - [Streaming](https://www.digitalocean.com/solutions/streaming) - [VPN](https://www.digitalocean.com/solutions/vpn) - [SaaS Platforms](https://www.digitalocean.com/solutions/saas) - [Cloud Hosting for Blockchain](https://www.digitalocean.com/solutions/blockchain) - [Startup Resources](https://www.digitalocean.com/resources) - [Migration Assistance](https://www.digitalocean.com/migrate) ## Contact - [Support](https://www.digitalocean.com/support) - [Sales](https://www.digitalocean.com/company/contact/sales?referrer=footer) - [Report Abuse](https://www.digitalocean.com/company/contact/abuse) - [System Status](https://status.digitalocean.com/) - [Share your ideas](https://ideas.digitalocean.com/) © 2026 DigitalOcean, LLC.[Sitemap](https://www.digitalocean.com/sitemap).[Cookie Preferences]() This site uses cookies and related technologies, as described in our [privacy policy](https://www.digitalocean.com/legal/privacy-policy/), for purposes that may include site operation, analytics, enhanced user experience, or advertising. You may choose to consent to our use of these technologies, or manage your own preferences. Please visit our [cookie policy](https://www.digitalocean.com/legal/cookie-policy) for more information. Agree & Proceed Decline All Manage Choices Loading... ## Community ## Product Docs ## Marketplace ## DigitalOcean Blog navigate go exit
Readable Markdown	### [Introduction](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#introduction) In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element. ## [Prerequisites](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#prerequisites) To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series [How To Set Up You CSS and HTML Practice Project](https://www.digitalocean.com/community/tutorials/how-to-set-up-your-css-and-html-practice-project). ## [How CSS Class Selectors Work](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#how-css-class-selectors-work) A CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as `<p>`, `<h1>` or `<img>`), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a `.`, which can help you distinguish between tag selectors and class selectors in CSS files. A CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the `.` prepended to the class name: ``` .red-text { color: red; } ``` To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class [attribute](https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes) in your HTML document like so: ``` <h1 class=".red-text ">Content.</element> ``` ## [Creating a CSS Class Using a Class Selector](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#creating-a-css-class-using-a-class-selector) Let’s begin exploring CSS classes in practice. Erase everything in your `styles.css` file and add the following code snippet to specify a rule for the class `red-text`: styles.css ``` .red-text { color: red; } ``` After adding the code snippet to your `styles.css` file, save the file. Return to your `index.html` and erase everything but the first line of code `<link rel="stylesheet" href="css/styles.css">` that links to your CSS stylesheet. Then add the following HTML code snippet: index.html ``` <p class="red-text ">Here is the first sample of paragraph text.</p> ``` Note that the class name is not prepended here with a `.` as it is when being used as a selector for a CSS rule. Your entire `index.html` file should have the following contents: index.html ``` . . . <link rel="stylesheet" href="css/styles.css"> <p class="red-text" Here is the first sample of paragraph text.</p> ``` In this code snippet you have added text using the HTML `<p>` tag. But you have also specified the `red-text` class by adding the highlighted class [attribute](https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes) `class="red-text"` inside the opening HTML tag. Save your `index.html` file and load it in the browser. (For instructions on loading an HTML file, please visit our tutorial step [How To View An Offline HTML File In Your Browser](https://www.digitalocean.com/community/tutorials/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser)). You should receive a webpage with red text: ![Webpage output with red paragraph text](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/red-text.png) Let’s add an additional CSS class to explore styling different pieces of `<p>` text content with different classes. Add the following code snippet to your `styles.css` file (after your CSS rule for “red-text”): styles.css ``` .yellow-background-text { background-color: yellow; } ``` This CSS rule declares that the class `yellow-background-text` is assigned the `yellow` value for the `background-color` property. Any HTML text element assigned this class will have a yellow background. Note that the use of the word `text`in the class `yellow-background-text` is for human readability purposes only. You do not need to include the word `text` in your class names for classes assigned to HTML text. To apply this new CSS class, return to your `index.html` file and add the following line of code to the bottom: index.html ``` <p class="yellow-background-text"> Here is the second sample of paragraph text.<p> ``` In this code snippet, you have added some text content with the `<p>` element and specified the `yellow-background-text` class. Save the file and reload it in your browser. You should have a webpage with two different sentences, the first one red and the second one with a yellow background: ![Webpage with text styled by two classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/two-classes.png) Note that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your `index.html` file: index.html ``` <p class="red-text yellow-background-text">Here is a third sample of text.</p> ``` Note that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this: ![IWebpage with text styled by three classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/three-classes.png) Your third line of text should now be styled according to the property values set in the `red-text` class and the `yellow-background-text` class and have a red font and yellow background. ## [Adding CSS Classes to Images](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#adding-css-classes-to-images) CSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes for images, erase the content in your `styles.css` file and add the following code snippet: styles.css ``` .black-img { border: 5px dotted black; border-radius: 10%; } .yellow-img { border: 25px solid yellow; border-radius: 50%; } .red-img { border: 15px double red; } ``` Here you have created CSS rules for three different classes that can be applied to the HTML `<img>` tag. Before you move on, let’s briefly study what we’ve declared in each ruleset: - The first CSS rule declares that the class `black-img` should have a `black`, `dotted` border five pixels wide and a `border-radius` sized at 10%, which gives the element rounded corners. - The second CSS rule declares that the class `yellow-img` should have a `yellow`, `solid` border 25 pixels wide and a `border-radius` sized at 50%, which gives the element a circular shape. - The third CSS rule declares that the class `red-img` should have a `red`, `double` border 15 pixels wide. You have not set a border-radius, so the border will conform to the element’s shape. Save the `styles.css` file. Then erase everything from your `index.html` file (except for the first line of code: `<link rel="stylesheet" href="css/styles.css">`) and add the following code snippet: index.html ``` <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img"> <img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img"> ``` Each of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the `styles.css` file. Note that you are sourcing the image from an online location. You can also use your own image by specifying the file path as instructed in our tutorial [How To Add Images To Your Webpage With HTML](https://www.digitalocean.com/community/tutorials/how-to-add-images-to-your-webpage-using-html). Save your `index.html` file and load it in the browser. You should receive something like this: ![Webpage with images styled with three classes](https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/image-classes.png) Your webpage should now display three images, each styled with the different specifications of their assigned class. To continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a `font-color` declaration will not change the color of an image border. Likewise, a `height` declaration will not change the size of the font. ## [Conclusion](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css#conclusion) You have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the [second half of this tutorial series](https://www.digitalocean.com/community/tutorials/how-to-set-up-your-css-and-html-website-project). In the next tutorial, you will create CSS ID selectors, which work similarly as class selectors with the exception of some unique features. Was this helpful? [![Creative Commons](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fcreativecommons.c0a877f1.png&width=384)](https://creativecommons.org/licenses/by-nc-sa/4.0/)This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Shard	83 (laksa)
Root Hash	13428457316079428483
Unparsed URL	com,digitalocean!www,/community/tutorials/how-to-create-classes-with-css s443