How to Make a Elegant CSS Header for a Web Page (Example)

The world of web design has grown impressively thanks to the development of spectacular tools that collaborate with a versatile and totally eye-catching 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 mass media have put aside the marketing of newspapers and magazines and promoting their digital portals.

HTML as the main weapon

Now, not only large digital media have used web pages. Many people have started personal projects to informative 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 forms of 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 and used by the vast majority of web designers: Cascading Style Sheets (cascading style sheets), also known as CSS.

Customize your website

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

What it is capable of

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

The biggest advantage, without a doubt, is that CSS requires less code than HTML itself, so give your page a change of appearance it will take less time Compared to the traditional way, able to even design a tag cloud for your web page.

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 personalizations to the sites in such an outstanding way that not only does it attract users, but it also 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:

Important familiarization

  • “Colour” 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” for headings to display 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. This is why it is important to have full knowledge of all the benefits that the handle all these codes well to make your website one of the best sites,

Source by

Deja un comentario