The different methods of creating a css expression are listed below −Using a class as css selectorThis will select all the web elements of that particular class. (Represented by (.) for example - .classname)Using an id as css selector.This will select the web element of that particular id. (Represented by (#) for example - #ID)Using a tagname and attribute value as selector.This will select the web element of that particular attribute value combination. (Represented by tagname [attribute=’value’])Exampleimport org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class CssExpression {    public static void main(String[] args) {   ... Read More

Both HTML and ASP are the web development languages and are widely used in developing web server pages and applications.On the basis of nature of both of the languages we can distinguish between HTML and ASP as follows −Sr. No.KeyHTMLASP1DefinitionHTML is a client-side language which mainly use for developing user interface.HTML stands for Hypertext MarkUp Language in which "Hypertext" refers to the hyperLinks that an HTML page may contain and "MarkUp language" refers to the way tags are used to define the page layout and elements within the page.On other hand ASP is a server-side language developed by Microsoft i.e., ... Read More

The Google Font is a free font service for computer and web. It launched in the year 2010 and owned by Google. In 2021, open-source icon support was added. It includes 1, 576 font families that includes 352 variable font families. The official website of Google Font is fonts.google.com. Just like the Font Awesome icons, the Google Fonts are added to a website using the element. Let us see how to add and use Google Font on a web page. Features Easily insert Google Fonts on your web page It is having more than 1k font families While ... Read More

We will include a Google Chart to the web page using the google.charts.load(). The draw() method is used to draw the chart. To display, use the BarChart class. First, the chart data is configured. The data of the chart is in a table. Configure the Chart Data Let us first create a function of the chart data. Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. function drawChart() { var data = google.visualization.arrayToDataTable([ ["Year", "India"], ["2019", 500], ... Read More

A blog layout consists of a header. That header consists of a logo, then the menu, and after that the blog heading, content, etc. With that, the link for some other blogs can also be seen. In the bottom, you have a footer. The footer should have a copyright text. Let us see how to create a blog layout. Create the header The header of a blog consists of a logo on the left and then the website name − Logo ↶ Website Name Position the header Here, we will ... Read More

The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS. Set a container for text We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the ... Read More

To create a mixed column layout grid with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .col {       color: white;       float: left;       width: 25%;       padding: 10px;    }    .colContainer:after {       content: "";       display: table;       clear: both;    }    @media screen and (max-width: 900px) {       .col {          width: 50%;       }    }    @media screen and (max-width: 600px) {       .col {          width: 100%;       }    } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −

To create a list grid view, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    /* Create two equal columns that floats next to each other */    .column {       float: left;       width: 50%;       padding: 10px;       color: white;    }    /* Clear floats after the columns */    .row:after {       content: "";       display: table; ... Read More

An expanding grid is a grid that expands when a box is clicked. It hides by default but gets expanded to 100% when the box is clicked once. We will create three equal columns that floats right next to each other. On clicking any of the grid column, the grid will expand. Also, the expanded area will have a closeable button to close and return to the initial stage. Create a container for the three columns Begin with a parent div with three columns. On clicking any of the boxes, the onclick attribute will open the individual tabs − ... Read More

To create a 4-column layout grid with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .first, .second, .third, .fourth {       float: left;       width: 25%;       color: white;       padding: 10px;       height: 500px;       text-align: center;    }    .first {       background-color: tomato;    }    .second {       background-color: teal;    }    .third {       background-color: rgb(166, 71, 255);    }    .fourth {       background-color: rgb(255, 71, 194);    }    .container:after {       clear: both;    } Four Column grid example Some text on the first div Some text on the second div Some text on the third div Some text on the fourth div OutputThe above code will produce the following output −