Fonts, Style and Layouts tutorial in HTML

There are many programming languages ​​that different programmers use in order to achieve their goals, to be able to gain the necessary expertise in each of these languages, you need to learn the different features that exist in each of them, one of these languages ​​is called HTML, which actually stands for Hyper Text Markup Language, through which it will be possible to give the browser information about how to display content, simply put, it consists of a series of elements which ultimately describes the structure of a web page, in this language, like all other ones, there are various features, some of which we are going to mention in the following.

Fonts:

In fact, this item, as its name implies, is used to specify the font of an HTML element, more precisely the CSS font-family property defines the font used for an

HTML element

, so that for a better understanding, note the following example in this regard.

The result of the above example will be as follows.

This is a heading

This is a paragraph.

Fonts are very important in a content, and you can use the best and the most appropriate fonts for different elements by being aware of the different types of them, so that the users can be more attracted to the different parts of the page, as a result, they

can gain a good user experience

.

Styles:

This feature is generally used to add style to various elements, for instance, you may add color, font, size, and so on, to existing elements, with the help of this item, you can make the content as effective as possible, now consider the following example.

The result of the above example will be as follows.

I am normal

I am red

I am blue

I am big

Style Attribute:

Style adjustment is possible with the help of the available features, in the following, we are going to deal with the various cases in this regard.

Background Color:

This feature can allow you to highlight items that are more important,

the CSS

background-color property defines the background color for an HTML element.

Consider the following example.

Color:

By using this feature, you can determine the color of the text.

The result of the above example will be as follows.

This is a heading

This is a paragraph.

Font-size:

Another thing you can specify in a content is the size of the text.

The result of the above example will be as follows.

This is a heading

This is a paragraph.

Text Alignment:

You can also use this feature to align text horizontally, for instance, you might specify that a text be placed to the right, left, or center.

The result of the example will be as follows.

Centered Heading

Centered paragraph.

Layout Elements:

Each web page has different parts that in order to create them, it is necessary to use different semantic elements that exist in HTML, in the following section, we refer to some existing semantic elements.

-  header:

Each section or different document has a title, the header is used to express the title of each document.

-  nav:

Another different part that exists, is navigation links, which are specified by the nav semantic element.

-  section:

As the name implies, this element is used to introduce a section in a document.

- article:

This element is used when you want to define an independent content.

-  aside:

This element is used to express content aside from the main content.

- footer:

You are surely familiar with this element and have heard of it before, this element is used to create footnotes in a document, and it is possible to give complete information to

users who visit your site with the help of this element

.

- details:

In some content you may sometimes need to add items that if the user wants to open or close it, you can add additional details that you want which can help users a lot to get a better experience of using the site and content.

- summary:

This item is used to express the title of the details element, in general, in order to create a multi-column layout, you can use different methods, and you should pay attention to choose the right one depending on your goal, in the following we are going to explain the four different methods that exist and also the pros and cons of each method.

- CSS Frameworks:

You can use this if you want to save time and create a plan quickly.

- CSS Float Layout:

You can use it if you want to

do a general web layout

, in order to be able to act properly in each of these cases, you need to carefully learn the points in each, as we have mentioned earlier, each of these methods has its own advantages and disadvantages that need to be carefully investigated, in this case, the disadvantage is that the floating elements are connected to the document stream, which may impair flexibility.

Note the following example, which is an example in this field, one of the ways to learn to code in each of

the programming basics

is to be able to pay attention to the existing examples and practice a lot for a better understanding.

- CSS Flexbox Layout:

Today, users may use different devices in order to connect to sites and take advantages of different content, which may eventually lead to the problem that

the pages of various sites

are not optimized for being used on each device, this item can be so helpful in this regard due to the fact that it will

optimize page size for being used on different devices

, now consider the following example in this regard.

- CSS Grid Layout:

This is one of the easiest ways to lay out different

web pages

, the CSS Grid Layout Module offers a grid-based layout system, with rows and columns, which makes it easier to design web pages without having to use floats and positioning.

Last word:

In general, HTML has a lot of fans who are very interested in this language due to the various features that exist in it, in this article, we have discussed fonts, style and layouts we hope this article can be useful for you.