#css iframe

1)- What is an array?

An array is a variable in JavaScript used to store data. Arrays are used when we have a large list of data and we want to store it to access it one by one.

For more information about arrays, how to create them in JavaScript and how to add, remove elements and join multiple arrays please check the following tutorial: https://purpose-code.com/javascript-arrays-how-and-what/

2)- How to loop through an array?

1)- For loop

To loop through an array the 1st common method is to use the for loop method.

The for loop method will run through the elements of the array, but it does not look for the element itself, but for its index/position in the array.

Let’s take an example to see how for loop works exactly.

To continue reading you can check the complete article below:

absolute and relative position properties are used a lot in CSS and seem to be doing the same work, which is positioning an element in the page. But in reality, they’re different.

In this tutorial we’ll see how each one of these properties work.

1)-First difference

a)- absolute position

Let’s just take a simple html page that contains 4 <div></div> tags one inside another. These <div></div> tags have a width, height and a background-color.

The HTML code will be:

And the CSS code is:

the display flex property is just to center the boxes vertically one inside another. So at the end we’ll have:

Now let’s apply the position absolute to the small blue box, which means box 4.

So the CSS code becomes:

If you refresh the browser you will not see anything changed. Why? Because the absolute position needs top, bottom, left and right values.

let’s position this blue box at the top left corner of the green box. For that we’ll set the top and left to 0px and see what will happen.

The CSS code will be:

So in the browser we’ll have:

Wow, what’s this! This is not what we want at all ! Why did the blue box move to the top left corner of the page instead of the top left corner of the green box ?

Well, it is because when applying the absolute position to an element, It positions itself to the closest parent that has already its position set.

Here in this example, none of the 3 remaining boxes (light blue, red, green) have their position set. The default position that they have is unset.

So the small blue box did not find any parent element to position itself to, so what it did it positioned itself to the body.

Now, if there was a parent element with a specific position already set, let’s say the position of the green box (which means box3) is set to absolute:

We would have had the results wanted:

Let’s say now that we want to position the blue box to the red box, so we will add the absolute position to the red box (box 2) and remove it from the green box. Because if we keep the absolute position in the green box as well, the small blue box will position itself to the the closest parent it finds that has the absolute position.

So the code will be:

In the browser we’ll have:

b)- relative position

Now let’s change the position type of the blue box and set it this time to relative instead of absolute. Also let’s give it a top value of 10px and a left value of 20px.

So in the browser we’ll have:

As you have probably noticed, the blue box this time positioned itself to its origin, and not to a certain parent element as with absolute position. And this is the difference between absolute and relative positioning.

You can add absolute or relative position to any parent box you want, this will not affect the positioning of the small blue box.

Because relative position cares only about the origin of the element, and not about a certain parent element position like absolute position does.

2)- Second difference

a)- absolute position

Now let’s take 3 boxes, or 3 <div></div> tags that will be aligned one next to another. Each box has a background-color:

To continue reading check my tutorial:

What is a border?

A border is a set of lines that surrounds an element. We can see that a lot with images. Images often have a border, either a rectangular border or a circular border.

How can we add borders and style them?

To add a border to an element in CSS all you have to do is to use the border property.

Let’s say that we have a paragraph in HTML.

Which looks like this on the browser:

Now we want to add a border to our paragraph. To do that we have to define first the style of the border.

There are many styles that we can choose from. Below a list of some styles:

solid

inset

outset

dashed

dotted

ridge

In this example we will choose solid style. The CSS property we’re going to use is border-style.

The code for this is:

To continue reading you can check the entire article here:

How to change a list style?

For both ordered and unordered list, to change a list style type all we have to do is to use the list-style-type CSS property.

Let’s say that we have the list below:

To apply a list-style-type to our list we’ll use the following code:

To continue reading you can check the entire tutorial here: