How to make a fancy header with CSS for a web page

The world of web design has grown impressively thanks to the development of spectacular tools that collaborate with a versatile and totally striking design . An important aspect would be to make and develop an elegant header through CSS for a web page. Being a main element of companies to increase sales and expand.

However, web pages have also been transcendental by positioning themselves as alternatives for companies dedicated to the dissemination of information. The vast majority of the media have put aside the marketing of newspapers and magazines and promoting their digital portals .

HTML as the main weapon

However, not only large digital media have used web pages. Many people have started personal projects for informational web portals , not necessarily as a newscast, but a space in which they can share their knowledge of health, beauty, computing, engineering, among many other things.

For this, having full knowledge of the language or HTML code is essential, since it is what will allow you to shape the backbone of your web page.

However, the demands of users were increasing, making it necessary to develop new ways to make a website more attractive .

Customize your website with CSS

Faced with this situation, a wonder arose that continues to be positioned as a highly effective measure used by the vast majority of web designers: Cascading Style Sheets , also known as CSS.

This language, which is part of HTML, is an extraordinary option for customizing the styles of a web page, giving you the possibility of doing really sophisticated and beautiful things.

What it is capable of

In addition to offering you a great capacity for customization of your web page, the CSS language also improves the performance of your platform, making your life easier when it comes to making the necessary adjustments so that your site is compatible with desktop and mobile versions.

The biggest advantage, without a doubt, is that CSS requires less code than HTML itself, so giving your page a makeover will take less time compared to the traditional way, capable of even designing a tag cloud for your website .

Style your header

In short, the CSS language has been a blessing for all those who have dedicated themselves to the structuring and design of digital platforms, a tool that, without a doubt, has allowed them to make customizations to the sites in such a prominent way that not only It attracts users, but it becomes one of the favorite sites of many people.

If this is what you want to achieve, then you will only have to copy and paste the following CSS code, which will help you style not only your header or title, but all the other sections (h2, h3 and h4) of your articles :

  • h1 {
    •   color: # 6c2eb9;
    •   font-weight: normal;
    •   font-size: 40px;
    •   font-family: Arial;
    •   text-transform: uppercase;
  • }
  • h2 {
    •   color: # 3c1b66;
    •   font-weight: normal;
    •   font-size: 35px;
    •   font-family: Arial;
    •   text-transform: uppercase;
  • }
  • h3 {
    •   color: # 443963;
    •   font-weight: normal;
    •   font-size: 30px;
    •   font-family: Arial;
    •   text-transform: lowercase;
  • }
  • h4 {
    •   color: # 4f4866;
    •   font-weight: normal;
    •   font-size: 25px;
    •   font-family: Arial;
    •   text-transform: lowercase;
  • }
  • h5 {
    •   color: # 656172;
    •   font-weight: normal;
    •   font-size: 20px;
    •   font-family: Arial;
    •   text-transform: lowercase;
  • }
  • h6 {
    •   color: # 747377;
    •   font-weight: normal;
    •   font-size: 18px;
    •   font-family: Arial;
    •   text-transform: lowercase;
  • }

Important familiarization

Now that you have the code you need, it is important that, when taking a look, you relate to the elements that are within the language, so you will know what you can alter or change:

  • “Color” for the colors you want to display in each of the titles.
  • “Font-size” to indicate the size of the titles.
  • “Font-wieght” if you want the titles to appear in bold.
  • “Text-transform” so that the headings are displayed in lowercase (lowercase letters) or uppercase (uppercase letters).
  • “Font-family” the font to use (Times New Roman, Arial, etc.).

Simple and elegant!

Now that you know how to make a fancy CSS header for a web page, all of your headers will look amazing. That is why it is important to have full knowledge of all the benefits that handling all these codes well can bring you to make your website one of the best sites,

 

Leave a Comment