lthough WordPress makes it easy for ordinary people without programming skills to create, manage, and modify websites, it is very likely that a day will come when you need to make minor adjustments to some of the front-end code of your WordPress site.
Making these modifications will require you to familiarize yourself with the explanation of HTML and CSS, so it is necessary for you to become familiar with these two languages if you have a WordPress website, or if you want to create a website using it.
In this article, we will introduce you to the basics of HTML and CSS, their uses, show you how they work, and how to write code(s) using them. We will also explain the correct ways to modify HTML and CSS codes in WordPress so that you can make modifications to the appearance and appearance of the site.
Introduction to HTML and CSS
When you make the decision to start learning programming , the first thing you often start with is learning to develop user interfaces, because both HTML and CSS are considered basic technologies for creating websites (front-ends of websites in particular), as the former is concerned with the structure and structure of the web page, i.e. the elements. And the components that are present in it, while the second is concerned with the coordination of the page elements and the way they are presented.
What is HTML and why is it used?
The name of the HTML language is an abbreviation of the following words ( Hyper T ext M arkup L anguage) , which means in Arabic ( Hypertext Markup Language ), and therefore the HTML language is a descriptive markup language used to create web pages, and describe and identify the elements contained in these pages through what is called Tags, each of which either adds an element to the page or performs another purpose related to one of the elements on it.
For example, if you want to build a house in a space on the ground, you will need many objects to carry out the construction process, including various wall components, iron bars and cement that are used to build the roof of the house, columns, etc. If we liken the house to the web page that needs to be created, then HTML is the person whose job it is to bring the objects needed to create the house and put them in the correct order in it.
To illustrate the use of the HTML markup language in practice, let us take the following simple example: Suppose you want to build a web page that includes 4 sections (an upper section that includes the site name and logo, a lower section that contains a group of important links, and a middle section that includes an article and a table, in addition to another section next to it. Includes multiple lists). You will define page sections and add all the elements to each section including article text, table content, menu items, and various links using custom HTML codes.
What is CSS and why is it used?
The name of the CSS language is an abbreviation for the following three words ( Cascading S style Sheets), which means (Cascading Style Sheets) in Arabic. It is a formatting language used to format the elements that are displayed on the web page and determine the ways and forms of their appearance and the design in which they will appear in the browser, that is, it It is used to specify the colors and dimensions of elements, the width of their borders, their positions, and all other properties related to how they appear on the web page.
Returning to the example of building a house that we mentioned in the previous paragraph, if the house is a web page, the CSS language is used to determine the colors of the walls of the house, the shapes and spaces of the rooms, and their locations within the space of the house, in addition to the shapes of the objects in those rooms and their places, and other things. Features, that is, can be likened to the technique used by an architect and interior designer to plan and design the entire house.
To clarify the uses of the CSS language and what can be done using it, here is an image that shows the effect of adding CSS codes in the form of the HTML home page of a WordPress website in Arabic, where the upper part of the home page of a WordPress website in Arabic appears on the right of the image without using CSS codes (the elements on the page are shown Using HTML), while the left part shows what the page itself looks like after adding formatting codes to it to modify the shapes of its elements and beautify it using CSS.
We can see from the previous image the importance of the CSS language. The page in the right section, which is written using HTML only, lacks aesthetic elements and appears unattractive to the visitor, and therefore it does not encourage the visitor to browse the site and view its content.
While the page in the left section, to which CSS codes have been added to beautify the appearance of its elements, looks much more beautiful, and prompts the visitor to browse and view the site’s content.
So we conclude from the above that both HTML and CSS are complementary and important technologies for creating web pages and displaying them to the user in a beautiful, attractive and organized manner. Each of them has a specific function, and it is not possible to build a professional web page using one without the other.
It is important to point out that there are other basic programming techniques for designing and creating websites on WordPress , but we will not discuss them in this article, which are:
- JavaScript language: which is used to make web pages interactive, that is, to make the various elements of the page behave based on the user’s interaction with them, such as the font size becoming larger when the user places the mouse cursor over it, for example.
- PHP language: which is used for back-end development in WordPress and enables you to create and modify plugins and templates. Everything in plugins is enabled by PHP code, and all theme functionality is written in PHP. So learning it gives you great skill in developing WordPress.
The general appearance of HTML and CSS page codes
The code of web pages written using HTML and CSS has a general form, and when you read the code of a web page, you will often notice this form.
There are also several places where you can write CSS codes that define the various properties of the elements on the page. You may write within the same document in which you write HTML codes, which is called an HTML page or HTML Document, or you can write in another separate document and this document is linked to a page. HTML via custom code as we will learn later.
Before we explain the general form of HTML and CSS code, it should be noted here that the codes for both languages can be written within a regular document using any text editing program (Notepad, for example), but there are advanced programs that greatly facilitate writing codes, and the extension of the document in which the code is written is HTML is html. The document in which CSS code is written is css.
In the following paragraph, we will provide you with a pictorial explanation of how to create HTML and CSS files on your Windows computer using the Notepad application.
How to create HTML and CSS files
To create an HTML or CSS file follow these steps:
Create a new text document in the path you want (for example, on the desktop) in the usual way, that is, by clicking in an empty place with the right mouse button, then choosing the (New) command from the pop-up menu that appears, then clicking on the (Text Document) option.
The system will ask you to write the name of the document. Write the name you want, and change the file extension (what is written after the period) from (txt) to (html) as this image shows.
A dialog box will appear asking you if you really want to change the file extension (it is the same as the file name extension). Click on the (Yes) button.
The file name and extension will be modified based on what you entered, and Windows will recognize this file as an HTML document (i.e. a web page). You can now open the file using an Internet browser in order to view the HTML page as it will appear to the visitor if it is uploaded to the website.
If you want to access the HTML code of the page in order to view or modify it, you can do so by opening the document using a text editor (Notepad).
Of course, the document will be empty of code immediately after it is created, and the browser will display a blank page when viewing it.
To create a CSS file, follow the same steps as above, but write css instead of html as the file extension. But be aware that CSS files are files that define the properties of elements in an accompanying HTML document, that is, they cannot be viewed using the browser, but are linked to the HTML page via custom code.
Therefore, when you open an HTML document using the browser, the browser automatically calls the CSS files and applies the properties written in them to the elements in the HTML document, and thus the page is displayed in the way you specified using the HTML and CSS codes together.
The general form of HTML code
Web page code written using HTML consists of elements. One element may be embedded within another element, and each element takes one of two general forms:
Where (Start) represents the start tag, (End) represents the end or closing tag, (Content) represents the content of the element (which may include other elements within it), (Attribute) represents the name of one of the element’s properties, and (Value) that follows it represents the assigned value. For this property, the three dots (…) indicate the possibility of determining the values of several properties for a single element.
Note: The End tag name is the same as the Start tag name with the prefix / before it. If Start is h1, End will be h1/.
Second form:
or
The words in this figure represent the same things as they represent in the first figure. But note here that there is no end tag for the element that is written in this form, unlike the previous form.
Note: In the previous two figures, one or more properties may be written, or none may be written, and the properties that can be written vary depending on the element.
But there are some general properties that can be written in all elements, and some properties are optional and others are mandatory, that is, some are written when needed, and others must be written in order for the element to function correctly.
The general appearance of the CSS code
Regarding CSS codes, they are written in exactly the same way regardless of where you choose to write them (whether in the same HTML document or in another document), but the method used to determine that this code is CSS code for the browser differs depending on the way the CSS code is written. We will explain this later.
CSS code consists of rules, which correspond to elements in HTML. The form of a rule in CSS is as follows:
Where the word Selector here symbolizes the selector, that is, a word is written in its place that indicates that what will be written after between the parentheses {} will be applied to a specific element or group of elements present in the HTML document.
There are several ways to write the determinant. The word (Property) refers to a property in CSS, and the word (Value) refers to the value that we assign to the property.
Note that the property and its value are separated by two colons (:) and an English semicolon (;) is placed after each property value, and the next property is written after the semicolon.
Examples, explanation, and more definition of the general form of HTML and CSS codes
Based on the above, an HTML document consists of a set of elements (Elements) according to what the web page needs. These elements do not necessarily have to be the same for all pages, and a CSS sheet consists of a set of rules (Rules) as needed.
Each of the following is an example of elements in an HTML document:
<title>Page Title</title> <p id=”prf”>My paragraph</p> <h1>My Heading</h1> <body><h1>My Heading</h1><p>My paragraph.</p></body>
In the first three examples, the words colored blue are the beginning and end tags of the elements, and Page Title, My Paragraph, and My Heading represent the content of the element.
As for the last example, we have an element with two elements inside it, so what is colored in blue are the start and end tags of the element that contains the other two elements, and the other two elements with their contents and labels (the tags of these two elements are colored in yellow and pink) constitute the content of the element that contains them.
Each tag performs a specific task, which is to insert an element on the page. For example, the p tag adds a paragraph to the page, meaning that the content written between </p< and <p> is added to the page as a text paragraph, while the h1 tag inserts A title on the page, i.e. what is placed between <h1> and </h1> is added to the page as a title.
Notice in the following image how the web browser (Google Chrome) displays the second and third items from the previous four examples.
We’ll later explain all the important tags in HTML, including tags for lists, tables, images, hyperlinks, and more.
Here are two examples of the rules that make up CSS files:
p {background-color:red; color:white;}
h1 {background-color:green; color:red;}
In the previous two examples, each of the two rules applies a set of properties to specific elements in the HTML document. The first rule is applied to the paragraphs on the page because the determinant p is written at the beginning, and this determinant is specific to paragraphs in the HTML file. As for the second rule, it is applied to Headings are h1, the h1 delimiter is placed at the beginning.
There are two properties mentioned in the previous two examples. The first property is (background-color), which specifies the background color of the element. In the first example, this property took the value (red), and thus the background color of the paragraphs in the HTML document when it is displayed using the browser will be red, and in the second example. The property has the value (green) so the background color of the h1 headings will be green.
The second property mentioned is (color), which determines the color of the text in the element. Therefore, the color of the paragraph texts in the HTML document will be white because the property took the value (white) in the first example, and the color of the h1 heading texts will be red because the property took the value (red) in the example. the second.
Notice how the previous HTML document appears when viewed in the browser after linking the CSS file containing the previous two examples to it.
It should also be noted that there are many properties in CSS that can be applied to HTML elements to change their properties, and we will mention the most important of these properties later.
The most important elements in HTML
We mentioned earlier that an HTML page consists of elements, and each element always includes a start tag, and often includes an end tag, and the tag is what determines the type of element that will appear to the visitor in the browser. If you want to insert a table element into the document, you will use a tag (or a group of tags ) is different than if you wanted to insert a menu item.
In this paragraph, we will explain the most important basic elements that enable you to read and understand WordPress template files built using HTML, but at the end of this paragraph we will mention to you a source that includes all HTML elements and properties, a detailed explanation, and examples of them if you want to fully master this language.
But before explaining HTML elements, we would like to draw attention to the fact that HTML documents begin with the word (Doctype), and this is not an element or a tag, but rather a declaration (Declaration) that tells the browser which version of HTML was used to write the document, and each version has a specific form of this declaration. For example, the following statement tells the browser that this document is written in the most modern HTML version 5 code:
While this declaration tells it that the document is written in HTML 4.01 Strict:
html element
The html element is the root element in the document, meaning this element must include all other elements of the HTML document, which is why you will notice that all HTML pages look like this:
Metadata elements
These elements contain the document’s metadata (that is, their job is to identify it), including the document title, links to scripts, CSS file pages, and more. The following table shows the most important metadata element tags in HTML:
| <head> | This element encapsulates other metadata elements, that is, it acts as an envelope for other elements that describe the document. |
| <link> | This element is used to link HTML documents to their CSS files, but can also be used more generally to specify the document’s relationship to any external source. |
| <title> | This element is used to specify the title of the HTML page that will appear in the top web browser bar or next to the page icon in the tab. |
| <style> | The content of this element includes the CSS code that defines how the page, or at least part of it, will appear to the visitor. ( Note: CSS code can be used in this way by using an external CSS file and linking it to the document via the link element). |
| <meta> | This element is used to specify other page metadata, such as keywords, page author name, page description, and document character encoding. |
The previous descriptive elements are used within the HTML document, as in this example:
Explanation and comment on the previous example:
- head acts as a container for other meta elements, within which these tags are listed.
- title is used to specify the page title that will appear in the tab in the browser, as the title is placed between the start and end tags.
- meta in order to specify different metadata for the page. Note that the meta element does not have an end tag, and the metadata value is specified by the content property of the tag, while the data type is specified by the name property. The charset property is used to specify the character encoding of a document.
- link is used to inform the browser that there is a format file written using CSS linked to this document, where the rel property is given the value stylesheet to specify that the external file linked to the HTML document is a format file, and the href property is given a value equal to the path or link of the linked file. Note that the link element does not have an end tag.
- style in order to write CSS code inside an html document, as the content written between the beginning and end tags of the style element is code written in the CSS language.
Page dividing elements
There are some elements in HTML that are used to divide the page and organize its content, and the most important of these elements are shown in the following table:
| <body> | This element defines the content of the home page, and includes all other elements that appear on the page in the browser, including other segmentation elements, tables, lists, text, images, videos, and more. |
| <article> | It is used to identify a portion of the page that contains content that we may need to redistribute independently of the document, such as the entire article you are reading now. |
| <aside> | This element includes content that is somehow related to the main content that the user visits the page to view, and may, for example, include titles of other articles similar to the current article. |
| <footer> | This element is used to represent the footer of the item it contains or the footer of the entire document, and usually includes important site links, major site categories, contact information, and copyright information. |
| <header> | This element defines the header of a section of the page, or the header of the page as a whole, and usually includes the title, but can also include the table of contents, search section, etc. |
| <nav> | This element represents a section of the page designated for navigating within the current page, or for moving to other pages on the site, such as the table of contents of the page, or the main top navigation menu on the site. |
Note: All of the above elements have a start and end tag, because they represent specific sections of the page.
This image shows what each of the previous elements on the page represents as they appear in the browser:
In the previous image, we would like to draw your attention to the fact that all the elements within the rectangle that refers to a specific section are within the start and end tags assigned to that section. For example, all the elements within the rectangle that refers to the section footer are within the start and end tags of the tag > footer< in HTML code.
Note: The body element represents the entire page and includes all other sections of the page. One example of the sections it can include is the top section in the previous image, which is the content of the <header> tag, which includes the site logo, the top menu, social media account icons, and the search button, which appears in the following image.
It is also worth noting that there is an important element called div, and this element is used to contain other elements and helps divide the page as well.
This element does not represent a specific section such as the header, footer, etc., but rather it can be used to represent any section of the page and in any place. This element is one of the most used elements in any web page, because it helps organize data, separate it from each other, and facilitates the process of formatting it. Using CSS language.
Heading elements
Heading elements in HTML are used to define titles on the page and highlight important topics in it. They are used to insert the article title, subtitles, etc. Headings in an Html page are important to the visitor as well as to search engines, as search engines use them to index the web page.
There are 6 elements for inserting titles in HTML, all of which have a start tag and an end tag, where the text title is placed between the two tags as the content of the element, and all title elements take the same form with the title tag number replaced.
For example, the first-level title (the primary title of the article, for example) has the h1 tag, the second-level title has the h2 tag, and the sixth-level title has the h6 tag. Note that the web browser shows the title with the lowest number in a larger font than the title with the smallest number. For example Example: The browser shows the following code, as the following image shows:
It should be noted that the font sizes of headings in an HTML document can be changed using CSS code using the font-size property.
Menu items
Several types of lists can be inserted into a web page using HTML, the most important of which are (numbered list and unnumbered list). The tag of the numbered list item differs from that of the unnumbered list, but the tag of the list item elements is the same in both cases. The following table shows the functions of the three main related elements. With lists in HTML.
| <ul> | It is used to insert an unnumbered (bulleted) list. It has a start tag and an end tag, and li elements that insert list items are placed within it. |
| <ol> | It is used to insert an ordered list. It has a start tag and an end tag, and li elements are also placed within it. |
| <li> | This element also has a start tag and an end tag, which is used within the ul and ol elements to insert an item into the list. |
To illustrate how to use the list in HTML, see the following code, then read the explanation below, then see how the browser displays it on the web page by default.
Explanation and comment on the previous code
Within the body element on the HTML page, we inserted a title (the largest countries in the world in terms of population) using the h2 element, and then we included a numbered list after it, where we specified the beginning of the list with the start tag of the element ol, and its end using the end tag of the element ol, and we included each A list item using the li element.
In the same way we insert another heading using the element h2, and an unnumbered list using the element ul.
The browser will show the previous code as in this image.
It is worth noting that the shapes of the dotted list points can be changed to other shapes or even deleted using the CSS language, and the locations of the list items can also be changed and placed next to each other instead of their default arrangement, one item under the other. You can also change the way the numbered list is numbered.
We would also like to point out that the HTML language supports adding another type of list called description lists, which are lists in which each item consists of a term and a description.
The dl element is used to insert this type of list, and the dt and dd elements are used to insert its terms. The first of them is used to insert the term, and the second to insert its description. The description appears in a way that differs from the way the term appears. The following example explains how to use description lists in HTML, and how this appears. Type of menus for the visitor.
The following code inserts a description list consisting of 3 items, each of which consists of a term and a description for it. The image after the code shows how the browser displays this list.
Explanation of the previous code
Within the body element, we used the h1 element to insert a first-level title, then we used the dl element to insert a description list, and within this element we included 6 elements, where we added the dt element, which adds a term, then the dd element, which adds a description to it, and we did this again twice more to add 3 items, each consisting of a term and a description.
The browser will show the previous code to the visitor, as in this image.
Table elements
In some types of websites and some pages in particular, it is preferable to include tables to organize data and make it easier to understand and display. There are special elements in HTML that allow a table to be inserted into web pages.
Typically, several elements within a main table element are used to define a table’s rows and cells and insert data into them. The following table describes the elements you may need to insert a table into an HTML document.
| <table> | This is the parent element that contains all the other table elements, that is, it has a start tag and an end tag, and all other table elements are placed in between. |
| <tr> | This element inserts a row or line into the table, is written within the content of the table element, and has a start tag and an end tag. |
| <th> | The th element inserts a title cell into the table (the bolded words in the middle of the cells at the top of the table columns). If you were comparing two things in a table (for example between HTML and CSS), you would enter both HTML and CSS at the top of their respective columns using this item. This element also has a beginning and an end tag. |
| <td> | This element, which also has a start and end tag, is used to insert a regular cell in the table, and the text in this cell does not appear bold or centered. |
To clarify table elements in HTML, here is the following code, which inserts a table with 3 columns and 4 rows, where the cells of the top row are title cells, and the rest of the cells are regular.
Explanation of the previous code
Within the body element in the HTML document, we inserted a table element to insert a table into the document, so we wrote the start and end tags for the element, and between the two tags we inserted 4 tr elements to insert 4 rows in the table, and within each element we added 3 th or td elements to insert the row cells in order, so translate The browser shows us the code to the result shown in the following image when the document is opened using it.
Notice in the previous image that the table appeared on the web page without any cell borders, and its default direction is from left to right, which is not appropriate for the Arabic language. The problem of orientation of a table or almost any other element in HTML can be solved by assigning the rtl value to the dir property of the element itself, the element it contains, or the body element.
In the previous code, assign the required value of the relevant property to the body element on the first line, so that the line becomes as follows:
Then save the HTML document, reopen the page with your browser or refresh it and see how the orientation (and location) of the table changes.
To solve the problem of the edges of the table and its cells not appearing on the HTML page, we use the CSS language. We create a CSS file and link it to the HTML document (we will explain how to do this later), then we put the following CSS code in it:
We save the changes made to the files, then refresh the page in the browser window, and notice that the borders of the table and its cell borders have appeared.
It is worth noting that there are many procedures that can be applied to tables in HTML documents, using HTML or CSS, but explaining them requires a separate article, so we will limit ourselves to the basic matters that we explained in this paragraph.
Image element
Images are an essential component of web pages, and almost no website is devoid of images because of their many benefits, including clarifying ideas, condensing texts, and so on. That is why HTML provides the ability to easily insert images into web pages by using the img element, which has only a start tag. .
In order for the img element to recognize the image you want to insert on the page, you must specify its path by using the (src) property, and you can also specify alternative text for the image by using the (alt) property, that is, the general form of the Insert Image element in the HTML document It will be as follows:
It should be noted that the image path must be specified correctly in order for it to appear on the web page when it is opened. If the image is not located in the correct path that was specified, the browser will not show the image, but will show its alternative text in its place.
As an example of adding an image to an HTML document, here is the following code, which adds two images to the page, the first of which is present in the specified path, and the second of which is not:
The following image shows how the browser shows the previous code to the visitor:
We would like to draw attention to the fact that the width and height of the image can be changed by using the width and height properties within the img tag in HTML, and the dimensions can also be changed by using the same two properties for the image element in CSS.
The p element and the span element
The p element is used in HTML to insert a paragraph of text on the page, where the text of the paragraph is placed between the start tag and the end tag of this element. This element is usually used many times on each page, especially if the page contains an article, and a space is added before and after the paragraph by default in web page.
As for the span element, it is just a container element, meaning that it is used to contain text or another element, and is used for the purpose of grouping content or elements in order to facilitate their formatting using CSS, by relying on the class or id properties, as we will explain later, and the span element is similar to the div element, but there is A difference between them is that the span element is an inline element that reserves only a width appropriate to its size, while the div is a block-level element that reserves the entire available width.
It should be noted that the class and the id are two properties of HTML elements that help to format specific elements in the document using CSS. For example, if you are using 5 h2 elements in the document, and you would like to perform some formatting on only one element out of these five elements in document, you can’t do this by using the element name h2 because that would apply the formatting to all the h2 elements on the page.
So to format a specific element or two or more h2 elements on the page, we use either the class or id property. There is a difference between these two properties, as you can give more than one element the same class to apply the same formatting to all of them with the same code, but you cannot give more than one element the same id.
HTML elements are also divided – depending on how the browser inserts and displays the element on the page – into block-level elements and inline-level elements. Block level elements start on a new line in the HTML page, that is, if there is an element above them, they start from under that element and not on the same line, and they also take the full width available to them, regardless of the amount of width taken by the elements within them, and a margin is also added. It has a top and bottom margin, while elements on the inline level do not start with a new line, take only the necessary width depending on their content, and have no bottom or top margin.
To clarify all of the information mentioned above in this paragraph about the p element, the span element, and the class and id properties, here is the following code as an example:
Explanation of the previous code: Within the head element, we used the style element, which allows us to write CSS code for the page elements within the same file, that is, without the need to create a separate CSS file for formatting and linking the HTML document to it. Then, within the body element, we inserted two h1 heading elements, then two paragraph elements. p, and within the first paragraph element we included the phrase (creating websites) within the span element, while we included the same phrase within the second paragraph element but within the div element, in order to show the difference between elements at the embedded level and elements at the block level.
We also gave the class property assigned to each of the (heading elements h1, the span element, and the div element) the value (colr) in order to perform formatting on all of them at once using CSS. We also assigned the value (bigheader) to the id property of the first title element, and the value (smallheader) to the id property of the title element. The second is to format each of them separately with CSS so that the modifications we make to one do not affect the other.
As for the CSS code contained within the style element, it consists of 4 rules, each of which consists of a selector followed by parentheses that include a set of properties and their values, but the selector differs in some cases from others. The selector in the first and second rules begins with a hashtag sign (#). Because it is followed by the id value of one of the HTML elements. In the third rule, the determinant was a tag called h1. As for the determinant in the fourth rule, it began with a period (.), because it is followed by the class value of a group of HTML elements present on the page.
Here the usefulness of the class and id properties becomes clear, as well as the usefulness of the different forms of selectors. In the first rule, the formats (we mean the properties and their values) contained within the parentheses {} will be applied to the element whose id property value is (bigheader), that is, to the first header in this example, and in The second rule: Formatting will be applied to the element whose id value is (smallheader), that is, to the second header.
As for the third rule, formats will be applied to all h1 headings in the HTML document, and in the fourth rule, formats will be applied to all elements whose class property value is (colr), that is, to both the first and second headings, the span element located within the first paragraph, and the div element. Located in the second paragraph.
As you can see from the previous example: There are rules that must be followed when writing a selector in CSS. If this selector is the name of an element (for example, h1), we write it as it is, and if it is a value for id, we write a hashtag sign (#) before it, and if it is a value for class, we write it before it. a point (.)
This image shows what the CSS properties within the CSS rules in the previous code do:
See what the browser displays when it opens an HTML page containing the previous code, and notice how the CSS formatting is applied to the same elements we selected:
Hyperlink element
Hyperlinks are found on almost all web pages, and it is almost impossible to find a page without links that take the user to another page when he clicks on the phrase or word that includes the link. This is why the HTML language provides the ability to create links very easily via the hyperlink element (a). Where the text of the link that will appear to the visitor as content for element a is placed, that is, between the start and end tags of this element, while the link to which the user will be taken when clicking on this text is placed as the value of the (href) property.
For example, the following code inserts a paragraph into the web page, and when clicking on the phrase (WordPress in Arabic) in this paragraph, the user will be taken to the home page of the WordPress website in Arabic.
The browser will display the phrase (WordPress in Arabic) in a different way from the rest of the text in the paragraph, as it will have a line under it to alert the user that it includes a link that can be clicked. If you do not like its default appearance, you can format it as you want by giving it the id or class property and using CSS to change it differently. Aspects of his appearance.
The browser will display the hyperlink by default as shown in the following image:
Thus, we have finished explaining the most important elements in the HTML language, and we point out that there are many other elements that can be used in building the page, and they can be found and an overview of their uses in the Hassoub Encyclopedia.
Where to write CSS code
There are three ways HTML documents can be formatted using CSS, and they differ from each other in where the CSS code is written.
The first method: writing inside the tags ( inline )
The CSS code is written within the HTML element itself, where the code is placed as a value for the style property of the element. In this case, there is no need to include the selector in the CSS code, because the browser will automatically know that the formatting is specific to the same element in which the code is written.
Example:
Second method: Writing inside the file ( Internal )
The css code is written in the HTML file itself within the content of the style element, which is placed within the head element. This method requires writing the delimiter, where the CSS properties are placed in parentheses after the delimiter. Example:
Method 3: Writing to an external file (External)
The css code is written in a file separate from the HTML file. A file with the css extension is created and the necessary formatting rules are written within it. The HTML file is then linked to this file using the link element, which is placed within the head element. For example:
In this example, style.css is the path to the CSS file that includes the styling code. There is no need to write the full path if the file is located next to the HTML file (i.e. in the same folder), but it is sufficient to write the file name and its extension.
The most important properties of CSS
The CSS language includes hundreds of properties that allow us to format and modify various HTML elements on a web page. Each property sometimes takes one or several values, and the types of values that a CSS property can take vary. Some properties take numerical values, and others take Some are lengths, some are URLs, some are text values, some are colors, etc.
Of course, we will not explain here all the CSS properties because that would require a whole book, but we will explain the properties that are commonly used in designing and formatting HTML documents.
Colors properties
There are two important properties related to colors in CSS, which are the color property and the background-color property. The following table shows the formatting that you can perform on the element, and the values that it can take.
| Property | Description or usage | The values you can take | Examples |
| color | This property determines the text color of the element to which it is applied. | The value of this property represents a color, and there are several ways to write the color value. You can write the color name in English, use the hexadecimal color system to specify the color (HEX), or use the RGB color model. | ;color: Orange ;color: #ff6347 ;color:rgb(0,0,255) |
| background-color | This property is used to specify the background color of the element. | Its value represents a color as in the previous property. | background-color: Orange; background-color:#ff6347 ; |
Dimension properties
Dimension properties in CSS define the dimensions of an element, i.e. the width and height of the element. They also define the maximum width and height the element is allowed to have, and the minimum width and height the element is allowed to have. All of these properties related to the element’s dimensions are specified using 6 properties shown in the following table.
| Property | Description or usage | The values you can take | Examples |
| width | They are used to specify the width of the element. | The most important values that it can take are: – auto (that is, the dimension is calculated by the browser automatically), and this is the default value. – A number representing the width or height in pixels, centimeters, etc. – Percentage , where the element’s dimension is determined by multiplying the percentage by the dimension corresponding to the element it contains. – Other values. |
;width:70% ;height:350px max-width: 700px; max-height:450px; |
max-widthUsed to specify the maximum width of the element.These properties take the same values as in the table cell above, but instead of (auto) they take the value (none), meaning there will be no minimum or maximum limit for the width or height of the element.
min-widthUsed to specify the minimum width of the element.
min-heightUsed to specify the minimum element height.
The outer (Margins) and inner (Paddings) of an element
There are two important properties related to margins in CSS, one of which specifies the outer margins of the element (margin), and the other specifies the inner margins (padding). The outer margin is the empty space between the element and another element next to it from the right, left, top, or bottom, while the inner margin is the space that is left empty between the borders of the element and the elements it contains within it.
The margin and padding properties take more than one value at the same time, because they define the margins on the four sides, and their values are usually numbers in one pixel, and the property values are written next to each other, leaving a space between each value and the next value, as is clear in the CSS code the next:
If four values are given for either property, the first value will represent the top margin, the second the margin from the right, the third the margin from the bottom, and the fourth the margin from the left, that is, the outer and inner margin of the div element from the top in the previous code will be 50 pixels, 75 pixels from the right, 100 pixels from the bottom, and 150 pixels from the left.
Note : The inner margins do not have to be equal to the outer margins of the element. You can specify the margin values as you want, as they are independent of each other. Likewise, the two properties do not have to take 4 values, as they can be given 3 values, two values, or one value, and in each case of In this case, the values represent the margin from a certain side. For example, if you give the property 3 values, the first value will represent the margin from the top, the second value will represent the margin from the right and left sides, and the third value will represent the margin from the bottom side.
It is worth noting that it is possible to use 4 properties to specify the external margins from the four sides instead of using one margin property, and the same applies to internal margins. The characteristics of the four outer margins are:
- margin-top
- margin-right
- margin-bottom
- margin-left
As for the properties of the internal margins, they are the same as the previous properties, only we replace the word (margin) with the word (padding).
Borders properties
There are a variety of properties in CSS that allow you to format various aspects of element borders in HTML, including the ability to specify the style, color, and thickness of the borders. The following table describes these properties:
| Property | Description or usage | The values you can take | Examples |
| border-style | Specifies the border style (solid – dotted – dashed – double). | It takes four values, each of which is specific to the border from a specific side. The first value is for the upper border, the second is for the right, the third is for the bottom, and the fourth is for the left, or it may take a single value that specifies the style of the border from all sides. Each value this property takes is a word that specifies Stroke style, the 4 most important values are (solid) for solid line, (dotted) for dotted line, (dashed) for dashed line, and (double) for double line. | border-style: solid dotted dashed double; ;border-style: dotted |
| border-width | They are used to specify the stroke thickness (stroke width). | It takes a value representing a length, i.e. a number in pixels, centimeters, etc., and can be given 4 values or 1 value similar to the previous property. You can also take a word that indicates value according to the following: thin to make the width of the stroke thin. medium to make it medium. thick to make it thick. | border-width: 2px;border-width: 2px 3px 1px 2px;border-width: medium; |
| border-color | Used to specify the border color. | It takes 4 values that represent colors, each side has a value. The first value determines the color of the upper border, the second the color of the right border, the third the color of the lower border, and the fourth the color of the left border. It can also take one value that represents the color of the border on all sides. | border-color: red blue black yellow;border-color: #ff6347 #ff0000 #ff6227 #ff6367;border-color: red;border-color: #ff6347; |
| border | This property is a combination of the previous properties and can be used to specify the stroke thickness, style, and color. | This property takes 3 values, and each value is separated from the next by a space. The first value is similar to border-width, the second value is similar to border-style, and the third value is similar to border-color. | border: 2px solid #ff6367 ; |
Note: Since the border property is a collection of the other properties in the table, this code:
It does the same job as this code:
Here we have finished explaining the most important properties in CSS, and we inform you that what we have explained represents only a small part of the many properties present in the language. There are many other properties that can be used to perform many actions related to formatting HTML elements, including making corners. Unsharp the element (i.e. circular), adding a shadow to the element, coordinating lines, changing the locations of elements, and many other formats that our article does not have room to mention..
Comments in HTML and CSS
Comments in HTML and CSS are texts written in Arabic, English, or any other language within the HTML or CSS code, and their goal is to clarify and explain the code written under or next to them. They do not appear on the web page, so the browser ignores them, meaning that comments are only written. To make it easier for you or anyone else browsing the code to understand it, search for it, modify it, and find the line of code you want.
In HTML, comments are written between -!< , which is placed at the beginning of the comment, and >–, which is placed at the end of the comment, as the following HTML code shows:
As you can notice here, the first line of the previous code is a comment that will not be displayed in the browser, while the next line is the code that adds the main article title in the HTML document.
In CSS, comments are written between (*/) and (/*) as shown in the following CSS code:
An example of applying some CSS properties to elements of an HTML document
Now that we have explained the most important elements of HTML and the most important properties of CSS, we will apply a practical example in which we use some HTML elements and CSS properties, in order to summarize all of the above and explain how the codes of the two languages are written and linked to each other.
We will create a very simple HTML document of a page with a title, two paragraphs, an unnumbered list, and an image, and then we will format the page using CSS by entering the formatting code in the Internal method. The final page appearance after applying the modifications will be as follows:
To create an HTML document that corresponds to the page shown in the previous image, you must follow these steps:
Create a blank HTML file in a folder of your choice on your computer using the method we explained in the paragraph (How to create HTML and CSS files).
Place the image you want to insert into your web page in the same folder where you created the HTML file. The image could be the same as the one on the web page shown in the previous image or another one. In this case, pay attention to the need to change the name of the image in the code to the new name.
- Open the HTML file using Notepad or any other text editing program.
No text will appear in the file, i.e. Notepad will display a blank page with no writing. Copy and paste the following code into Notepad, then save the changes by pressing the (Ctrl+S) keys on the keyboard, or by clicking on the (Save) option from the (File) menu in the top menu bar.
Note: The explanation of each piece of code is written next to or above it as a comment.
Note: If the order of the words of the comments that explain the lines of the previous code is incorrect due to the problems of writing Arabic sentences within English text that is directed from left to right, copy the comment and paste it into a text document, and make the text direction from right to left in order to show its words in the correct order and make it easier Read and understand it.
View and edit HTML and CSS code in WordPress
In WordPress, 4 languages are mainly used to design and program the entire website (the front end and the back end of the site), and these languages are HTML, CSS, PHP, and JavaScript. Although WordPress provides the ability to create websites without the need to know these languages, as their codes are automatically generated, making modifications to your WordPress site requires you to know the basics of these languages.
In today’s article, we focused on explaining the basics of HTML and CSS, and in this paragraph we will learn how to view and modify their codes on the site.
Read also : How does WordPress work, and what are its components? A comprehensive explanation for beginners
There are several ways that allow you to deal with WordPress website codes and add custom codes to it, and we will explain here how to view the code for a WordPress page or article from the component editor, in addition to how to insert custom CSS codes, as well as how to access your site’s WordPress template codes to view them or Modify them (but we do not advise you to modify these codes if you are not a professional expert in WordPress and the languages used in it).
Show and edit the code of a page or article
To view the code of a WordPress page or post and then modify it if you manage, open the page or post using the component editor (Gutenberg).
Click the Options button on the Component Editor page. The Options button is usually located at the top right or left depending on the language.
From the (Editor) section, choose (Code Editor) by clicking on it with the mouse.
You will now see the page or article code, and you can modify it if you wish. You can also insert CSS codes here to format the elements inline.
It is also worth noting that you can insert HTML code into the component editor without switching to code editor mode, by using a Custom HTML component. You can also modify the HTML code of a specific component only without having to switch to code editor mode by Click Edit as HTML from the component options.
Insert custom CSS codes
WordPress provides you with the ability to insert CSS codes to apply formatting and modifications to various elements on the website. to do this. Follow next steps:
In the WordPress control panel, place the mouse cursor on ( Appearance ), then click on the ( Customize ) option from the drop-down menu that appears.
Then click on the (Additional CSS Formatting) option.
A text box will appear in which you can write CSS codes to make modifications to the WordPress theme you are using.
For example, insert the following code shown in the image that turns the font color of all paragraphs on the site to red, then save the code by clicking on the ( Publish ) button.
Then go back to the site again and open one of its pages, and you will notice that the font color has been changed to red as you specified in the code.
Read also: How to add custom CSS code in WordPress
Note: You can undo the action by simply deleting the code you added in the Additional CSS field, then clicking the Publish button again.
Show WordPress template codes
A WordPress template consists of several pages, and you can view all of these pages and modify them using (the template editor) if you have excellent experience in the languages used in designing the template, by following the following steps:
In the WordPress control panel, place the mouse cursor on ( Appearance ) and then click on the ( Template Editor ) option.
WordPress will take you to the template editor, which provides you with the ability to view and modify various template files, including the main CSS file for the template, but we remind you that any modifications here must be made by an expert in WordPress and website design languages, or based on detailed steps from A reliable source, such as trusted WordPress education sites.
Read also: How to develop a WordPress theme
With this, dear reader, we have finished explaining the basics of HTML and CSS, which are the two basic languages for designing the front-ends of websites and making modifications to their appearance, and we have learned how to access their codes in WordPress.
Finally, we note that reading this article does not make you a professional website designer or WordPress developer. You should read the additional lessons whose links we have provided in the sources within the context of the article, learn the basics of other languages used in WordPress development (javascript, php), and also view the WordPress articles that we publish on an ongoing basis on our WordPress website .
