The Easiest Way to Create a Gradient Background Using CSS – How to Learn SEO | Simple Blogger Tutorial

Modern website elements consist of HTML code, CSS, images and a choice of programming languages ​​to create websites such as PHP, Java and so on. In this post I want to share with all of you who want to know the easiest way to create your website/blog background using CSS gradient color. But before that, let’s talk about CSS first.

What is CSS?

Cascading Style Sheet (CSS) is a code that functions as a controller that regulates the components that exist in an HTML code or other programming language so that the coding results become better, attractive, simple through the structures (tags) contained in the CSS Code on the computer screen. we.

With CSS you can set:

  • Width, height of webpage
  • Number of web page columns
  • Web page background color
  • Type, size, color, font style used
  • etc
  • CSS regulates HTML, with CSS you can create various kinds of styles that you want according to taste without being limited. With CSS, the use of images that used to be widely used in the period before CSS was created is not widely used anymore.

    ID and Class in CSS

    In general, the use of CSS is grouped on the use of tags, namely ID or Class. The use of ID is usually used to generalize all the elements contained in the HTML structure and the new class is used when you want a different appearance as set in the CSS for ID. To use CSS Class we add <class=”name”> Example:

    This article uses CSS defaults to set the HTML attributes contained in the ID tag

    And this article was made using Class

     Code used:

    .contoh {text-align: center; color: red; background: black; padding: 10px 10px;}  

    You can add that code into the CSS you use

    Learn Complete and Detailed CSS

    It’s not enough for 50 website pages to provide a complete tutorial on how to use CSS, so you can directly learn CSS through

    Or you can also buy books on CSS and take Web courses so you can get the knowledge you want.

    How to Easily Create a Gradient Background Using CSS

    After you see an example of writing CSS using Class, it’s time to create a background gradient (Gradient background=website background color consisting of several colors) using a CSS background generator/creator online. A really easy and free way is to visit:

    CSS Gradient Background Maker

    With the help of CSS Gradient Background Maker, you can directly choose the color you want to use. You can choose the color using the color picker that has been provided on the website in addition to the styles that are already available, just click on it.

    Ultimate CSS Gradient Generator

    Just like the first CSS Gradient Background Maker reference, you just need to adjust your favorite color, customize it a bit and the css code is already available, just paste it into the CSS file used

    CSS and SEO

    Is there a connection between CSS and SEO? my answer is very close relationship between CSS and SEO. In SEO CSS we can use it properly and it can also be used improperly, for example: creating hidden text, hidden links and so on, which are then called BlackHat SEO techniques which I call the Traditional BlackHat SEO techniques, the legacy of the Ming Dynasty.

    Therefore, after you create a website using CSS, check your website on the page on this page we are not only notified if there are errors in writing but will also be notified if there is use of CSS that can cause the website is included in the website that uses the CSS Blackhat SEO technique

    CSS Tips For SEO

    Usually we put the CSS file into a sub folder that is in the themes folder if so then the code used in your HTML/PHP page is a “link” like:

    <link href=”css/menu.css” rel=”stylesheet” type=”text/css” />

    If it’s like this, the browser will work 2x, namely accessing your HTML page and CSS files that you save in different sub folders. It would be better if the browser only works once so that your website loads faster. The trick is to “inject” the CSS code into the HTML page.

    The application of CSS using this technique can be in the form of CSS, fonts that you embed from Google Fonts or even if you use web hosting combined using CDN technology.

    If you want to do this, you should learn the programming language first, backup the original files and only then do the customization.

    JAVA Script

    Be careful with this one because Java can cause the crawling process to be disrupted which results in the SERP. In addition, Java can cause the rendering process to be slower.

    Therefore, if you have to use Java in the form of a link, you should move your Java code to the footer so that the rendering process is faster. If you see the Zopim chat feature (which is made using Java) on this website I inject the java snippet from Zopim Live Chat into the footer div before </body>