Overview: So Today we will going to discuss some CSS properties which are advanced and not usually used frequently like other properties.
Float: The CSS float property is used to align the items to the left, right. That means we can create a simple layout using float. Nowadays float property isn’t used by the developers. Float property values are left, right and none using the default value is none we can align the element to the right using right and if we want if the element start’s in right then we can align them left if we want and we can also use the none value for removing the left, right value. When we use the float property sometimes we need the clear property as well because when we use the float property some elements are overlapped in other elements that are we need to use this clear property. In clear property set the value to left, right and both that means of the element overlapped on the left side then we can use the left value and if right then we can use the right value and if we need then we can add both values which will clear the overlapping from left and right as well.
Animation: We can make an animation to use in our webpage using CSS animation. To make animation we have to use the @keyframes this property. And here we can make different kinds of animation make first we have to define an animation-name so that we can call it where we need it. We can make animation in keyframes using from and to or using the units like %, pixel. We can use the animation where we want in CSS to call the animation we have to use the animation-name property, we can also more animation properties like animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state. And these properties have multiple values we can use all these properties in shorthand using only animation property.
*Variable: * we can make variables in CSS and these variables have access to the DOM, and CSS variables are can be global or local scope. To make a global variable in CSS what we have to do is we have to declare the variable inside the :root{} inside this we have to declare the variable using – two dashes like this root{–color: #ffffff;} and we have to use these variables using var(variable name) like this h2{background-color:var(--color)} the advantage of variable in CSS are it makes code easier to read and if we need any changes then we don’t need to change everywhere we can simply change the variable value.
Empty-cells: using empty-cell we can hide the cell border and background in the table. It tells the browser not to draw the borders around the table cell. The empty-cell property has two values shown and hides the default value is shown which means it will show the border whether the value is available or not and if we use the value hide the border will be hidden.
*Resize: * Using resize property we can set elements to resizable or in which direction. The default value of resize property is none. We can make the element resizeable from both sides using both values and the user will be able to make or resize the width and the height of the element. We can also make horizontal or vertical using the horizontal and vertical value in horizontal user can resize the element width and the vertical the user can be able to resize the height of the element. We can also use the value initial and inherit
Tab-size: The tab-size property mark the width of the tab character like if we add the value of tab-size 4 then it will take the width of 4 tab size. The tab character is usually displayed as a single space character, except for some elements like textarea, pre.
White-space: The white-space property is used to set the space inside an element, and it helps to control the line breaks, space within the element’s text. In white space, we can set the value to nowrap, normal, and pre, and the normal value is the default. If we use nowrap then our content will go out of the screen and the screen will be scrollable which is not responsive for mobile. And if we use the pre then the content/text will be aligned line depending on the screen.
Top comments (0)