CSS – Validations ”; Previous Next Validation is the process of checking something against a rule. When you are a beginner, it is very common that you will commit many mistakes in writing your CSS rules. How you will make sure whatever you have written is 100% accurate and up to the W3 quality standards? If you use CSS, your code needs to be correct. Improper code may cause unexpected results in how your page looks or functions. But if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid. Tool to check the validity of (X)HTML document: Validate (X)HTML document. You can use the following tools to check the validity of your CSS. W3C CSS Validator (World Wide Web Consortium), This validator checks your css by either file upload, direct input, or using URI – one page at a time. This validator helps you to locate all the errors in your CSS. The WDG CSS check validator, lets you validate your css by direct input, file upload, and using URI. Errors will be listed by line and column numbers if you have any. Errors usually come with links to explain the reason of error. A CSS validator checks your Cascading Style Sheets to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few validators which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation). Why Validate Your HTML Code? There are a number of reasons why you should validate your code. But major ones are − It Helps Cross-Browser, Cross-Platform, and Future Compatibility. A good quality website increases search engine visibility. Professionalism: As a web developer, your code should not raise errors while seen by the visitors. Print Page Previous Next Advertisements ”;
Category: css
CSS – References
CSS – References ”; Previous Next This comprehensive reference for web developers includes a list of all the CSS properties specified in the recommended specification for Cascading Style Sheets, by the World Wide Web Consortium. Following is the list of all CSS properties arranged alphabetically. A Property Description accent-color Sets a highlight color for controls on user interfaces. align-content Specifies how the flex lines are distributed inside a flex container along it”s cross-axis or grid”s block-axis. align-items Describes how objects inside a flexible container should be aligned. align-self Defines how selected objects inside a flexible container should be aligned. all Resets all the properties except unicode-bidi and direction. animation Applies animation between styles. Shorthand for all the animation properties. animation-delay Defines a pause before an animation begins. animation-direction Specifies whether an animation should play in reverse, forward, or alternating cycles. animation-duration Indicates the amount of time an animation should take to finish one cycle. animation-fill-mode Defines the styles to be applied on the target element before and after the animation. animation-iteration-count Defines how many times an animation should be played. animation-name Gives the @keyframes animation a name. animation-play-state Specifies whether an animation is running or paused. animation-timing-function Gives an animation”s speed curve specifications. aspect-ratio Defines an element”s desired aspect ratio. B Property Description backdrop-filter Defines a visual impact on the space behind an element. backface-visibility Specifies whether an element”s back face should be revealed when facing the user. background Shorthand property for all background style properties. background-attachment Determines if a background picture is fixed or gets scrolled with the page. background-blend-mode Sets the way the background images get blended with each other and with it”s background color. background-clip Defines the extension of the background within an element. background-color Defines the color of an element”s background. background-image Sets the background image for an element. background-origin Describes the location of a background image”s origin. background-position Sets the starting position of the background image. background-position-x Sets the position of the background image on the x-axis. background-position-y Sets the position of the background image on the y-axis. background-repeat Determines whether and how a background image should be repeated. background-size Defines the dimensions of the background image. border Sets the border of an element. border-block Shorthand for setting the logical block border property values. border-block-color Defines the color of the borders in the block direction at the start and end. border-block-end Shorthand property for setting the logical block end border properties. border-block-end-color Defines the color of the logical block-end border of an element. border-block-end-style Defines the style of the logical block-end border of an element. border-block-end-width Defines the width of the logical block-end border of an element. border-block-start Shorthand property for setting the logical block-start border properties. border-block-start-color Defines the color of the logical block-start border of an element. border-block-start-style Defines the style of the logical block start border of an element. border-block-start-width Defines the width of the logical block-start border of an element. border-block-style Defines the style of the logical block borders of an element. border-block-width Defines the width of the logical block borders of an element. border-bottom Shorthand property sets the element”s bottom border. border-bottom-color Sets the color of an element”s bottom border. border-bottom-left-radius Rounds the bottom-left corner of an element. border-bottom-right-radius Rounds the bottom-right corner of an element. border-bottom-style Sets the style of the bottom border. border-bottom-width Sets the width of the bottom border. border-collapse Specifies whether the borders of a table should be divided or collapsed into a single border. border-color Sets the color of the border(s). border-end-end-radius Defines a logical border radius on an element. border-end-start-radius Defines a logical border radius on an element. border-image Sets an image as border to an element. border-image-outset Defines how much of the border image area goes outside of the border box. border-image-repeat Specifies whether the border image should be stretched, rounded, or repeated. border-image-slice Divides the border image into regions. border-image-source Defines the path to the image that will be used as the border. border-image-width Sets the width of the border image. border-inline Shorthand property for setting the individual logical inline border property values. border-inline-color Defines the color of the logical inline borders of an element. border-inline-end Shorthand property for setting the logical inline-end border property values. border-inline-end-color Sets the color of the logical inline-end border. border-inline-end-style Sets the style of the logical inline-end border.
CSS – Box Sizing
CSS – Box Sizing ”; Previous Next The box-sizing property in CSS is used to define how the total width and height of an element is calculated. By default, the width and height of an element includes its content, padding, and border. However, with the box-sizing property, you can alter this behavior to include or exclude the padding and border from the width and height calculation. In older version of CSS (CSS2), the default way in which the box model worked made the element look bigger than the dimensions that were passed to it (width and height). width + padding + border = actual visible/rendered width of an element”s box height + padding + border = actual visible/rendered height of an element”s box CSS box sizing property The CSS box-sizing property is useful in adjusting the behaviour of the layout of the elements. Possible Values The box-sizing CSS property can have a value, that is a keyword, either of one of the following: content-box: This is the default value. When this value is passed to box-sizing property, it returns the default behavior, where padding or/and border are added in the total width and height of the element. border-box: When this value is passed to box-sizing property, it tells the browser to adjust the padding or margin values, that are passed to an element. This results in shrinking the content area and absorbing the border or/and padding specified for the element. It is the default styling used for <table>, <select>, <button>, and <input> elements. padding-box value is not supported by any browser and hence can not be passed to the box-sizing property. Applies to All the HTML elements that accept width or height. DOM Syntax object.style.boxSizing = “content-box | border-box”; Example Here is an example of CSS property box-sizing: border-box: <html> <head> <style> .with-content-box { width: 200px; height: 100px; padding: 10px; border: 3px solid green; background-color: rgb(241, 234, 85); box-sizing: content-box; } .with-border-box { width: 200px; height: 100px; padding: 10px; border: 3px solid rgb(64, 10, 215); background-color: lightpink; box-sizing: border-box; } </style> </head> <body> <div class=”with-content-box”>CONTENT BOX</div><br /> <div class=”with-border-box”>BORDER BOX</div> </body> </html> The example given above shows a clear difference between the box-sizing: border-box and box-sizing: content-box property values. Here the box-sizing: border-box property ignores the padding value in calculation of total width and height. Whereas the box-sizing: content-box property value includes the padding value in the calculation. For a smooth, fluid and intuitive responsive design, the box-sizing: border-box value can be set in the following manner: * { box-sizing: border-box; } The above syntax may not give desired results, as it ignores the pseudo-elements. So there is another syntax which includes the pseudo-elements for the reset. *, *:before, *:after { box-sizing: border-box; } This universal box sizing method will make the use of box-sizing: content-box | padding-box difficult. Hence, there is one more syntax that may be more useful and apt in such situations. html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } This universal box-sizing reset syntax is more useful and gives more flexibility to the users. Though every current browser supports the box-sizing: border-box, unprefixed; but some older versions of the browsers need support. In order to provide that support you may need to use the prefixes -webkit and -moz in the following manner: html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } Print Page Previous Next Advertisements ”;
CSS – Image Sprites
CSS – Image Sprites ”; Previous Next Image sprites are a technique used in web development to combine multiple images into a single image file. This approach can help reduce the number of server requests and improve website performance. Image sprites are commonly used for icons, buttons, and other small graphics on a website. CSS is then used to display specific parts of the sprite image as needed. Here”s a step-by-step guide on how to create and use image sprites in CSS: Step 1: Create The Sprite Image Create a single image file that contains all the individual images (icons, buttons, etc.) you want to use on your website. You can use software like Photoshop or a similar tool to arrange these images into a single image file. Save the sprite image in a suitable format like PNG or JPEG. Make sure the individual images within the sprite are well-organized with consistent spacing between them. Step 2: Add HTML Markup In your HTML document, you”ll need to add elements that will display the individual images from the sprite. Typically, you”ll use HTML elements like <div> or <span> for this purpose. Here”s an example: <html> <head> <!– CSS styling here –> </head> <body> <div class=”sprite-icon”></div> </body> </html> Step 3: Define CSS Classes In your CSS file / style tag (inline styling), define classes for each element that uses the sprite image. You”ll set the background-image to your sprite image and specify the background-position to display the desired part of the sprite. Here”s an example: .sprite-icon { width: 32px; /* Set the width of the displayed image */ height: 32px; /* Set the height of the displayed image */ background-image: url(”sprites.png”); /* Path to your sprite image */ background-position: -16px -16px; /* Position of the individual image within the sprite */ } In the above example, the background-position property is used to specify which part of the sprite image to display. The values (-16px, -16px) represent the position of the desired image within the sprite. By adjusting these values, you can display different images from the sprite. Step 4: Use The Sprites In HTML You can now use the CSS classes you defined in your HTML elements to display the individual images from the sprite: <div class=”sprite-icon”></div> Repeat this process for each element that needs to display an image from the sprite. CSS Image Sprites – Basic Example The following example demonstrates how to use CSS image sprites to display multiple images from a single image file. <html> <head> <style> .orignal-img { width: 300px; height: 100px; } ul { list-style: none; padding: 0; } li { height: 150px; display: block; } li a { display: block; height: 100%; } .bootstrap, .html, .css { width: 150px; height: 150px; background-image: url(”images/devices.png”); background-repeat: no-repeat; } .bootstrap { background-position: -5px -5px; } .html { background-position: -155px -5px; } .css { background-position: -277px -5px; } </style> </head> <body> <h3>Orignal Image</h3> <img class=”orignal-img” src=”images/devices.png”/> <h3>After implementing CSS image sprites</h3> <ul class=”navbar”> <li><a href=”#” class=”bootstrap”></a></li> <li><a href=”#” class=”html”></a></li> <li><a href=”#” class=”css”></a></li> </ul> </body> </html> CSS Image Sprites – Hover Effect The following example demostartes how to use image sprites to create a hover effect where the images become slightly transparent when you hover over them − <html> <head> <style> .orignal-img { width: 300px; height: 100px; } ul { list-style: none; padding: 0; } li { height: 150px; display: block; } li a { display: block; height: 100%; } .bootstrap, .html, .css { width: 150px; height: 150px; background-image: url(”images/devices.png”); background-repeat: no-repeat; } .bootstrap { background-position: -5px -5px; } .html { background-position: -155px -5px; } .css { background-position: -277px -5px; } .bootstrap:hover, .html:hover, .css:hover { opacity: 0.7; } </style> </head> <body> <h3>Orignal Image</h3> <img class=”orignal-img” src=”images/devices.png”/> <h3>After implementing CSS image sprites</h3> <ul class=”navbar”> <li><a href=”#” class=”bootstrap”></a></li> <li><a href=”#” class=”html”></a></li> <li><a href=”#” class=”css”></a></li> </ul> </body> </html> Print Page Previous Next Advertisements ”;
CSS – Animation
CSS – Animations ”; Previous Next CSS animations allows to create smooth transitions between different styles without using JavaScript. For example, What is CSS Animation? In CSS we can dynamically change styles of elements based on time duration, user interaction or state changes called CSS animations. It is implemented using the `@keyframes` rule to create the animation and the animation property to apply it to an element. Table of Contents CSS @keyframes Rule Animation Delay Property Set Animation Iteration Count Animation Direction Property Animation Timing Function Set Animation Fill Modes Animation Shorthand Property List of CSS Animation Properties The @keyframes Rule The `@keyframes` rule is used to define keyframes for animation specifying how the animated element look at various stage of animation. Consider following code that defines a keyframe rule. .box{ animation: colorChange 5s infinite; } @keyframes colorChange { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } This code will define animation for element with class `.box`, the name of animation is colorChange, run for 5 seconds and it repeats infinite number of times. The keyframe rule is defined for animation named colorChange. At 0% of total duration of animation( ie, 0 seconds) the background color will be red. At 50% of total time( ie, 2.5 seconds) the background color changes to green. At 100% of total duration( ie, 5 seconds) color changes to blue. Animation Delay Property We can set delay for starting an animation using animation-delay property. Check out following example You can also set negative value for animation-delay properties. If you are using a negative value -n, then the animation will start as if it had already been playing for n seconds. Example In this example ball will start to move left after 2 seconds. <!DOCTYPE html> <html lang=”en”> <head> <style> .ball { width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; position: absolute; left: 0; animation-name: moveRight; /* Set duration */ animation-duration: 2s; /* Set delay for animation */ animation-delay: 2s; } @keyframes moveRight { to { left: calc(100% – 50px); } } </style> </head> <body> <div class=”container”> <div class=”ball”></div> </div> </body> </html> Set Animation Iteration Count We can set number of times a animation should repeats itself using animation-iteration-count property. The CSS specification does not support negative values for this property. It can take value as a positive integer (e.g., 1, 2, 3, etc.) or keyword ”infinite” Example In this example we set ball iteration count to infinite. <!DOCTYPE html> <html lang=”en”> <head> <style> .ball { width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; position: absolute; left: 0; animation-name: moveRight; /* Set duration */ animation-duration: 2s; /* Set number of time animation repeats */ animation-iteration-count: infinite; } @keyframes moveRight { to { left: calc(100% – 50px); } } </style> </head> <body> <div class=”container”> <div class=”ball”></div> </div> </body> </html> Animation Direction Property We can specify the direction in which animation should run using animation-direction property. Following are the valid values for animation-direction property normal: The animation is played as normal (forwards). This is default. reverse: The animation is played in reverse direction (backwards). alternate: The animation is played forwards first, then backwards. alternate-reverse: The animation is played backwards first, then forwards. Example In this example we used inline css to set animation direction property. <!DOCTYPE html> <html lang=”en”> <head> <style> .ball { width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; position: relative; left:0; animation-name: moveRight ; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes moveRight { to { left: calc(100% – 50px); } } </style> </head> <body> <h2>animation-direction: normal</h2> <div class=”ball” style=”animation-direction: normal; “> </div> <h2>animation-direction: reverse</h2> <div class=”ball” style=”animation-direction: reverse;”> </div> <h2>animation-direction: alternate</h2> <div class=”ball” style=”animation-direction: alternate;”> </div> <h2>animation-direction: alternate-reverse</h2> <div class=”ball” style=”animation-direction: alternate-reverse;”> </div> </body> </html> Animation Timing Function In CSS, the animation-timing-function property is used to define speed curve of animation. It can take following values. ease: The animation will start slow, then fast, then end slowly (The default value). linear: Animation with the same speed from start to end. ease-in: Animation with a slow start. ease-out: Animation with a slow end. ease-in-out: Animation with a slow start and end. cubic-bezier(n,n,n,n): This lets us to define our own values for speed. To know more check out Cubic Bezier Function article. Example <!DOCTYPE html> <html lang=”en”> <head> <style> .ball { width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; position: relative; left:0; animation-name: moveRight ; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes moveRight { to { left: calc(100% – 50px); } } </style> </head> <body> <h2>linear</h2> <div class=”ball” style=”animation-timing-function: linear;”> </div> <h2>ease</h2> <div class=”ball” style=”animation-timing-function: ease;”> </div> <h2>ease-in</h2> <div class=”ball” style=”animation-timing-function: ease-in;”> </div> <h2>ease-out</h2> <div class=”ball” style=”animation-timing-function: ease-out;”> </div> <h2>ease-in-out</h2> <div class=”ball” style=”animation-timing-function: ease-in-out;”> </div> <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2> <div class=”ball” style=”animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);”> </div> </body> </html> Set Animation Fill Modes The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). The animation-fill-mode property can have the following values: none: The animation will not apply any style before or after it starts. This is default. forwards: At end of animation element will keep the style set by the last keyframe rule.
CSS – Masking
CSS Masking – mask ”; Previous Next CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element. This property is a shorthand for the following CSS properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size Possible Values none − This value removes the masking effect. <mask-reference> − Sets the image source for the mask. Refer mask-image. <masking-mode> − Determines whether an alpha or luminance mask should be applied to the mask reference specified by mask-image. Refer mask-mode. <position> − Determines the initial position for each defined mask image relative to the mask position layer set by mask-origin. Refer mask-position. <bg-size> − Defines the size of the mask image. Refer mask-size. <repeat-style> − Determines how the mask image are repeated. Refer mask-repeat. <geometry-box> − A single <geometry-box> value sets both mask-origin and mask-clip. If two values are present, the first sets the mask-origin and second mask-clip. <geometry-box> | no-clip − Determines the area affected by the mask-image. <compositing-operator> − This value specifies the compositing operation to be applied on the current mask layer. Refer mask-composite. Applies to All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements Syntax Keyword Values mask: none; Image Values mask: url(shop.png); mask: url(book.svg#star) Combined Values mask: url(heart.png) luminance; mask: url(heart.png) 40px 20px; mask: url(heart.png) 10px 10px / 100px 50px; mask: url(heart.png) repeat-y; mask: url(heart.png) border-box; mask: url(masks.svg#star) exclude; CSS mask – none Value The following example demonstrates that the mask: none property removes applied masking effect from the element − <html> <head> <style> .mask-none { width: 200px; height: 200px; background-image: url(“images/pink-flower.jpg”); background-color: red; -webkit-mask: url(images/heart.png); -webkit-mask-size: 100% 100%; } </style> </head> <body> <h2>Image with masking effect</h2> <div class=”mask-none”></div> <h2>Image without masking effect</h2> <div class=”mask-none” style=”mask:none”></div> </body> </html> CSS mask – <mask-reference> The following example demonstrates that the mask: URL() property sets the image source as a mask layer for the div element − <html> <head> <style> .mask-url { width: 200px; height: 200px; background-image: url(“images/pink-flower.jpg”); background-size: cover; -webkit-mask: url(images/heart.png); -webkit-mask-size: 100% 100%; } </style> </head> <body> <div class=”mask-url”></div> </body> </html> CSS mask – <masking-mode> The following example demonstrates that the -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; property, creates a colorful gradient mask along with luminance value that affects the brightness of the image − <html> <head> <style> img { display: block; width: 200px; height: 200px; -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”pink-flower”> </body> </html> CSS mask – <position> The following example demonstrates the mask image using the url(images/heart.png) value and the 40px 20px values to set the position of the mask − <html> <head> <style> .mask-container { width: 200px; height: 200px; background-image: url(“images/pink-flower.jpg”); background-size: cover; -webkit-mask: url(images/heart.png) 40px 20px; -webkit-mask-size: 100% 100%; } </style> </head> <body> <div class=”mask-container”></div> </body> </html> CSS mask – <bg-size> The following example demonstrates the mask image using the url(images/heart.png) value and 10px 10px values position the mask image, and 100px 50px sets the size of the mask − <html> <head> <style> .mask-container { width: 200px; height: 200px; background-image: url(“images/pink-flower.jpg”); background-size: cover; -webkit-mask: url(images/heart.png) 10px 10px / 100px 50px; -webkit-mask-size: 100% 100%; } </style> </head> <body> <div class=”mask-container”></div> </body> </html> CSS mask – <repeat-style> The following example demonstrates the mask image using the url(images/heart.png) value and repeat-y value indicates that the mask image should be repeated vertically − <html> <head> <style> .mask-container { width: 200px; height: 200px; background-image: url(“images/pink-flower.jpg”); background-size: cover; -webkit-mask: url(images/heart.png) repeat-y; -webkit-mask-size: 50px; -webkit-mask-position: center; } </style> </head> <body> <div class=”mask-container”></div> </body> </html> CSS mask – <geometry-box> The following example demonstrates the mask image using the url(images/shop.png) value and border-box value indicates that mask image is positioned and sized relative to the element”s border-box including border and padding − <html> <head> <style> .container { width: 250px; height: 200px; background-color: greenyellow; padding: 10px; } .masking-image { height: 120px; border: 20px solid red; padding: 10px; background-color: violet; -webkit-mask: url(”images/shop.png”) border-box; -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; } </style> </head> <body> <p>The image has a violet background, and the red border around it. The areas outside the border will remain visible.</h3> <div class=”container”><div class=”masking-image”></div></div> </body> </html> CSS mask – <geometry-box> | no-clip The following example demonstrates the mask image using the url(images/bookmark.png) value. The content-box value indicates that mask image is positioned and sized relative to the element”s content-box and no-clip value prevents the mask image from being clipped to the element”s content box. <html> <head> <style> .box { max-width: 300px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 220px; height: 220px; border: 20px solid red; -webkit-mask: url(images/bookmark.png) content-box no-clip; -webkit-mask-position: center center; -webkit-mask-repeat: repeat; -webkit-mask-size: 100px 100px; } </style> </head> <body> <div class=”box”> <div class=”mask-container”> <img src=”images/pink-flower.jpg” alt=”pink flower” width=”100%”> </div> </div> </body> </html> CSS mask – Related Properties Following is the list of CSS properties related to mask: property value mask-clip Defines the area of an element that is affected by a mask. mask-composite Defines the area of an element that is affected by a mask. mask-image Display or hide specific areas of an element. mask-position Determines where a mask image is placed on an element. mask-repeat Repetition of
CSS – Align
CSS – Align ”; Previous Next The term alignment, in context of web design and CSS, refers to the positioning and arrangement of elements or content within a layout, typically with respect to specific guidelines or reference points. Alignment is used to create visually pleasing and organized designs by ensuring that elements are positioned relative to each other or to the layout structure in a consistent and harmonious way. Alignment can be applied to various types of elements, including text, images, buttons, and more, to create a cohesive and polished design. CSS provides various properties that can be used to align the elements. There are two main aspects of alignment: Horizontal alignment: This refers to the positioning of elements along the horizontal axis, which typically runs from left to right. Common horizontal alignment options include: Left alignment: Elements are aligned to the left side of a container or layout. Center alignment: Elements are positioned in the center of a container or layout horizontally. Right alignment: Elements are aligned to the right side of a container or layout. Vertical alignment: This refers to the positioning of elements along the vertical axis, which typically runs from top to bottom. Common vertical alignment options include: Top alignment: Elements are aligned to the top of a container or layout. Middle or Center alignment: Elements are centered vertically within a container or layout. Bottom alignment: Elements are aligned to the bottom of a container or layout. CSS Align – position Property There are several ways to align an element to left. Let us see few ways to achieve this. With the use of the CSS property position, the alignment of elements can be adjusted. Here is an example of setting alignment using position: <html> <head> <style> .right-alignment { position: absolute; right: 0px; width: 100px; border: 3px solid #0d1601; background-color: rgb(244, 244, 135); padding: 10px; } .left-alignment { position: relative; left: 0px; width: 100px; border: 3px solid #0c1401; background-color: blanchedalmond; padding: 10px; } .center-alignment { margin: auto; border: 3px solid black; padding: 5px; background-color: rgb(241, 97, 126); width: 120px; position: relative; } </style> </head> <body> <div class=”right-alignment”> <h3>Right align</h3> <strong>Right align with position:absolute</strong> </div> <div class=”left-alignment”> <h3>Left align</h3> <strong>Left align with position:relative</strong> </div> <div class=”center-alignment”> <h3>Center align</h3> <strong>Vertically & horizontally centered using position:relative and margin:auto.</strong> </div> </body> </html> Note: Absolute positioned elements are removed from the normal flow, and can overlap elements. CSS Align – float Property With the use of the CSS property float, the alignment of elements can be adjusted. Here is an example of setting alignment using float: <html> <head> <style> .right-alignment { float: right; width: 100px; border: 3px solid #0d1601; background-color: rgb(244, 244, 135); padding: 10px; } .left-alignment { float: left; left: 0px; width: 100px; border: 3px solid #0c1401; background-color: blanchedalmond; padding: 10px; } </style> </head> <body> <div class=”right-alignment”> <h3>Right align</h3> <strong>Right align with float:right</strong> </div> <div class=”left-alignment”> <h3>Left align</h3> <strong>Left align with float:left</strong> </div> </body> </html> CSS Align – text-align Property To align the text inside an element, use the property text-align. Here is an example to align the text inside a <div> element: <html> <head> <style> div { width: 300px; border: 3px solid #0d1601; padding: 10px; margin-bottom: 1cm; } .right-alignment { text-align: right; color:red; } .left-alignment { text-align:left; color:green; } .center-alignment { text-align: center; color:blue; } </style> </head> <body> <div class=”right-alignment”> <h3>Right align</h3> <strong>Text right aligned</strong> </div> <div class=”left-alignment”> <h3>Left align</h3> <strong>Text left aligned</strong> </div> <div class=”center-alignment”> <h3>Center align</h3> <strong>Text center aligned</strong> </div> </body> </html> CSS Align – padding Property A piece of text can be centered vertically using padding CSS property. <html> <head> <style> .center-alignment { padding: 100px 0; border: 3px solid black; margin: 5px; background-color: lightblue; } </style> </head> <body> <div class=”center-alignment”> <p>Vertically centerd using padding.</p> </div> </body> </html> CSS Align – Center Text Here is an example if you want to center the text vertically as well as horizontally, you need to use text-align:center along with padding: <html> <head> <style> .center-alignment { padding: 100px 0; text-align: center; border: 3px solid black; margin: 5px; background-color: lightblue; } </style> </head> <body> <div class=”center-alignment”> <p>Vertically & horizontally centerd using padding and text-align properties.</p> </div> </body> </html> CSS Align – justify-content Property Here is an example if you want to center the text vertically as well as horizontally, using flex and justify-content properties: <html> <head> <style> .center-alignment { display: flex; justify-content: center; align-items: center; height: 300px; border: 3px solid black; font-size: larger; background-color: lightblue; } </style> </head> <body> <div class=”center-alignment”> <p>Vertically & horizontally centered using flex and justify-content.</p> </div> </body> </html> CSS Align – Related Properties Following table lists all the properties related to alignment: Property Description align-content Aligns the content of a flex container along the cross-axis or a grid”s block axis. align-items Controls the alignment of items of a flex container along the cross-axis. align-self Controls the alignment of an individual item within a container. vertical-align Determines the vertical alignment of inline, inline-block or a table cell text. line-height Sets the distance between lines of text. text-align Sets the horizontal alignment of inline, inline-block or a table cell text. margin Shorthand for margin values that can modify the alignment. Print Page Previous Next Advertisements ”;
CSS – Color References
CSS – Color References ”; Previous Next The following table shows the 16 color names that were introduced in HTML 3.2, to support the 16 colors that 8-bit graphics cards offered. Same set of color can be used in CSS − Color Name Hex Value Color Show aqua #00ffff Demo black #000000 Demo blue #0000ff Demo fuchsia #ff00ff Demo green #008000 Demo gray #808080 Demo lime #00ff00 Demo maroon #800000 Demo navy #000080 Demo olive #808000 Demo purple #800080 Demo red #ff0000 Demo silver #c0c0c0 Demo teal #008080 Demo white #ffffff Demo yellow #ffff00 Demo There are other colors, which are not part of HTML or XHTML but they are supported by most of the versions of IE or Netscape. These color names can be used in CSS as well. Color Name Hex Value Color Show aliceblue #f0f8ff Demo antiquewhite #faebd7 Demo aquamarine #7fffd4 Demo azure #f0ffff Demo beige #f5f5dc Demo bisque #ffe4c4 Demo blanchedalmond #ffebcd Demo blueviolet #8a2be2 Demo brown #a52a2a Demo burlywood #deb887 Demo cadetblue #5f9ea0 Demo chartreuse #7fff00 Demo chocolate #d2691e Demo coral #ff7f50 Demo cornflowerblue #6495ed Demo cornsilk #fff8dc Demo crimson #dc143c Demo cyan #00ffff Demo darkblue #00008b Demo darkcyan #008b8b Demo darkgoldenrod #b8860b Demo darkgray #a9a9a9 Demo darkgreen #006400 Demo darkkhaki #bdb76b Demo darkmagenta #8b008b Demo darkolivegreen #556b2f Demo darkorange #ff8c00 Demo darkorchid #9932cc Demo darkred #8b0000 Demo darksalmon #e9967a Demo darkseagreen #8fbc8f Demo darkslateblue #483d8b Demo darkslategray #2f4f4f Demo darkturquoise #00ced1 Demo darkviolet #9400d3 Demo deeppink #ff1493 Demo deepskyblue #00bfff Demo dimgray #696969 Demo dodgerblue #1e90ff Demo firebrick #b22222 Demo floralwhite #fffaf0 Demo forestgreen #228b22 Demo gainsboro #dcdcdc Demo ghostwhite #f8f8ff Demo gold #ffd700 Demo goldenrod #daa520 Demo gray #808080 Demo greenyellow #adff2f Demo honeydew #f0fff0 Demo hotpink #ff69b4 Demo indianred #cd5c5c Demo indigo #4b0082 Demo ivory #fffff0 Demo khaki #f0e68c Demo lavender #e6e6fa Demo lavenderblush #fff0f5 Demo lawngreen #7cfc00 Demo lemonchiffon #fffacd Demo lightblue #add8e6 Demo lightcoral #f08080 Demo lightcyan #e0ffff Demo lightgoldenrodyellow #fafad2 Demo lightgreen #90ee90 Demo lightgrey #d3d3d3 Demo lightpink #ffb6c1 Demo lightsalmon #ffa07a Demo lightseagreen #20b2aa Demo lightskyblue #87cefa Demo lightslategray #778899 Demo lightsteelblue #b0c4de Demo lightyellow #ffffe0 Demo limegreen #32cd32 Demo linen #faf0e6 Demo magenta #ff00ff Demo mediumblue #0000cd Demo mediumorchid #ba55d3 Demo mediumpurple #9370db Demo midnightblue #191970 Demo mistyrose #ffe4e1 Demo moccasin #ffe4b5 Demo oldlace #fdf5e6 Demo orange #ffa500 Demo orchid #da70d6 Demo peachpuff #ffdab9 Demo peru #cd853f Demo pink #ffc0cb Demo plum #dda0dd Demo purple #800080 Demo rosybrown #bc8f8f Demo royalblue #4169e1 Demo salmon #fa8072 Demo sandybrown #f4a460 Demo seagreen #2e8b57 Demo sienna #a0522d Demo skyblue #87ceeb Demo slateblue #6a5acd Demo steelblue #4682b4 Demo tan #d2b48c Demo thistle #d8bfd8 Demo tomato #ff6347 Demo violet #ee82ee Demo wheat #f5deb3 Demo whitesmoke #f5f5f5 Demo yellow #ffff00 Demo yellowgreen #9acd32 Demo Print Page Previous Next Advertisements ”;
CSS – Paged Media
CSS Paged Media ”; Previous Next CSS paged media refers to a set of CSS modules that enable the styling of documents for printing or displaying on other media. CSS paged media provides additional features and properties specifically designed for printed documents. Using CSS paged media modules, you can create stylesheets that are specifically tailored for printed output, ensuring that the content looks good when it is printed on paper. This is particularly useful for generating reports, books, and other documents where the printed presentation is important. CSS Paged Media – Related Properties Following is the list of CSS properties related to paged media: property value break-after To break the page after an element. This is useful for controlling the layout of printed pages. break-before To break the page before an element. This is useful for controlling the layout of printed pages. break-inside To break the page inside an element. This is useful for controlling the layout of printed pages. orphans Specify the starting minimum number of lines placed at the bottom of the page. widows Specify the last minimum number of lines placed at the top of the page. CSS at-rules Following is the list of CSS at-rules related to paged media: property value @page Specify the styles for printed pages when a web page is printed. CSS Pseudo-Classes Following is the list of CSS pseudo-classes related to paged media: property value :first Selects the first page of a printed document. :left Represents all left-hand pages of a printed document. :right Represents all right-hand pages of a printed document. Print Page Previous Next Advertisements ”;
CSS – Image Gallery
CSS – Image Gallery ”; Previous Next CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to control the layout of the images, their size, spacing, and other visual properties. CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way. To create a simple image gallery, you can follow these steps: Use a HTML container element, such as <div>. Add the images to the container element. You can use an <img> tag to display the images. Each image should be wrapped in an <a> tag to make them clickable. Add the display: flex property to the div container element. Add flex-flow: row wrap property to set the direction of the flex container to row. Simple Image Gallery The following example shows a simple image gallery layout that is displayed in a row − <html> <head> <style> .image-gallery { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .image-gallery img { width: 25%; height: 250px; } </style> </head> <body> <div class=”image-gallery”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <img src=”images/white-flower.jpg” alt=”White Flower”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> </div> </body> </html> Image Gallery With a Hover Effect You can make a simple and effective image gallery with a hover effect. When the user hovers over an image, it will become larger and have a red border added to it. Here is an example − <html> <head> <style> .image-gallery { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .image-gallery .image-item { width: 30%; text-align: center; } .image-gallery img { width: 100%; height: 220px; transition: transform 0.2s; } .image-gallery .image-item:hover { transform: scale(1.1); border: 3px solid red; } .image-description { margin-top: 10px; } </style> </head> <body> <h3>Hover over the images to see the effect</h3> <div class=”image-gallery”> <div class=”image-item”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <div class=”image-description”>Red Flower</div> </div> <div class=”image-item”> <img src=”images/see.jpg” alt=”White Flower”> <div class=”image-description”>See</div> </div> <div class=”image-item”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> <div class=”image-description”>Orange Flower</div> </div> </div> </body> </html> Responsive Image Gallery Using Media Query You can use CSS media queries to create a responsive image gallery that scales and rearranges its content based on the screen width, providing an optimal viewing experience on different devices and screen sizes. On smaller screens, the images will be wider and more spaced apart. Syntax @media [media query] { /* CSS rules to apply if the media query matches */ } Here is an example − <html> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> .image-gallery { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .image-gallery .image-item { width: 30%; text-align: center; } .image-gallery img { width: 100%; height: 220px; transition: transform 0.2s; } .image-gallery .image-item:hover { transform: scale(1.1); border: 3px solid red; } .image-description { margin-top: 10px; } @media only screen and (max-width: 800px) { .image-gallery .image-item { width: 40%; margin: 20px; } } @media only screen and (max-width: 300px) { .image-gallery .image-item { width: 100%; margin: 20px; } } </style> </head> <body> <h3>Resize the browser window to see the effect.</h3> <div class=”image-gallery”> <div class=”image-item”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <div class=”image-description”>Red Flower</div> </div> <div class=”image-item”> <img src=”images/see.jpg” alt=”White Flower”> <div class=”image-description”>See</div> </div> <div class=”image-item”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> <div class=”image-description”>Orange Flower</div> </div> <div class=”image-item”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <div class=”image-description”>Red Flower</div> </div> <div class=”image-item”> <img src=”images/see.jpg” alt=”White Flower”> <div class=”image-description”>See</div> </div> <div class=”image-item”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> <div class=”image-description”>Orange Flower</div> </div> </div> </body> </html> The following screenshot shows image gallery layout on full screen mode: The following screenshot shows how an image gallery would be displayed on a screen with a maximum width of 800px: The following screenshot shows how an image gallery would be displayed on a screen with a maximum width of 300px: CSS Image Gallery With Horizontal Scroll The example shows how to create an image gallery with a horizontal scrollable layout using the overflow property − <html> <head> <style> .image-gallery { overflow: auto; white-space: nowrap; padding: 5px; background-color: #78e756; } .image-gallery img { width: 25%; height: 250px; margin: 10px; } </style> </head> <body> <div class=”image-gallery”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <img src=”images/white-flower.jpg” alt=”White Flower”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <img src=”images/white-flower.jpg” alt=”White Flower”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> </div> </body> </html> CSS Image Gallery With Vertical Scroll The following example shows how to create an image gallery with a vertical scrollable layout using the overflow property − <html> <head> <style> .image-gallery { overflow: auto; padding: 5px; background-color: #78e756; } .image-gallery img { width: 30%; height: 250px; margin: 10px; } </style> </head> <body> <div class=”image-gallery”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <img src=”images/white-flower.jpg” alt=”White Flower”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> <img src=”images/red-flower.jpg” alt=”Red Flower”> <img src=”images/white-flower.jpg” alt=”White Flower”> <img src=”images/orange-flower.jpg” alt=”Orange Flower”> </div> </body> </html> CSS Grid Image Gallery The following example demonstrates a simple image gallery that has three different views: three images, two images, or full width. When you click on one of the buttons, the gallery will switch to the corresponding layout. <html> <head> <style> .image-gallery { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .image-container { width: 30%; height: 250px; margin: 10px; display: flex; justify-content: center; align-items: center; } .image-container img { width: 100%; height: 100%; margin: 10px; } .two-columns .image-container { width: 45%; margin: 10px; } .full-width .image-container { width: 100%; margin: 20px; } .button-container { text-align: center; } .button-container button { background-color: #7dfa2a; border: none; padding: 10px 20px; margin: 15px; } </style> </head> <body> <div class=”button-container”> <button onclick=”showFourImages()”>Three Images</button> <button onclick=”showTwoImages()”>Two Images</button> <button onclick=”showFullWidth()”>Full Width</button> </div> <div class=”image-gallery”> <div class=”image-container”> <img src=”images/red-flower.jpg” alt=”Red Flower”> </div> <div class=”image-container”> <img