Learn how to create links, lists, tables in CSS

By learning CSS, you can avoid the repetitive use of HTML code, which can save your time a lot and also keeps your work organized, which is of a great importance, and with the introduction of different programming languages ​​and also the importance of being updated regularly, site designers can spend more energy to design different sites with more features and ultimately be able to provide better results as well as facilities to their users, so in this article we will mention some tips on how to build links, lists and tables using CSS, but first we are going to define CSS.

What is CSS?

It stands for Cascading Style Sheets is a language which was created to shape and make a website as well as web pages and its internal components, and it is one of the main tools for web designers, along with HTML, JavaScript, etc., which is being used a lot.

How to create links in CSS?

Links are very important in the content of a site, and it is necessary to increase your knowledge about linking and related topics,

existing links can be designed in different ways depending on their states, which in the following we will discuss more about this, in general the four links states are:

- a: link:

One of the types of links that we need to mention is this type which includes all links that are normal and unvisited.

- a: visited:

This is another type of link that, as the name implies, includes links that different users have visited.

- a: hover:

In this type, the users hit the link with their mouse, but they do not click on it.

- a: active:

It refers to the exact time when the user clicks on the link.

It should be noted that if you wanted to use multiple link modes in CSS at the same time, a: visited must be followed by a: link or a: active must be followed by a : link, a: visited and a: hover.

For example:

/ * unvisited link * /
a: link {
color: red;
}

/ * visited link * /
a: visited {
color: green;
}

/ * mouse over link * /
a: hover {
color: hotpink;
}

/ * selected link * /
a: active {
color: blue;
}


Text Decoration:

Links can more beautiful by removing the lines below them which gives a beautiful and appropriate look to the content, if you want the explanation of the 4 states that a link can have which we have explained each of them earlier, you need to do the following.

a: link {
text-decoration: none;
}

a: visited {
text-decoration: none;
}

a: hover {
text-decoration: underline;
}

a: active {
text-decoration: underline;
}



Background Color:

Another thing that can be changed in relation to the links and caused a link to be displayed in a way that we want, is its background color, which in order to change this, as in the previous case, you can write simple code, and you can do this in a way that the users can realize that the link currently exists in which of these 4 positions.

a: link {
background-color: yellow;
}

a: visited {
background-color: red;
}

a: hover {
background-color: green;
}

a: active {
background-color: blue;
}



There are some examples of coding for links which have been mentioned above, each of which is for a separate feature for the link, but imagine that you want to determine multiple features such as color, background color, no line below the link, and so on, in order to do this, you must do the following.

a: link, a: visited {
background-color: # 0000ff;
color: Blue;
padding: 13px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a: hover, a: active {
background-color: yellow;
}




Another example:

a: link, a: visited {
background-color: green;
color: blue;
border: 2px solid green;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a: hover, a: active {
background-color: red;
color: white;
}





How to create lists in CSS?

Lists can be very helpful to a user who has come to your site, and you want to see, a complete list of all your products, or a list of product prices and thousands of other lists, each of which may be used for an application, there are generally two main types of listings in CSS, which are as follows.

- Unordered Lists:

This link is called

in coding and all items in the list are indicated by bullets, for example consider the list below which is an Unordered List.

o Chocolate cake

o Strawberry cake

o Vanilla Cake

▪ Chocolate cake

And Strawberry cake

And Vanilla Cake

- Ordered Lists:

This link is also indicated by

and the items in the list are indicated by letters or numbers, an example of this list is given in the following.

1. Chocolate cake

2. Strawberry cake

3. Vanilla Cake

I. Chocolate cake

II. Strawberry cake

III. Vanilla Cake

List-style-type:

One of the features that can be changed in these lists according to your decision is that you can choose what to use next to the items in your list, for example in Unordered Lists, someone may select items that the members of the list should be shown with a square and so on, which we have given you an example in this regard below.


ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-novel;
}

ol.d {
list-style-type: lower-alpha;
}


List-style-image:

Another feature that these lists can have is that they use different images to show the items in the list, in which case the following command can be used to achieve this goal.

ul {
list-style-image: url ('smiley.gif');
}
ol {
list-style-image: url ('sqpurple.gif');
}




List-style-position:

This will help you determine where you want each of the markers on your list to be, the position of them may be as follows.

- outside:

In this case, the markers in the list are in a position outside the existing list frame.

-  inside:

In this case, the markers that are placed next to each of the list items are inside the list frame.

ul.a {
list-style-position: inside;
}

ul.b {
list-style-position: outside;
}


List-style-type: none:

By default, there are a number of features for this type of list that you may not want, you need to modify them with the help of the following code.

ul {
list-style-type: none;
margin: 0;
padding: 0;
}



List-style Shorthand property:

If you want to specify all the attributes that a list can have which you can specify them in relation to a list, you need to do the following.

ol {
list-style: circle outside url ("sqpurple.gif");
}



Create color lists:

As you know, the ultimate goal of all this work is to attract more users, so you can make the existing lists colorful, so that you can attract more users to your content, it should be noted that if you do not want the whole list to be colored uniformly, you can use the

1. tag, in which case each item in the list will be colored separately.

   for example:

   for example:
ul li {
background: # ffe5e5;
margin: 5px;
}



   How to create tables in CSS?

   It is possible for you to use it to create an attractive look for the tables in your content, which we will explain in more detail below, it should be noted that there are two elements in tables, and .

   Table Borders:

   One of the features that can make the tables beautiful is their borders, for instance, you can choose a blue border for your table:

   table, th, td {
border: 1px solid blue;
}


   Full-Width Table:

   Another feature that you can use in order to get the user's attention is to draw tables that take up the entire width of the page instead of creating small tables.

   table {
width: 100%;
}





   

   Last word:

   In general, with the help of CSS, you can create a beautiful and attractive appearance for your content, in this article, we have taught you how to create links, lists and tables with the help of CSS, which you can use the mentioned tips according to your needs in order to create an attractive website which can get a high ranking in search engine results page due to the fact that it has the ability to attract users.