CSS Basics for CMS Tools

CSS Basics for CMS Tools

What is CSS – An Overview

CSS stands for Cascading Style Sheets. CSS is a styling language used for specifying the presentation of web documents written in a markup language such as HTML.

CSS Basics for CMS Tools – Overview

This article aims to give you an idea about basic CSS syntax and some of the most common selectors used in CSS. By the end of this article, you should be well aware of what an element is, how to use CSS selectors, how to use DevTools in Chrome for CSS styling, and a basic Syntax of CSS. You must know about these basics in case if you desire to make some custom styling to your website. Let us begin by discussing what a CSS element is.

What is an element?

Elements can be anything on the page, for instance, here are some of the examples of the elements that may appear on any given web page

  • A paragraph
  • A link
  • A button
  • An image
  • Heading (H1, H2, H3, etc)
  • List of items (a bullet or numbered list)
  • Body of the page
  • Logo
  • Menus

To see the code of any element on-page, you must right click on it and select the inspect option. Refer to the image below to see how the options appear when you right-click on any page elements.

How to see code of any element on-page
How to see code of any element on-page

Upon selecting the inspect option from the list, the DevTools window shall appear. The window may appear in the bottom or on the right/left side or in a popup window. In the following section, you will learn how to change the position of Devtools in chrome.

Change the position of Devtools in Chrome

The DevTools Docking position can be changed very easily using some options that appear on the top right side of the Docking window. Click on the ellipsis icon on the upper right side of the Docking window and select one of the desired Docking options. You can open Inspect Element of Chrome in a New Window, or dock the inspect element options to the right side or the left side or dock to the bottom of your window. See the image below for your reference.

Change the position or open Devtools in  a new window in Chrome
Change the position or open Devtools in a new window in Chrome

Different positions of Inspect Element (DevTools) in chrome

Recommended View of DevTools

If you dock the DevTools in a separate window, you should be able to see the HTML elements on the left side panel and the CSS code on the right-side panel. I highly recommend you undock the inspect element window in a separate window to have precise control on HTML elements and CSS code. See the image below for your reference, which shows how the CSS code and HTML elements are displayed side by side when we undock the DevTools in Chrome.

Recommended View of DevTools
Recommended View of DevTools

How do we select an element on-page using mouse?

Once you are in the DevTools window, click on the icon with the mouse arrow on it located toward the upper left corner. Now move your mouse on any of the elements on the page. Once you place your mouse on the desired element and click on it with your mouse, it should be selected. The code for that element is presented in the DevTools window. Kindly refer to the image given below, which shows the icon we are discussing. The icon appears only in the DevTools window.

How do we select an element on-page?
How do we select an element on-page?

How to focus or target a specific page element?

In this example, we are discussing how to get hold of a paragraph element. See the image below, which shows how the paragraph element is highlighted when we right-click on a paragraph and select inspect from options.

How to see code of any element on-page
How to see code of any element on-page

Stay on elements tab in this window and make sure the selection is highlighted and look at the first code block in the right-side panel, which is currently in use for that element. If we make any changes in this area, you may be able to see them in action temporarily. However, if you take a copy of this CSS code displayed on the right-side and apply it using the custom CSS options in your respective CMS apps, you should be able to make those temporary changes permanent.

CSS Box Model

Before moving any further into this article, we need to make sure that you have a clear understanding of the CSS box model. When you are in the DevTools window, scroll down entirely in the CSS Code section to find a box model at the end of the CSS code blocks. It would be something similar to the following image.

What is CSS Box Model
What is CSS Box Model

The image below gives you a clear indication of all the sections that can be found inside a CSS box model. We discuss all these sections briefly so that you understand the CSS box model precisely.

What is CSS Box Model
What is CSS Box Model

Content Area

Let us discuss the CSS Box model briefly. The innermost area is the content place. The horizontal line that goes from left to right is the width area. The vertical line is the height area.

Padding Area

Around the content area, the first thing that begins is the padding area. The padding area has four sides, top padding area, right padding area, bottom padding area, and left padding area. Increasing or decreasing value for any of the padding sides will push the content away from the border area.

Border Area

The border area surrounds the padding area. You can define the border width style and other styling properties to enhance the view of your borders. The border area has all four sides top right bottom and left and can be styled individually. We can add the width value to increase or decrease the border intensity for all four sides or individual sides are needed.

Margin Area

The margin area surrounds the border area. There are four possible margin sides, i.e., Top, Right, Bottom, Left margin area, which can be individually controlled and set. Increasing or decreasing value for any of the margin sides will push the border including the content and padding area away from other elements on the page.

Using Standard HTML Tag as a CSS Selector

Now that you know CSS box model overview and how to select an element on a page, let us take a close look at how we can set a custom style for paragraph elements with the help of CSS code. We will set the text inside that paragraph to justify alignment using the CSS code. The following CSS code is the most basic CSS Syntax. The code begins with the selector. The code is enclosed in curly brackets { — code—}. Inside the curly brackets, you will write the CSS code for styling the elements. Below is the example of the simple CSS code where the text-align property is set to justify value which will justify the alignment of the paragraph text.

CSS Code

p {
text-align: justify;
}

CSS Code Block Explanation

Let us help you understand every bit used in the code above. Refer to the image below for pointers on each part of the code for clarity. In this code block, the HTML Paragraph tag P becomes the CSS selector. The text-align is the property for which we have set justify as the value.

CSS Code Syntax Explanation
CSS Code Syntax Explanation

Using HTML Tag ID as a CSS Selector

In this section, we are discussing how to use the ID name from HTML Tag as the CSS selector. To focus on a specific element using their ID, right-click on the element, and select Inspect. The DevTools window will popup, and the code for that element gets highlighted. If that HTML Tag has an ID, it can be seen in the HTML tag on the left side panel as shown in the image below. The right-side panel will show the CSS code in use for the selected element called using the ID selector as shown in the image below.

How to use HTML Tag ID as a CSS Selector
How to use HTML Tag ID as a CSS Selector?

We present the HTML code with an ID name, as shown in the image above below this paragraph. HTML code is followed with the CSS code used to change the background color and the border-radius of that block.

HTML Code

<aside id="nav_menu-4" class="widget module widget_nav_menu"> 

CSS Code

#nav_menu-4 {
    background: #fff;
    border-radius: 4px;
}

CSS Code block explanation

In the code block above, #nav_menu-4 is the ID of the HTML element on the page. We are using this id as the CSS element selector and changing two properties of this element on the page. The ID selector always begins with the # symbol. We change the background property to white [#fff denotes white color], and we set the radius of this element to 4 pixels with the help of border-radius property.

How to use the HTML element class as a CSS selector?

In this section, we learn how to use the class name of the HTML element as a CSS selector. To grab an element by class, right-click on any of the page elements and select inspect. The DevTools window appears with the code highlighted. On the left side panel, you can see the name of the class mentioned in the HTML code. On the right-side panel, the class being called using the CSS selector, as shown in the image below. The CSS Class selector always begins with a dot “.” symbol.

How to use the HTML element class as a CSS selector?
How to use the HTML element class as a CSS selector?

The following HTML code has a class “wp-block-button” which is used to style this element. We use this class name as a CSS selector to apply the desired styles. Furnished below is the HTML code of this element.

HTML Code

<div class="wp-block-button"> 
<a class="wp-block-button__link" href="https://www.payfast.co.za/fees/"> 
Get PayFast Plugin Here 
</a> 
</div>

With the above code into consideration, we use the following CSS code to change the color of the text for the above element using the class of the DIV tag as the CSS selector.

CSS Code

.wp-block-button {
color: #fff;
}

Pay close attention to the CSS code mentioned above. We have used a dot “.” as a prefix to call the class of that HTML element as the CSS selector. With the help of color property, we have set the color of text inside the element to white.

Targeting a specific element inside a class

There may be instances where you wish to focus only on a specific element inside a given block with common class names. Here is a sample of HTML code where there are three tags with the common class.

HTML Code

<p class="customText"> 
Some dummy text inside a paragraph element. 
</p> 
<DIV class="customText"> 
Sample text under DIV tag of HTML.
</DIV> 
<SPAN class="customText">  
Sample text under the span tag of HTML.
</SPAN>

In the HTML code above, all three tags carry a common class name “customText”. We use the following CSS code, only two focus and change the color of the text inside the DIV element of the center class.

CSS code

div.customText{
color: blue;
}

The code above affects only the color of the text for any DIV Tag elements with the class “customText”. We have used the color property to set the color to blue you in this example.

How to use a universal CSS selector?

There are instances where you might wish to apply specific styling to every single element on the page. In such situations, it is laborious to go into every single element and apply the desired styling. CSS Universal selector comes in as a lifesaver in such situations. The following code makes use of a Universal CSS selector to set the color of the text on the entire page to blue.

CSS Code

* {
color: blue;
}

In the CSS code above, we have used the asterisk “*” symbol as the universal selector. The “*” symbol acts as a wildcard and applies any styling provided in this block of code and overrides any previously written styling for those properties throughout the page.

How to use of CSS grouping selector?

In some situations where we may have a requirement of applying a similar style to different elements on the page. With the help of grouping elements, we can apply a style to a wide range of elements on the page in just a few lines. The following HTML code has three different elements, a paragraph, a heading 2, a span block, and a heading 3 Tag.

HTML Code

<p class="customText"> 
Some dummy text inside a paragraph element. 
</p> 
<H2 class="customText"> 
Sample text under H2 tag of HTML.
</H2> 
<SPAN class="customText">  
Sample text under the span tag of HTML.
</SPAN>
<H3 class="customText"> 
Sample text under H3 tag of HTML.
</H3> 

To group the selectors, we separate them with a comma and then begin the code. With the help of the following CSS code, we set the color of text for a paragraph, heading 2 and heading 3 to blue.

CSS Code

h2, h3, p {
color: blue;
}

Conclusion

CSS Basics for CMS Tools conclusion
CSS Basics for CMS Tools conclusion

To conclude the article, we want you to understand that we aimed to provide you with an overview of how to make effective use of CSS by providing you with the most common CSS selectors and the way we use them to style page elements. The table below provides a quick reference to the CSS selectors and elements we have discussed in this article.

SelectorExampleDescription
ElementH1Selects all H1 Tag Elements
#ID#menuBegins with “#” symbol and selects all elements with ID “menu”
Class.customTextStarts with “.” symbol and selects all elements in class “CustomText”
Universal*Simply an asterisk which will select all the elements
Grouph1, h2, h3Selects all H1, H2, and H3 Tag elements

We hope you find this article useful. In case you are stuck and or need help, feel free to drop a comment below or submit your question. Do share it further and add your feedback about the article in the comments section.

About Syed Hussaini

I am a business consultant with 15+ Years of extensive expertise in IT Services Management (ITSM), Team Management, Training, Knowledge Management, and Customer and Technical Support. My involvement in a corporate environment and freelance projects has taught me how to be more productive, proactive, and independent.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.