codenart.github.io

Everybody knows that HTML is a simplified version of English. It helps us to talk to web browsers. With HTML, we can tell web browsers to display any type of contents (links, images, buttons, etc…). But none of HTML tags can help us to tell web browsers how to display those content aesthetically.

There is no disappointment in this truth. HTML...

In the previous tutorial, we’ve seen how CSS Selectors work in basic. We simply use HTML tags’ names to select elements. They are nice for styling common stuff like paragraphs, article’s headings… But sometimes we need to give some specific elements unique styles. To make it possible, CSS allows us to select a specific element using its id.

Let’s write some...

Colors are used with many Properties to style text, element’s background, element’s border, etc… The most simple way to specify colors in CSS is using color-names. You can take a look at the color list here: Full list of supported color-names

Let’s write some CSS code using color names.
As I’m not having good...

In the previous tutorial, we’ve set size of some div containers using width and height properties. But if you try to do the same thing with an element created by <a></a> tags, you will see that it just doesn’t work. It’s because the default container type of the <a></a> element does not allow us to set size...

We’ve used the background-color property some times in the previous tutorial. This time we’re gonna set an image as background of a container using background-image property. This is the syntax of the property:

background-image: url(path-to-image);

The path to the image depends on if your image is stored locally or somewhere else on the internet. In the example below, we’ll use...

There are 4 properties which can help us to quickly create borders around containers:

• border-top
• border-right
• border-bottom
• border-left

And here is their common syntax:

border-left: 5px solid Black;

The first value 5px is width of the border;
The second value solid is the border’s style;
And the last...

There are 4 famous properties which can help us change position of an element and move it around. They are so powerful that people call them the gang of 4:

• top
• right
• bottom
• left

But, in order to keep our content well ordered by default, web browsers silently make all elements’...

We’ve used the font-size property a few times to change size of text contents. And here are some other commonly used font properties:

• font-weight - bold/normal text
• font-style - italic/normal text
• font-family - specify font family

Let’s write some CSS code to see them in action.
We’re gonna create some paragraphs:

• The first paragraph is bold,...

If you wonder why we’ve not talked about combining CSS selectors at the beginning, I’ve to say it was my bad. I’ve just missed these stuff for… no reason. :D

In every aspect of life, our most naturally way to learn anything, is not going on a straight line. Our paths are always spirals; seamless and continuity spirals.

A spiral:...

Pseudo-classes are not something new. I call them pseudo selectors. They help us to style elements base on elements’ state. Every pseudo-selectors begins with a colon :.

Let’s take a look at the example below. The selector :empty will select every elements which is empty.

CSS code:

HTML code:

That word, auto, it sounds smart. Do you think so? :D
It’s our nature to love something which is automatic. I love automatic dishwasher, automatic coffee machine, automatic cat feeder, etc…. And here, in CSS, we have the auto value. This value will tell web browsers to automatically calculate suitable values for our CSS properties.

Let’s assume that we...

Controlling spaces is the most important technique in every aspect of life.
In CSS, controlling spaces help us to quickly size up and position elements.

There are some properties are used to control spaces inside and around containers:

• padding properties - control spaces inside containers
• margin properties - control spaces around containers

The...

Let’s take a look at the following example. If you resize your web browser window to make its width smaller than 600px, the background will be red. Otherwise, the background will be yellow.

CSS code:

HTML code:

Result:

Click here to see result

As you noticed, there are 2...

From the very early tutorials, we’ve met many free & cool stuff: Atom Editor, Github Pages, Free Images Hosting, etc… And now, we’re gonna add some more things to the list. :D

A framework is free code that is shared by skilled developers to help us build things easier. Just imagine that you were the code star, you’d have created common components:...

The transition property can help us to easily add transition effects to interactive components. We only need to specify which property will be changed and transition duration using the following syntax:

transition: property duration;

We also note that there are many CSS properties which are not animate-able: List of animate-able CSS properties.

Let’s make an example to...

Just start with a simple example; I’ll introduce the property and explain everything after you see the actual code. The example below will implement a simple animation. We’ll have a box move from the left to the right and its background color also smoothly change from red to blue.

HTML code:

CSS code: