Have you ever wonder how the looks and feels of your blog are different from others despite using the same theme? This is simply because of Custom CSS Codes, Before straight away providing the codes let me briefly explain what is CSS.
CSS stands for Cascading Style Sheets which is nothing but simple designing language to add styling and functionality to your HTML page and make it more presentable. CSS allows you to store styling information like colors and layout separate from your HTML. Although you can save CSS as inline internally or externally, That we will discuss later in the article.
For Better understanding assume CSS as some kind of computer dress code. Like, you can change your clothes easily, the same would be with your Website with the help of CSS. You can easily separate CSS from HTML file, so that the dress code is easy to find and easy to modify.
what are the advantages of CSS
- Saves lots of time
- Fast Web Page Loading Time
- Maintaining and Updating CSS code is easy
- Lots of formatting options than HTML
- Style Sheets are Lightweight
- SEO benefits
- Easily present different styles to different viewers
- Good accessibility
Types of CSS
Inline style sheets are always the most common and easiest way to add styles like colors, alignments, and background to your Web Pages. Simply add the code right where you need them. Here in the example, different styling like color and alignment are provided for header (h1) and paragraph (p) tags in the same line.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;text-align:left;">Type one inline CSS</h1>
<p style="color:red;">Inline styles sheets are the easiest way to add styling like colors and background to your Web Page. You just need to add the code right where you need them.</p>
</body>
</html>Internal style sheets are placed at the top of each web page document.<style> element is placed in the head section of each page. These are easy to find in the HTML document and you can easily override an external style sheet with the help of an Internal style sheet
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #B284BE;
}
h1 {
color: #B284BE;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>internal css</h1>
<p>Everything you need to know about internal CSS.</p>
</body>
</html>
External style sheets are separate files form HTML documents that contain only CSS instructions. (The style sheets are saved with the file extension .css). When you add an external style sheet to your web page then the page’s look and feel will be controlled by these CSS codes.
You have to call the External CSS in the head section of the HTML document. Calling could be done as below
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Methods to add Custom CSS in WordPress site
Every time you need to change the style and looks of your site, rather than doing anything silly with your theme codes, you could give a try to custom CSS. With the help of CSS, you can entirely change the feel and the look of your site whether on Blogger or WordPress.
Also read: How to install WordPress locally
By using Custom CSS you can avoid interacting with complex codes of your WordPress theme There are basically two ways to add additional style sheets into your WordPress site.
With the help of Theme Customizer
This is an inbuilt feature since WordPress version 4.7. One of the easiest ways only if you know how to code or you have CSS codes to paste. You just need to go to the theme Customizer and paste those codes. One massive advantage adding CSS in Theme Customizer is, you can see live changes in the preview window
Appearance >>> Customize >>> Additional CSS
With the help of plugins
This is a very easy way to add customs CSS to your WordPress site. You just need to install the plugins, although finding a good plugin to do this kind of tough job. That’s why I have shortlisted a few plugins to help select.
Simple Custom CSS is An easy-to-use WordPress Plugin to add custom CSS styles that override Plugin and Theme default styles.
- Customizer Control (live preview)
- Useful Code Syntax Highlighter
- Code linting (error checking)
- No configuration needed
- Simple interface built on native WordPress UI
- Supports PHP 7.2
- No complicated database queries
- Thorough documentation
- Allows Administrator access on WP Networks (Multisite)
CSS Hero is a very powerful tool to easily customize the look of your site, with an easy and intuitive point and click interface. It would definitely impress your audience. It helps both pro and average users to customize their site like never before. A few of its Powerful features are like instant gradient generation, intelligent color palette, easy user interface.
One major advantage of adding CSS using plugins is, CSS code stayed forever with you till you manually delete those or delete the plugin. But if you are adding Custome CSS through Customize >> Additional CSS then there is always the risk of losing you Custome CSS with the theme change or even with updating the theme
How to add Custom CSS in blogger
- Go to the Theme section
- Click the Customize on your selected theme
- Click on Advanced option
- Scroll Down
- Click on Add CSS option and see the live changes in the preview box below
Best Custom CSS codes for your site
Now it’s time to provide you some CSS snippets. These are simple codes, you just need to paste these codes into your site and then boom! you can see drastic changes in your site.
Add Shadows to the Images
Simple plain images on any website look dull and boring. But with this Custome CSS, you can easily change images from boring to eye-catching. this CSS code simply add Shadows to images in your blog post. #C0C0C0 in the below Custome CSS code is the color, you can put any color in here, I suggest any dark color like grey or black would be nice.
.post img {
border:1px solid #C0C0C0;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}
Change the shapes of the images
Few updates back WordPress only allows rectangle shape images, but now you can easily change the image style from rectangle shape to circle shape. The only issue you could face is, sometimes you need to images in other circle shape variants like egg or oval shape
Simply edit below CSS according to your needs, Change the radius percentage from 0-100%.
.circle-image {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}
You should only provoke CSS code for the image which you want to show in circle shape, to do so just call the circle-image class for that specific images in the HTML edit mode.
Change background colors of headers(h1,h2,h3,h4)
By default, WordPress doesn’t allow you to change the background color. if you think they allow you to change colors then you might be mistaken by header font color with headers background colors. go check out, there is a provision to change the background color of the paragraph but not the headers
To do so, just copy the CSS code below and paste it additional CSS. Although working of this CSS is highly dependent on your theme.
Code is a very simple one-line yet very effective, you don’t even need to copy the code, just type in.
header
{
background-color:#F6370E;
}
h2 {
color: #68EB60;
}
h3 {
color: red;
}
p {
color: blue;
}Before and after Selectors using Custom CSS
Before & After Selector is used when you want to add some text Before or After the header or paragraph. These selectors are simply used to draw the attention of users. you could change colors of the text according to your theme style.
h:before {
content: "Attention:have a look>> ";
color:red;
}
p:after{
content: " -Read more… ";
color: green;
}Changing the Color Scheme of Widgets
Sometimes changing colors of the widgets like their body color and tittle color gets tricky, easiest is way is to use the Custom CSS Codes.
In CSS simply call widget and Widget tittle to change the colors. You could even redefine the other properties of the widget like height, width, font family.
.widget {
background: red;
}
.widget-title {
background-color: blue;
}Disable right click and stop others from copying using CSS codes
Sometimes you need to save your content from getting stolen, to do so just paste this code in your additional CSS customizer.
With the help of this CSS, no one could select and copy the text content from your website. But it would only save you from naive content thieves, advanced or even a person with basic knowledge of web developing could stile copy your content via inspect element
body {
-youbkit-touch-callout: none;
-youbkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}- user-select is well-defined property of CSS, if set to none, it disables the selection of the content
- youbkit-touch-callout is for iOS Safari
- youbkit-user-select is for Chrome 6.0+, Safari 3.1+, Edge & Opera 15+
- moz-user-select is for Firefox
- ms-user-select is for IE 10+ and Edge
- user-select is Non-prefixed version, it is currently supported by Chrome and Opera browsers
Add Avatar image with Custom CSS
Most of the themes happen to include the Writer’s bio(about the author) at the end of the article. but if you have chosen and finalize the theme which doesn’t include the “about the author” section, then you could create your own with the help of Custom CSS
One major advantage is, you can include Avatar with author information wherever you want in the article.
You can directly upload a new image or just provide the URL link of the image. To find the URL of the images, go to the media library. Name the class as Avatar which will be called in CSS.
<img src="image" alt="Avatar bio" class="avatar">In the below CSS, define the height and width as you wish, Border-radius property is used to add round corners to the rectangle shape image and make it perfectly round.
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}Summarizing
I have only covered the basics of CSS and a few Custome CSS codes, which could enhance the looks and feel or your site. I will keep updating this article with more tips and tricks on CSS, its functionality, CSS selectors, a combination of CSS and Javascript, and Web development. but If you want to learn from the basics of CSS and Web Developing then Visit my friend’s blog Technical blog. She has provided everything that you need to know about Web development like HTML, ADVANCE CSS, and Javascript.
I must confess that I love this post. I’ve scheduled to go through it one more time.
Very informative
Authentic Information
Informative keep sharing like this type of posts it really heps to understand.
Very informative as always
All your articles are very useful
thanks for sharing. i will use this in the future
Good information
Informative
Very helpful and informative.
Really helpful information for beginner in blogging field👍
wow you give us significant knowledge thanks veer
I really like it keep it up 👍👍👍
Thanks for sharing your knowledge
Great source of knowledge.. really a very informative article . It is very helpful.. thanks for sharing this article with us
Thanks for this knowledge
Nyc work
Informative and interesting..
wow perfect i love it and i will share it with friend
This is very helpful for those who are new in the blogging field and don’t have much knowledge of WordPress.
Realy good artiicle
good nd informative article