From 45b24b1de12848fdd236bab4ef320386fd0da2aa Mon Sep 17 00:00:00 2001
From: DarkPanda <31170176+teamdarkpanda@users.noreply.github.com>
Date: Fri, 8 Mar 2019 15:23:33 -0600
Subject: [PATCH] Add CSS Class to Style an Element details (#28749)

---
 .../index.md                                  | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
index 4ad4b0f209d..a311cb0a802 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
@@ -3,8 +3,43 @@ title: Use a CSS Class to Style an Element
 ---
 ## Use a CSS Class to Style an Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
-
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
-
 <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+In CSS, we can target the styling of specific elements that match the specified class attribute.
+
+For example, if you have an element with a class of ```button```, then we can style the look & feel as follows:
+* Start with a ```.``` (period) character followed by the class name and add your style
+
+```css
+.button {
+  border: 2px solid black;
+  text-align: center;
+  display: inline-block;
+  padding: 5px 10px;
+}
+```
+
+Now, the real benefit of using class to style an element is to target multiple elements that have the matching class attribute. For example, if there are 2 buttons on a webpage and they both look similar in style but only differ in size, then we can use a common class to give them common styles and a unique class for each button to give them different size values.
+
+The following HTML code snippet depicts 2 buttons:
+* ```Sign up``` button that should have common button style + should be large in size
+* ```Login``` button that should have common button style + should be small in size
+
+```html
+<div class="button large">Sign up</div>
+<div class="button small">Login</div>
+```
+
+Using the above defined ```.button``` class as a common style for both buttons, and using ```.large``` and ```.small``` class attributes to give them different sizes, we can achieve the look we want without duplicating our code.
+
+```css
+.large {
+  font-size: 20px
+}
+```
+
+```css
+.small {
+  font-size: 10px
+}
+```