Example 01:
Let’s get started with the first example of using the plus sign within the HTML code to make use of it in many ways. We take a look at the body tag of the HTML code. Within the body of the HTML page, we have a heading of size 1 that states that we use the Plus sign via the CSS styling for the top stories to be released. We use another heading of size 2 which is the second largest size of the HTML headings followed by the div tag. This “div” tag creates a new section containing some information regarding the release date and the place where it is released.
After this tag, we have another “div” tag that is used for the creation of a new section on the HTML page. The body section of this HTML is completed here. Let’s take a look at the “style” tag of an HTML page to take a look at the styling of the different elements. Within this tag, we utilize the plus sign “+” among heading 2 and the “div” tag to apply the styling on the “div” element adjacent to the heading 2. The font size is 22 pixels, font weight is lighter, the display is inline, while the background color for the “div” section is purple and the text color is light cyan. After this, we use the h1 heading title to style it with the near-to-black text color. The styling is completed here.
The output of this code is displayed in the following image. The first heading of size 1 is colored dark blue while the other heading of the second largest size is displayed in a jet black color. Since the first div tag is adjacent to the heading 2 of an HTML page, it is styled according to the properties used for the combined “div” and “h2” elements. On the other hand, the heading 1 is styled according to the use of the H1 within the style tag.
Example 02:
Let’s get started with another example of using the Plus sign to style. We start this example with the use of the doctype HTML main tag followed by the single opening of the head tag. It follows the opening of the title tag containing the title “CSS Plus sign” within it and the closing of the title tag.
Let’s have a look at the body area of an HTML code using the body element tag. We use the different headings and paragraphs via their particular tags, i.e. “h1, h2, and p”. First, we use the h1 heading of the largest size. After it, we use the heading 2 of the second largest size along with the adjacent paragraph. We create a new Div tag after the heading to create a new section within the HTML page. Lastly, we use the heading 2 again followed by the paragraph element within the div section.
Using the Plus sign between the heading 2 and the paragraph, we style the paragraph adjacent to the heading 2. We have more than one heading of the same size. Therefore, it takes the heading 2 that comes first from the start of the body tag. We use the green color on the paragraph adjacent to this first heading 2 with the font size of 28 pixels, background-color khaki, and the text-transform property to show the uppercase text.
After this, we use the paragraph tag to style the remaining paragraphs of our HTML page by coloring it with tea pink with the bold font weight and the fantasy font family. This is about the use of the plus sign for styling. Let’s run this code now.
We get the output with the headings of sizes 1 and 2 without any styling. The first paragraph is displayed in all uppercase words with the background khaki and green color text. While the last paragraph is displayed separately in purple color text. The use of the Plus sign for styling the paragraph does not affect the styling of the second paragraph.
Example 03:
The body starts with the heading 1 element followed by the div element to create a new section. This section contains a total of four paragraph elements to create the different paragraphs and one div section that also uses the paragraph tag to create a single paragraph within this section.
After all the inner elements of this section are completed, we close the outer div section along with the closing of the body section. Within the style tag, we use the paragraph “p” to apply the font weight as bold and the font size of 25 pixels to all the paragraphs in the body. Now, we use the Plus sign within the two paragraph tags to apply the specified styling on the adjacent paragraph of the first paragraph in the body section. Different font, border, and text-related properties are set for the second paragraph, i.e. 5px double border.
Now, we use the paragraph tags again with the plus sign to style the 3rd and 4th adjacent paragraphs of the body area. The different font style properties along with the border color and border outline property are set, i.e. border of 5 pixels dotted and crimson text color are specified for the adjacent paragraphs. Now, the code is completed and we are headed to execute it.
The output shows that the second paragraph is styled quite differently from the rest of the paragraphs while the 3rd and 4th paragraphs are styled similarly. The 1st and 5th paragraph looks similar in styling.
Conclusion
This article demonstrates some simple examples to illustrate the use of the “+” plus sign within the HTML scripting. We learned how the “+” plus sign can style some elements mentioned after the “+” plus sign within the CSS styling without changing the styling of the first specified element of the HTML. For this purpose, we used a total of 3 examples to style the paragraphs and div sections. Using this attribute element, you can make changes to any HTML page without the fear of losing the formatting for your HTML page.
