There are several sites that users can use on a regular basis in order to get the answers to their questions, each of which has different appearances, which is what makes them attractive to different users, such as the virtual world where the user chooses a store, out of hundreds shops, due to the attractiveness of the shop design , as a site owner, in order to create an attractive design for your site , you need to increase your level of knowledge about CSS and learn the ways of choosing an attractive background for different pages, or you can use a readable and appropriate font in order to increase your site traffic , but before that we need to give you a brief and general explanation about CSS itself.
What is CSS?
CSS stands for Cascading Style Sheets which by being added to HTML through different methods, causes websites to be displayed in the best possible way, there are 3 ways to do this:
- External CSS:
By using this method, you can change the appearance of a site in the shortest time, it should be noted that, it is enough to change one of the files, which we will give you an example of it, in the following.
<! DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "mystyle.css">
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph. </p>
</body>
</html>
- Internal CSS:
This method should be used when a page has its own unique style, so that you cannot make a big change to it, in this case you can easily apply the desired changes through this method.
<! DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph. </p>
</body>
</html>
- Inline CSS:
In this method, it is also necessary to add the style attribute to the relevant element.
<! DOCTYPE html>
<html>
<body>
<h1 style = "color: blue; text-align: center;"> This is a heading </h1>
<p style = "color: red;"> This is a paragraph. </p>
</body>
</html>
CSS background:
Background in CSS has various features which are as follows: background-color, background-size, background-position, background-clip, background-image, background-size, background-repeat, background-origin, background-attachment, all of which will be explained briefly in the following.
- Background-color:
As its name implies, you can adjust the background colors with the help of this item, and it is necessary to be careful while choosing the right color, so you shouldn’t choose the color that makes the users not be able to use the website properly after a while, due to the fact their eyes will get tired of it.
body {background-color: white;}
- Background-size:
In order to adjust this item, you must specify the width and height, it is also possible to use the word “auto” in order to determine the size automatically, in addition, it is possible to use one of the items such as width and allow the length to be automatically determined.
background: url (hill.jpg);
background-repeat: no-repeat;
background-size: auto;
}
- Background-position:
As its name shows, it is used to set the background position, and you must use it to determine where the background should start, so you can use some words such as, left top, left center, left bottom, center top, etc., or use percentages, pixels and so on, in order determine the position of the background, there is an example of setting the background position for you.
body {
background-image: url ('HTML.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
- Background-image:
In order to set different photos in one element, you have to use this item.
body {
background-image: url ("img_ant.gif"), url ("book.gif");
background-color: #cccccc;
}
- Background-origin:
The background position area can be specified through this item.
{
border: 5px dashed white;
padding: 15px;
background: url (paper.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Text:
The text in a content is of a great importance for the user who visits your website, in CSS, the text is placed inside the content box of the element, this box should contain the desired text, also if you want to cut one of the lines, you need to use the
element, texts have the following characteristics:
- Font styles:
This feature is used to apply different properties to the font, for example, you may want to make the text lighter, smaller, etc., which you have to use some properties in order to achieve your goal.
- Text layout styles:
This feature is used to determine the distance between lines, words, etc., and sets all these items in the content box.
CSS font:
Font is also so important in designing a site , for instance, you can use a different font for a text which is more important, so that the users can notice its importance as soon as they see it, in order to aster this section, you must know font-style, font-variant, font-weight, font-family, font-size, etc., which we will explain a number of them in the following.
- font-style:
This item has different types that include, normal, italic, oblique, initial and inherit.
p.a {
font-style: normal;
}
p.b {
font-style: italic;
}
p.c {
font-style: oblique;
}
- font-variant:
This feature determines that the text should be written in uppercase or lowercase as well as their size.
p.small {
font-variant: small-caps;
}
- font-weight:
The size of different characters in the text is determined with the help of this item, this case has various properties that can be shown in the text with the help of the following values.
Normal:
It is used to specify normal characters in the text.
Bold:
It is used to indicate bold characters.
Lighter:
It defines lighter characters
100-900:
The numbers 100 to 900 are used to determine whether the characters are faint or bold, when a small number is used, it will be fainter, and the closer the number is to 900, the bolder it will be.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 800;
}
Another example:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}
- Font-size:
This item is used to determine the font size, which can be adjusted in different ways, for this setting, the following values must be used.
Medium:
This value is presented in font-size by default, and as its name implies, it has a medium size in that font.
xx-small
x-small
Small
Large
x-large
xx-large
Smaller
Larger
Length:
In this case, you have to adjust the font size in centimeters.
%:
In this case, the font size is determined as a percentage.
div.a {
font-size: 20px;
}
div.b {
font-size: x-large;
}
div.c {
font-size: 120%;
}
Another example:
div.a {
font-size: 40px;
}
div.b {
font-size: x-large;
}
div.c {
font-size: 150%;
}
Last word:
In general, website design should be one of the most important goals that every person has before creating a site , in order to create a site, you must have a lot of knowledge in this regard in order to be able to act correctly, the most important thing that can be used in site design is Cascading Style Sheets, in which different items can be used in order to design each item in a site, in this article, we have mentioned fonts, text, backgrounds, etc., which you can use to design a suitable and attractive site, and to design appearance of each character, letters, images, etc., you should use the available items.
Here we have tried to give examples of the ways of coding, and the ways of implementing the code, so that you can design a suitable site that attracts different users to the site which increases the traffic to the website , and the website ranking will increase as well, so that the site owners can see the result of their efforts and accuracy in creating the site and achieve success through this way, due to the fact that if you can attract more users, you will achieve your goal as soon as possible, because when your website is attractive enough, the users may decide to introduce your website to their friends, as a result, the number of your website users will increase day by day.
Canvas Rectangle, Shadow, Path and Text training in HTML
Best Backlink Checker And Linking Analysis Tools
The top 8 types of networks security attacks
Is it good to invest in apps, for having a passive income?
Getting started with Xamarin.Forms
Xamarin app programming Vs. Java app programming for Android
The hidden cost of the app before and after launch
Title, Meta description, Headings and Content for SEO
How to increase website visitors without spending a penny?
How long does an app takes to develop in average?
On-page SEO vs. Off-page SEO
How to create high-quality backlinks manually for your website
OFF-PAGE Seo, link building & how To avoid GOOGLE PENALTIES?