Listado de la etiqueta: CSS


A Cascading Style Sheet plays an important role in decorating the first letter of the word in HTML. Sometimes, we need the user to pay attention to a specific piece of text, according to our requirement. To accomplish this purpose, we use the text decoration and effects on the first letter of the word of the paragraph or the heading. This assists in diverting the user’s focus on the relevant point. This selection is done through the CSS:: first-letter selector which is the CSS pseudo-element.

CSS Pseudo-Element

It is the keyword that is added to the selector that enables you to decorate or style the particular section of the selected item. The basic syntax used for this styling is defined in the following:

1
2
3
4
5

Selector :: pseudo-element {

Style property: value in % or px;

}

The selector in this article represents the first letter of the word. The style property includes the border property, color, font, margin, text-decoration, padding, and background property as well. We apply the three main style properties in this guide.

Font and Color Style on the First Letter

First, we apply the two properties in the first letter styling. Starting with the HTML opening tag, we declare the head and then open the style tag. Since we need to apply any effect on the first letter, it is necessary to mention it at the time of styling. Otherwise, the whole text of the paragraph will get affected. So, the “P” for the paragraph is mentioned along with the first letter declaration. The green color and font size in percent are applied.

1
2
3
4
5
6
7

P:: first-letter {

Font-size: 250%;

Color: green;

}

After that, the head section is closed. The body tag is complimented by the center-aligned tag. It is an example of inline styling. Inside the body, we add a heading again. The inline CSS is applied to apply the color to it. In the end, the paragraph is added where we applied the styling. We can also apply any style to the first letter of the heading like in the paragraph.

Code:

Save the code and run it in the browser. You will see the resultant webpage where the first letter of the paragraph is bigger compared to the rest of the text and its color is changed. This change in style is useful in diverting the focus of the reader.

Output:

Border Style on the First Letter

The second way to make the first letter prominent is to apply a square shape or a border around the first letter of the text. Let us elaborate on how it works.

This time, we take the two ways of styling the first letter by applying one style on the heading and the other one to the paragraph. Inside the style tag, the same first-letter value is declared to the heading “h3”. The border style is set to “solid”.

1
2
3
4
5

H3 ::  first-letter {

Border-style:  solid;

}

Code:

Similarly, in the first letter of the paragraph, we apply the border style as double. We can also apply a simple border or the dotted one by replacing the border-style name with the “dotted” word. Inside the body, a heading and a paragraph are declared, both containing the dummy text to show the effects we applied on them. Save the file of the text editor and then run it in the default browser.

Output:

You will see that in the heading, the first letter is “T’ and it is styled with a solid border. You can apply more effects on the border as well, like the border color, etc. This will attract more as compared to the entire text. The paragraph has the first letter “L” of “Lorem”. This is styled by the double border.

Note: Both the border effects are applied on the first letter of the first word as we mentioned in CSS. But if the first-letter definition is removed, the border will be applied to the whole text, either in the heading or in the paragraph.

Text Decoration Style on the First Letter

The first letter of the text can also be styled by decorating the text. This time, we use the first letter of the list. Each list will be affected by a different style of the text decoration. CSS text decoration property has several aspects; we will go with the text decoration line.

First, consider the body section of the HTML code. Two simple headings are applied. Ater that, we declare a simple list. From the two types of lists, we use an unordered list here. The <ul> tag is declared. Inside the tags of the unordered list, we declare the lists with the tag <li>.

1
2
3
4
5

<ul>

<li id = «example1»> Shiza Ahsan </li>

</ul>

All three lists are declared inside the tag of <ul>. Each list is closed separately and after the declaration of all the lists, </ul> is applied. Each list is applied with an id name. The style of the first letter is applied by identifying each example as we apply the different styles for each line in the list.

HTML <body> code:

If the ids from the list are removed, then a single style is applied to all the lines in the list. Now, close the body section. Go towards the Head section of the HTML body.

Inside the style tag, the color of the heading is applied. It is an optional effect just to explain the working. The whole body is applied by the style to align on the left side of the web page.

1
2
3
4
5

Ul li {

Margin-top: 15px;

}

A common effect that is applied to all the lines in the list is a margin effect. To keep the distance between two lines in the list, we apply this effect. After that, each line in the list is applied in the different styles. For instance, in example1 id, we apply the effect of the text decoration with an underline dotted on the first letter.

1
2
3
4
5

#example1:: first-letter {

Text-decoration: underline dotted;

}

Similarly, example2 and example3 are applied by the text decoration of a red line through the letter. Whereas the third line in the list has an overline blue effect.

CSS code:

After adding all the effects, save the code and we run the file. The first letter “S” of the word ‘Shiza” has a dotted line underneath. The first letter “S” of the second line has a red line through it. And the “Z” of Zaroon contains a blue line passing over it.

Output:

Conclusion

The CSS first letter of the text in HTML plays an important role in diverting the attention of the user. In this article, we briefly give the basic introduction to the first-letter selector which is an element of the CSS pseudo property. This style of property has several categories. We can apply each one to highlight the first letter. The three properties that are applied are the font plus color effect, the border effect, and the text-decoration property having different styles and colors of lines passing under or through the first letters.



Source link


A cascading style sheet is a style statement that is used to add effects and properties to the contents that are created and built using the HTML code. All the elements formed are designed through CSS. Both HTML and CSS languages are used to develop and design the front-end of the website, either a static web page or a dynamic website. In this article, we will talk about a property of CSS in which the contents of the HTML body are faded when we apply any condition on them (i.e., a transition, onload of the webpage.)

Introduction to HTML and CSS :

HTML code has different elements, like text, images, videos, animations, paragraphs, and etc. As other programming languages have query or codes, HTML contains tags. The user must have knowledge about the basic tags of HTML. The basic syntax of HTML tags is:

HTML has two sections: head and body portions. On the other hand, we use CSS with an opening and closing tag <style>. Cascading style sheet (CSS) contains three further style types: inline, internal, and external CSS. The inline CSS is the one that is declared inside the HTML tag written in the body section. The second one is the internal tag which is declared inside the head portion of the HTML tag. The third one is external, as the name shows that it is declared in another file outside the HTML tag. All this overview is given because the user should know about the types of CSS declarations. Because we have used the first two types of CSS which are inline, and internal CSS, in this article.

Fade in transition:

Fade is a unique property of CSS that makes the content of HTML disappear. The purpose of using the fade property is to seek the attention of the user, or to notify the user with some information. This fade effect is different from the blinking effect, as the blinking property causes the content to keep on the hide-seek process. But the fade property merienda appears after fading is not faded again unless the page is reloaded. Mostly the transition property is used onload of the webpage. In other words, as the webpage is loaded, the page initially is blank.

Transition property by setting opacity to 1 when the page is loaded:

This is the methodology in which the body is set to the 0 opacity at the initial level. Then, the transition property is used here to animate the transition property when it is changed. By using the onload event, we set the property of opacity as 1 when the web page is loaded. Because of the transition, the opacity change that we apply in the CSS will be used to fade the page.

Example:
We have used a simple example to elaborate on the working of the fade effects on the transition. We can use any effect to show the contents of HTML fading. In this example, we have used simple texts in the form of heading and paragraphs. Now, let us understand the HTML and CSS code that is used to accomplish the fade effect in transition.

Inside the head section, we mention the title of the page. Then, the style tags are used. This style mode is of internal styling, as the whole code is defined in the head tag. Inside the style tag, we have targeted the whole body of the HTML, on which we have applied the opacity effect of 0. It means when the web page is loaded at the start, the web page is blanked as a whole. Meanwhile, after 3 seconds of transition, the body of HTML is visible. This property is done through the transition value of the CSS styling, the opacity of the transition is set as 3s.

<style>
Body {
            Opacity: 0;
            Transition: opacity 3s;
}
</style>

By using these properties, the whole content inside the body (either text or any image) will have zero opacity. But after a specified time, all the contents will be visible.

CSS code:

Heading towards the body section of the HTML tags, we have applied an on load effect. Or, the opacity of the body is set as 1, after the faded effect.

< body onload = «document.body.style.opacity = ‘1’»>

After that, the body background color is set to black. A heading <h1> name is declared. We have added an inline styling in the tag by adding the font color white property to the heading. Then, close the heading tag.

HTML body code:

Similarly, a simple text with a bold <b> feature is added and the same font property is added to the bold text through the inline CSS.

< p style = «color: white» >

In the end, the last content that is added to the body is the paragraph <p> having inline styling. Close all the tags and save the text file with an extension of ‘.html’ as the name of the text file we have used is sample.html. The purpose of this extension is to open this file in the notepad and the browser as well. Whereas, the ‘.txt’ extension will open all the text when it is run in the browser. But when we open the file in the browser with an html extension, it will form the webpage according to the html contents.

We have attached a small portion of the video that shows the fade-in transition effect on the execution of the file.

Output:

When the page is loaded on opening the file on the browser, you will see that at the start, the body is not shown, but after 3 seconds the content created in the body is shown together. Every time we reload the page, all the body parts are refreshed. Initially, they are faded but then the text is displayed when the period mentioned in the CSS is passed. We have used the ‘F5’ key to reload the page over again.

We can also change the time we have mentioned according to our desire. Similarly, all the fade effects can only be applied to any specific part of the HTML content instead of applying to the whole body. With that, you can focus on directly the specified part of the web page.

Conclusion:

CSS fade in transition article consists of the transition property fading and displaying HTML data. We have introduced the basic use of HTML and CSS languages and their types. Tags distribution and purpose of both languages are elaborated. Next, we discussed the transition property related to the opacity effect in CC properties styling. A simple text feature is used in the body portion. The whole body is applied with the transition effect.



Source link


The hover selector is a part of the pseudo-class. This effect is used to style the contents in the HTML when the cursor of the mouse hovers over them. We can apply this effect to any element. This article contains some basic usage of a hover class in HTML and CSS.

Purpose of the Hover Effect

In any document or browser, we use the links to websites for the assistance of the user. For this purpose, we can style the links for the pages that are not yet visited by using the link selector class. Similarly, for those links that are already visited, we use the visited selector. An active selector is used for the active links. These are all the link styles which show the effects on hover. If the link and the selector of the links that are visited are both present in the CSS definition, we use a hover selector class to see the resultant effect.

On the other hand, whenever we want to hover on any element in HTML, it causes some effects by using some properties in CSS, either on the existing content or on the new element form as a result of hover.

Syntax of the Hover Element

Content_of_HTML :hover{
// declare CSS code or effects you want to apply.
}

Example 1: Hover Changes the Color of the Text

This example deals with the transformation of the text when we move the cursor of the mouse towards it. We can apply the several conditions to the text. But for now, the two basic changes that follow are: the change in color of the text on which the hover is applied and the highlight of the text with a change in the background color.

Starting with the HTML head section, use the style tag inside it as we are doing an internal style. Use the style section inside the <head> tag. A hover class is used to apply all the effects on the text of the heading. So, h1 is used with the hover class.

H1: hover {
Color: white;
Background-color: Purple;
}

The two properties, as we discussed earlier, are applied. By default, the color of the heading is black and the background color of the webpage is white. But on hover, the background color of that specified portion becomes purple, so the text color also changes into white.

HTML CSS code:

Close the style tag and the head section of HTML. Moving towards the body portion, a heading1 is declared. The alignment for the heading1 <h1> is set to center. Close all the tags and save the text editors file. To execute the output, we need to run the file in the browser. While saving the file, one thing should be kept in mind: save the file with the HTML extension instead of saving it with the text extension. Open with the default browser so you can get the output.

Output:

The output in the browser is captured in the form of a few-second video that leads to the excess in displaying the results. On the execution of the file, you will see that a simple heading in the center of the webpage appears. When we take the cursor close to the heading or hover over the heading, the background color and the font color is changed. Whenever the cursor is moved back, it comes back to default.

Example 2: Hover Builds a Block with Text

Unlike in the previous example where the existing text was changed on hover, in this example, a new content (block) of HTML is added that is shown only when we hover over the specified text. This block also have some dimensions and specifications. Let us elaborate on the procedure.

Starting with the CSS section, we tyle a div. This div creates a block of content that is the result of hovering over the text. The width and height are the two basic values applied to form any shape in HTML. Next is the padding property. It is the distance area of the content inside a block or a shape. For example, we have taken a text inside the block, so the distance of the text and the boundary of the shape is taken as the padding. If only the padding is used, then it means that it is the distance inside the box on every side. If the padding is done from a specified side, since we used the padding from the right, then it means that it is the distance on the right side. This property keeps the text inside the boundary of the block. Otherwise, there are chances of exceeding the text out of the border of the block.

Padding: 20px;
Padding-right: 50px;

This padding effect is applied to align the inner content with the outer content. The value is taken in pixels.

CSS code:

The font size and the font color of the text are applied to the text inside the block. The next style section is about the heading which we applied in the hover. As the content block is created inside the div, div is included in this type of styling together. The block shape content is created that is mentioned to form a display.

H3: hover + div {
Display: block;
}

After that, close the style and head tags. Declare a heading inside the HTML body. A div is formed. The text that will be mentioned inside the block is also written inside the div tags. Close the body tag.

HTML Body Code:

Save the code in the file and run it in the browser. As an output of the previous code, we took a small portion of the video to elaborate on the working of the hover class that is created and designed to create a block with a text inside the block.

Output:

The video shows that a simple text as a heading is displayed when we run the file in the browser. But when we hover over the text, it causes a change on the web page. On hover, the text of the heading remains the same as it is at the time of execution. But a block on the left side of the page is created every time we move the cursor towards the heading. When we move the cursor away from the heading, the block vanishes. This is because the hover class creates a block and text inside it. All the effects on the block and text are applied in CSS.

Conclusion

CSS hover is a property that is used to prominent or highlight the HTML content when we move the cursor towards them. This function is mostly used to notify about something. In this article, we explained the working of a hover class, and how the HTML contents are transformed in hover. At the start, we gave a brief overview of the hover class. We implemented the two basic examples of the hover effect. The first example contains the effect on the existing text, whereas the second example is about showing an additional shape hovering towards the existing text while the existing text remains the same.



Source link


“Align Button Right means that we set the button to the right side of the page. Alignment is something about the adjustment of the text or button at different positions. It describes the position of our text and buttons, whether we want to align our text or button to the right of the page or the left or center. In CSS, as we can align our text like this, we can align buttons to the left, right, and center of the page using different properties. CSS provides different properties for the alignment of the buttons. We can align the buttons where we want. In this tutorial, we will explain all about the right alignment of our button using alternative properties in CSS. We provide different codes in which we use alternative properties to align a button to the right.”

Properties for Align Right Button in CSS

  • Using text-align property.
  • Using float property.
  • Using justify-content property.

Example # 1: Align Button Right Using the Text-Align Property

Create your HTML file for creating the button, and for aligning this button, we have to create the CSS. We are going to elaborate on the given examples in our visual code studio. So, we have to generate the HTML file, and the code of this HTML file is pasted below in the image.

Here, we have created two different buttons and then want to align one button to the right so you can easily learn the difference between the innovador button and the right align button. So, for this alignment of buttons, we have to utilize the CSS text-align property. When we use this property on the button which we have created, then the button sets its position to the right side of the page. In the CSS file, you can see how to use this property.

CSS Code

Here, the CSS code is also given below. We use CSS to give style or giving alignment to our buttons. In this code, you can see that we are using the “text-align” property.

First, we use the “.” and the name of our first button, which is “btn-original” here, and inside the curly braces of this first button, we use the “text-align” property and set it to the “left.” We write the title of the second button, which is “btn-right,” by putting. “” again and inside the curly braces, we again use the same property, and this time we align the button to the “right” side of the page or screen.

Output:

The output shows two buttons in which the innovador button is displayed on the left side, and then the button is shifted to the right side of the screen.

Example # 2: Align Button Right Using the Float Property

In this HTML file, we again design two buttons. The name of the first button is “Button” here, and the name of the second button is “Right Button.” In this example, we are going to use another property for aligning the button to the right. The property we use in the CSS of this code is the “float” property. It works the same as the “text-align” property does.

CSS Code

In this CSS file, we use the float property. The float property in CSS is used for floating the element or object or button to the right and left sides. The “.innovador” is used for applying design to the “innovador” button. Inside this, we apply the “float” property and set it to the “left,” so the innovador button is placed on the left corner of the screen. Inside the “.right” button, we set the “right” to the “float” property. This will place our second button on the right corner of the screen.

Output

In the above image, the button is aligned to the right corner of the screen. Here, we have used the “float” property, and you can see it displays the output the same as the “text-align” property showed.

Example # 3: Align Button Right Using the Justify-Content Property

In the third example, we create only one button using the div class and then use the third property of CSS, which is the “justify-content” property. This property also aligns the button to the left or right, but we have to align the button only to the right

CSS Code

In this CSS file, we also change the “background” color to “pink” and set the “padding” to “10px” from top and bottom and “0” for the right and left. The “display” we use here is “flex,” and then use the third property of CSS that is “justify-content” and set it to “flex-end,” so this “flex-end” sets the button to the right end.

Output

The background color is pink here, as we use “background-color” to “pink.” The button is at the right end as we use the “justify-content” property in our CSS file of this example.

Example # 4

In this fourth example, we have created six different buttons using the button class in HTML. Now, we use different colors for all six buttons and align three buttons to the “right” using CSS property, and three are on the innovador place, which is “left,” where we don’t use any property.

CSS Code

The color of the first button is “green,” and the code for this is “#4CAF50”. We don’t need any border, so the border is “none.” The “color” of the text written inside these buttons is “white.” The top and bottom paddings are “15px,” and the left and right paddings are “32px”. The “text-align” is centered, so the text inside the button appears in the center of the button. The “text-decoration” is also “none.” The “font-size” is set to “16px”. The top and bottom margins are “4px,” and the right and left margins are “2px”. The “pointer” is here to be used as a “cursor.”

Then we align this button to the right, so we have the “float” here, which is set to the “right.” Also, change the color of the next button and apply “red” here, and don’t use any property for aligning the button, so by default, this button will display on the left side. The fourth button, “background-color,” is white, so we also change the “color” of the text to “black” and float this fourth button to the right. After changing the color of the fifth and sixth buttons to hermandad, we again use “float: right” with the sixth button. Let’s check how it will show these buttons on the browser.

Output

In this output, we have six buttons in which three buttons are rendered on the right side where we use the property “float.” So, with the help of this property, three buttons float to the right side. And also, three buttons are on the left side, as we didn’t use any property for these three buttons. The colors of these buttons are also different.

Conclusion

This tutorial has discussed the three properties which the CSS provides for aligning the button to the right corner of the screen. We have explained all three properties of CSS in detail which are “text-align,” “float,” and “justify-content” properties. We have generated three different examples, and we have applied the alternative properties in each example and displayed the output of all the codes also, so you can easily get this point about how to align the button to the right. This tutorial will help you to align your button to the right side using the properties of CSS.



Source link


“In this article, we will be explaining how to alter the size of the border by using different approaches in CSS in an HTML file. A div container contains a border with many distinct styles and aesthetic attributes like color, size, shape, and so on. In this article, we will be using Notepad++ to edit an HTML file by altering the border size using different properties that CSS provides, like Border-width.”

Example 01: Using Style Tag CSS to Resize a Border in an HTML File

In this example, we will be altering the size of a border of a div container by using CSS in the head tag in an HTML file. We will define a universal function for all div containers that will be created in this file to have the predefined editing style that we will define in the div section present in the style tag. So, to accomplish this task, we will generate the following script:

As we can see in the above script of an HTML file, we have opened a style tag in which a div is called which has several properties defined one by one. First is padding, which will give the div container a space between the page of the browser and borders. Then we have called the border property itself, and, in this property, we will define the size of the border and the border type; in our case, it is set to “1px” and “solid.” Then we added web kits that will support the most commonly used browsers in the same property function. Then we closed the style and head tag and opened the body tag. In this tag, we have mentioned everything that will be present on the page merienda this file is opened in a browser.

We have added a heading using the “h2” tag and also added a div container with some text in it. This div container will inherit all the properties defined in the style tag, which is present in the header of the file. These tags will be closed after this. And now, we will save this file in the “.html” format and open it in the browser to see the following output:

As we can see in the above output, the heading and the div container are present, and the border of the container is also shown with a thin size along with some text in it.

Now we will edit the above script and make changes in the border size in the style tag of the header section to visualize the difference between the size of the border of the container.

We adjusted the size from “1px” to “5px” in the above script to generate a thicker border for the container. Let us now observe how this change appears in our browser when we execute the script.

As we can see in the above output that the size of the border is now thick as compared to the previous output.

Example # 02: Creating a Class in CSS Style Tag to Control the Size of a Border in an HTML File

In this example, we will create a special class of CSS styling in which we will define every aspect of styling that we want throughout the file. This is a very helpful method because we can distinguish different designs in a single HTML file and classify them into different classes. In this example, we will classify the styling of a border of any container. To achieve that, we will write the following script:

As we can see in this script, we have opened a style tag in the header of the HTML file. In this style tag, we have created a class for the paragraph tag styling in which we have defined two properties for the border, which are style and width. The style property is set to solid, which means that the border will be a uniform, straight line, and the width property is set to thin, which means that the border size will be thin. After this, we closed the style and head tag and moved toward the body tag. In the body tag, we have given a heading and a paragraph to the HTML page. In the Paragraph tag, we have called the “p.bw1” class, which has the border properties predefined in it. We will close the tags and save this file so that we can run this on our browser.

After running this script on our browser, we will get the above output. As we can see, the style class for the paragraph tag has added a solid and thin border to the paragraph present in the body.

Now we will vary the size of the border present in the above script and observe the effect of these variations on the border.

In this situation, we have edited the width from thin to medium, and after running this script, we will get the following output:

In this output, the border size has changed from thin to medium and is now much more visible. After this, we will change the size from medium to thick, as shown in the script below:

After running this script, we will get the following output:

After changing the width to thick, we can see that the border is very broader in size and quiebro easily visible.

Example # 03: Using the Tailwind CSS Style Sheet to Alter Border Size Using the Border Class

In this example, we will use the Tailwind CSS style sheet to change the size of a border using a border class defined in this style sheet. The border class has several predefined sizes for the border, which we will explore in this example by implementing this in Notepad++.

In the above script, we will be adding the link to the Tailwind CSS style sheet using the link tag in the header of the file. Then we will open the body tag and give a heading to it. Then we will open the div tag, which we will call the class of border-2 with border color code, and then the paragraph tag will have the body text of the div container enclosed in it. Now we will save this file and open it on our browser to see how the border turns out.

As we can see that the border size is very thin and can be adjusted to a bigger size, so we will increase the size by calling the border-8 class and see how it changes the border size.

As we can see in the above snippet, the border is now thicker than before because of the border-8 class.

Conclusion

In this article, we focused on the CSS “size” attribute of a border. The border size is commonly specified with two identifiers: pixels and textual representation, such as “thin,” “medium,” and “thick.” We discussed several methods to alter the border size using CSS in an HTML file in this article. We used the Notepad++ environment to edit our HTML file and implemented conventional CSS methods of style tag and style class to alter the size of a border. We also used the Tailwind CS style sheet to call its border classes which provided different sizes for the border of a container and can be called via inline CSS styling.



Source link


“A Cascading style sheet is a piece of code that is used to add effects and extra features in the working of Hypertext markup language tags. HTML code is an essential part of building and developing websites. And similarly, without CSS, only HTML use is not sufficient, which leads to excess. HTML, CSS, and javascript are three basic tools combined to serve in many areas, including static webpages and dynamic websites, applications, etc. Moreover, while developing any website in another programming language, i.e., C sharp, HTML and CSS also play a cardinal role. In short, HTML creates the objects, and CSS designs them. This article is about designing a polygon in a webpage.

A Hexagon is a mathematical, geometrical shape called a polygon having 6 edges. To design a hexagon, we will use HTML and CSS.”

CSS

CSS is mainly of three types. Each type depends on the location of its declaration. One is inline, which is written inside the HTML tags. The second one is internal, written in the head portion of HTML tags. Whereas the third one is external CSS, which is declared outside the HTML code and the HTML file in another file with the css extension. We will go with the internal CSS in designing hexagon. The opening and closing tags for the internal CSS are:

<style> </style>

Tools

The basic tools used to create a simple static webpage are a text editor and any browser. You can use any text editor, but in this article, we are using a simple Windows default text editor and Chrome as a browser. We write the HTML code or tags in the editor and execute that file on the browser.

Prerequisite

There are not some prerequisites regarding any tool or any software. But the user must have some know-how of HTML tags, as the basics are required in building a hexagon and designing it. HTML tags contain two major parts, head and the body.

<HTML>

<head> </head>

<body> </body>

</HTML>

While some other tags will be explained with code at the time of implementation.

Implementation of Hexagon

For the implementation, open the notepad and start the HTML code. Inside the head portion, we have used the title name as a hexagon; this will appear in the tab. Heading towards internal CSS. Inside the Style tag, we have created an explanation of the hexagon class.

In CSS, mainly in internal and external styling, to make the code short and easily understandable, we make use of ids and classes. Here the question arises of how these classes and id work. All the features and effects that we want to apply to any object we are creating are mentioned inside the class or the id’s body. These ids and classes are accessed by using their names inside the tags where we want to apply any effect. So here, we have created a hexagon id inside the style tag. This id will be applied at the time of creating the hexagon. Inside the hexagon body, we have declared a location to draw the shape; for this, we have used two features, one is the top, and the other one is the left. The “top” decides the distance from the top to the shape. And the left decides the distance from the left border to the shape. It can be written in percentage or any other unit.

Top: 20;

Left: 10%;

The insignificante border is set as coche. In this way, the location of the shape is all set. Now we will apply a color to the shape. This is given to be the background color. We have chosen the magenta.

Background-color: magenta;

The polygon hexagon is formed by having corners or curved points. To make the points curved, we will add a feature of border radius to make it smoothly curved instead of having rough edges.

Border-radius: 10px;

Here the value is written in the pixels unit. Now we will decide to give the shape, height, and width. These two features are the building block to creating and styling a shape. Any shape or any text is always recommended to be written or drawn inside a specified box. This box helps in deallocating the object very easily. So we have declared a border box here.

CSS | Pseudo Elements/Class Property

This property is used to rotate the lines of shape at 60 degrees, making a perfect hexagon. A CSS pseudo-element is a type of styling that is used to style a particular part of the element. For instance, it styles the first line of the shape. All these contents are applied before and after the contents of the shape. We can apply any feature in this manner.

The content and the border are some built-in features of pseudo property. All other features of height, width, and color are the same as we have described in the simple id description of the hexagon.

Now all the above features are declared as two portions to be applied to form a hexagon.

.hexagon : before {
Transform : rotate (60deg);
}

A similar feature is for the remaining portion of the hexagon; all the shapes are created by using a specified angle for polygon 60 degrees are formed between every two alternative lines.

The style and the head tags are closed now. Make sure all the tags you opened must be closed to make them applied in the code; otherwise, some effects may be lost. Now leading towards the body part.

Here we have used a simple heading of text to write a line. This style is an example of inline styling.

< body style = «text-align : left»<

We have given an alignment to the text to be displayed on the left side of the web page and given the font color as black.

After the text, we will declare the code for the hexagon shape. DIV is a container like a table in HTML. That is used to contain objects in a straight position. Inside the div body, the CSS class and the id name are declared to apply all the features on the div container of the shape. Close all the opened tags, i.e., Div, body, and Html.

We save the file of the notepad with the “.html” extension to create a webpage. This file is saved as “sample.html.” So by using this extension, the icon of the file will be set as the icon of the default browser.

When we run the file in the browser, it will display a webpage having a heading and a hexagon shape on the left side of the page.

Conclusion

A hexagon diagram is formed by using HTML embedded with cascading style sheet with it. At the start, we talk about the basics of HTML. And the types of CSS are also explained to eliminate any sort of ambiguity regarding CSS types. Two basic tools are mentioned that are essential for the creation and execution of HTML and CSS tags. The hexagon example is implemented and explained line-by-line with the code and its usage. A unique way of creating a shape is explained through the CSS pseudo-element property. In the end, we have shown the static webpage that is formed as a result of the defined code.



Source link


As we all know that Html and CSS go hand in hand in order to create a responsive and attractive website design but sometimes we need to apply the same CSS properties to multiple HTML tags according to the design requirement. Now the question arises, what do we do in such a situation? Here CSS classes came in to save us from writing the same CSS code multiple times.

CSS class is the key player in adding multiple properties to an element or the entire web page. Keeping in view the importance of CSS class, this article aims to provide an insight into the CSS class with the following learning outcomes:

  • What is a CSS class
  • How to use multiple classes on a single Html tag
  • CSS class for specific HTML tag

What is a CSS class

In CSS, the class is used to define a set of properties to apply the CSS properties in bulk. A class can be used by multiple HTML tags at a time which means we do not need to write the same CSS properties in our HTML code multiple times just use class instead. A class is defined with the group of CSS properties. The genérico syntax of CSS class is provided below:

.classname{
    CSS properties
}

In CSS, a dot (.) is used to set a class name and CSS properties are then enclosed in curly braces.

How to create a CSS class

Primarily, the CSS class is used to enclose a set of CSS properties and then apply these properties by calling the class. The following code explains how CSS classes are created.

<!DOCTYPE html>
<html lang=«en»>
<head>
    <meta charset=«UTF-8»>
    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
    <title>CSS Classes</title>
    <style>
        .container{
            height: 200px;
            width: 500px;
            border: 2px solid black;
        }
        .center{
            text-align: center;
        }
        .color{
            color: coral;
        }
    </style>
</head>
<body>
    <div class=«container»>
        <h1 class=«center»>CSS Class</h1>
        <p class=«color»>This is the first paragraph for class tutorial</p>
        <p class=«center»>This is the Second paragraph for class tutorial</p>
    </div>
</body>
</html>

In the above example we create three CSS classes, container, center and color. These classes are applied on the <div>, <h1>, and <p> tags respectively.

Output

In the above output container class specifies the height and width of the container, also put a border while color class changes the font color and center class aligns the text to center.

How to use multiple classes on single HTMLtag

In CSS, we can use multiple classes on a single HTML tag which helps in styling HTML more efficiently. The following example demonstrates this concept better.

</htmlfragment>
<html lang=«en»>
<head>
    <meta charset=«UTF-8»>
    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
    <title>CSS Classes</title>
    <style>
        .container{
            height: 200px;
            width: 500px;
            border: 2px solid black;
        }
        .center{
            text-align: center;
        }
        .size{
            font-size: 20px;
        }
        .color{
            color: coral;
        }
        .text-style{
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <div class=«container»>
        <h1 class=«center»>CSS Class</h1>
        <p class=«size»>This is the first paragraph for class tutorial</p>
        <p class=«text-style»>This is the second paragraph for class tutorial</p>
        <p class=«center size color text-style»>This is the third paragraph for class tutorial</p>
    </div>
</body>
</html>

In the above code, five CSS classes are created. The container class is applied on the <div>  tag, whereas the rest of the four classes are applied on the <p> tags. Moreover, four different CSS classes are applied on a single <p> tag (last <p tag).

Output 

In the above output the third paragraph is shown with application of multiple CSS classes at merienda.

How to use classes in HTML

We can also specify a CSS class for a specific HTML tag. This type of class is helpful when we want to apply the same styling on a specific tag everytime it is used. The following example helps you to understand better.

Example

</htmlfragment>
<html lang=«en»>
<head>
    <meta charset=«UTF-8»>
    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
    <title>CSS Classes</title>
    <style>
        .container{
            height: 200px;
            width: 500px;
            border: 2px solid black;
        }
        .center{
            text-align: center;
        }
        .size{
            font-size: 20px;
        }
        p.color{
            color: coral;
        }
        .text-style{
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <div class=«container»>
        <h1 class=«center»>CSS Class</h1>
        <span class=«color»>This is the first paragraph is written within span tag</span>
        <p class=«text-style»>This is the second paragraph for class tutorial</p>
        <p class=«color»>This is the third paragraph for class tutorial</p>
    </div>
</body>
</html>

In this example, we created a color class specifically for <p> tag and applied it on <span> tag as well as <p>. 

Output

The above output clearly shows that color class only worked on <p> tag because it is specifically created for <p> tag.

Conclusion

In CSS, class is an attribute which is used to apply multiple CSS properties on HTML tags. A single CSS class can be applied on multiple HTML tags and vice versa. The dot (.) symbol identifies a CSS class. In this article, we have learned about css classes, how to use multiple css classes on single html tag and css class for specific HTMLtag. Also the same CSS class can be used by multiple tags at a time.



Source link