Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Web Development Articles
Page 51 of 801
Pseudo-classes and all CSS Classes
The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has focus :hover = To select ...
Read MorePerforming multiple transitions using CSS3
For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div To begin with, set a parent div − Set the transition The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds − .container div { width: 300px; ...
Read MoreOutlines Vs Borders in CSS
Outline doesn’t take up space and is displayed around the border if set. It is used for highlighting elements and we can’t specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline. Borders can be customized to a greater extent. We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing. Outlines The outline is drawn outside the borders. It is a line drawn around elements. The following are the properties. ...
Read MoreMaintaining Aspect Ratios for HTML Videos with CSS
By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property. Aspect ratio for videos with the padding-top property Use the padding-top property to set the aspect ratio of an element on a web page. Here is the CSS padding property − The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element. The padding-right specifies the ...
Read MoreMaintain Image Quality When Applying CSS Transform & Scale
The CSS image-rendering property helps us set an algorithm for scaling our image. The images sometimes look blurry when the transform & scale is applied. To improve the image, use the CSS image-rendering property. Let us see how to maintain the image quality. Syntax The syntax of CSS image-rendering property is as follows − Selector { image-rendering: /*value*/ } Above, the value can be − auto − This is the default and the web browser choose the scaling algorithm automatically smooth − Smooths out the color in your image. high-quality − Provides higher-quality scaling ...
Read MoreLeft and Right Alignment using the float Property in CSS
We can align elements in HTML using the CSS float property that is used for positioning or formatting a box or content. You can position element towards left or right with CSS float. The float property can have any of the following values − left − element float to the left right − element floats to the right none − element won’t float Float right and left Let’s see an example of CSS float property to align elements. Here, we have floated a container left using the float property with the value left and right using the value ...
Read MoreWorking with CSS3 3D Transform Functions
Using with 3d transforms, we can move element to x-axis, y-axis and z-axis. The following are some of the methods of CSS3 3D Transform − S.No. Value & Description 1 matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Used to transforms the element by using 16 values of matrix 2 translate3d(x, y, z)Used to transforms the element by using x-axis, y-axis and z-axis 3 translateX(x)Used to transforms the element by using x-axis 4 translateY(y)Used to transforms the element by using y-axis ...
Read MoreInline-level Elements and Inline Boxes in CSS
Inline-level elements have their CSS display property set to either ‘inline, ‘inline-table’, or ‘inline-block’ and these elements do not force a line break above and below themselves. Inline-level boxes are generated by each inline-level element which is a part of the positioning scheme as well as contains child boxes. Inline boxes are boxes which have their content follow inline formatting context. Inline boxes are split into a number of inline boxes whilst those inline boxes that are never split are called atomic inline-level boxes. Anonymous inline boxes are those boxes over which developer has no control. If a block box ...
Read MoreIncluding CSS in HTML Documents
Adding CSS to an HTML document enhances the appearance of the web page. Various styles for the images, borders, margins, colors, can be easily added. To include CSS in HTML documents, we can either include them internally, inline or link an external file. Let us understand them with examples. Syntax The syntax for including CSS files in HTML is as follows − /*inline*/ /*internal*/ /*declarations*/ /*external*/ The following examples shows the linking of CSS file ...
Read MoreHow to use media queries for common device breakpoints with CSS?
Media Queries are used on a web page to set the responsiveness. It allows a user to set different styles based on different screen sizes. These screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes The common device breakpoints are the different devices with its screen size i.e. Phones − Screens less than 768px wide Tablets − Screens equal to or greater than 768px wide Small laptops − Screens equal to or greater than 992px wide Laptops and Desktops ...
Read More