css Archives - Page 5 of 13 - Donotsad where can learn any thing work project and make money

Aug 10

CSS – Tooltips

CSS – Tooltips ”; Previous Next CSS tooltips are like little boxes of information that appear when you hover the mouse over some element on a webpage. These tooltips give you more information about a specific element on a web page, only when you hover over an element. Creating Tooltip We can create tooltops using only CSS and HTML. Set up a tooltip using a container element, such as div. Create a div element and add a CSS class tooltip to it. Place the tooltip text inside an inline element, such as span, using class .tooltiptext. When the user moves the mouse pointer over the container element, the tooltip text inside the span element is displayed. The following example demonstrates how to create tooltips using CSS. The tooltip is displayed when the user hovers over the text. <html> <head> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <h2>Hover over the text below to see the tooltip</h2> <div class=”tooltip”> Hover over this text <span class=”tooltiptext”>This is a tooltip</span> </div> </body> </html> In the above example , the position: relative; property is applied to the .tooltip class. It allows child elements with position: absolute; to be positioned relative to the tooltip container. .tooltip { position: relative; } The .tooltiptext class is responsible for styling the tooltip text. It is set to display: none; by default, making it hidden. When you hover over the parent element .tooltip, this class will become visible. .tooltip { position: relative; } The :hover pseudo-class is used along with the .tooltip class to make the .tooltiptext class visible when the user hovers over the tooltip container. .tooltip:hover .tooltiptext { display: block; /* Show the tooltip text on hover */ } Positioning Tooltips Some tooltips have the task of determining the position of the tooltip and ensuring stable placement. We have four main ways for displaying elements using tooltips. Top Tooltip Bottom Tooltip Right Tooltip Left Tooltip Top Tooltip This tooltip shows information above the element. When you hover the mouse over some specified element, the tooltip appears above that element on the webpage, displaying text of tooltip. This is known as top tooltip. The following example demonstrates how to create tooltips that appear at the top of an element when hovered over. <html> <head> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; top: -50px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <h2>Hover over the text to see the top tooltip</h2> <div class=”tooltip”> Hover over this text <span class=”tooltiptext”>This is a top tooltip</span> </div> </body> </html> Bottom Tooltip This tooltip shows information below the element. When you move the mouse over some specified element, the tooltip appears at the bottom of that element on the webpage, displaying text of tooltip. This is known as bottom tooltip. The following example demonstrates a tooltip that appears at the bottom of an element when hovered over. <html> <head> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; top: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <h2>Bottom Tooltip Example</h2> <div class=”tooltip”> Hover over this text <span class=”tooltiptext”>This is a bottom tooltip</span> </div> </body> </html> Right Tooltip This tooltip is designed to show information to the right of the element. When you move the mouse over some specified element, the tooltip appears on the right side of that element on the webpage, displaying text of tooltip. This is known as right tooltip. The following example demonstrates a tooltip that appears on the right side of an element when hovered over. <html> <head> <style> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; top: -5px; left: 110%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <h2>Right Tooltip Example</h2> <div class=”tooltip”> Hover over this this text <span class=”tooltiptext”>This is a right tooltip</span> </div> </body> </html> Left Tooltip This tooltip is designed to show information to the left of the element. When you move the mouse over some specified element, the tooltip appears on the left side of that element on the webpage, displaying text of tooltip. This is known as left tooltip. The following example demonstartes a tooltip that appears on the left side of an element when hovered over. <html> <head> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; right: 110%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <body style=”text-align:center;”> <h2>Left Tooltip Example</h2> <div class=”tooltip”> Hover over this text <span class=”tooltiptext”>This is a left tooltip</span> </div> </body> </html> Tooltip Arrows To create a tooltip arrow on one side, we use the pseudo-element class ::after along with the content property, adding empty

Aug 10

CSS – @ Rules

CSS – @ Rules ”; Previous Next In CSS, at-rules are special instructions or statements that begin with the “@” symbol. They are used to control or modify the behavior of the stylesheet and are typically used for tasks such as defining media queries, importing external stylesheets, or specifying font faces. At-rules are a way to extend and enhance the capabilities of CSS beyond basic selectors and property-value pairs. An at-rule begins with at (@) sign, followed by an identifier and further includes everything upto the next semicolon (;) or next CSS block. Syntax /* General structure */ @identifier (RULE); Types of @ Rules Regular CSS provides different regular at-rules, based on the identifier and each has a different syntax. @charset: Specifies the character encoding of an external stylesheet. @import: Used to import an external CSS file into the current stylesheet. @namespace: Used to declare and define XML namespaces within a CSS stylesheet. Nested A subset of nested statements that serve as both standalone style sheet statements and components within conditional group rules. @media: Content of conditional group rule gets applied, if the device meets the criteria of the condition defined using media query. @supports: Content of conditional group rule gets applied, if the given condition is met by the browser. @page: Defines the layout of printed pages. @font-face: Defines custom fonts to be used in a web page. @keyframes: Defines the aspect of intermediate steps in a CSS animation sequence. @counter-style: Defines the different custom counter styles that are not predefined. @font-feature-values: Defines the common names in font-variant-alternates for feature activated in OpenType. It deals with the usage of alternate glyphs and these glyphs are defined in @font-feature-values @property: Defines the usage of custom properties and variables. @layer: Defines a layer and sets the order of precedence, when there are multiple cascade layers. CSS @ Rules – @page Example Here is an example of usage of @page: <html> <head> <style> @page :first { margin-left: 80%; margin-top: 80%; } p { page-break-after: always; } </style> </head> <body> <p>Page One.</p> <p>Page Two.</p> <button>Print</button> <script> document.querySelector(“button”).addEventListener(“click”, () => { window.print(); }); </script> </body> </html> CSS @ Rules – @keyframes Example Here is an example of usage of @keyframes: <html> <head> <style> p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </style> </head> <body> <p> The text appears from right to left </p> </body> </html> CSS @ Rules – @property Example Here is an example of usage of @property: <html> <head> <style> @property –item-size { syntax: “<percentage>”; inherits: true; initial-value: 40%; } .container { display: flex; height: 100px; border: 3px dotted black; /* set custom property values on parent */ –item-size: 50%; –item-color: tomato; –item-border: 5px solid green; } /* use custom properties to set item size and background color */ .item { width: var(–item-size); height: var(–item-size); border: var(–item-border); background-color: var(–item-color); } /* set custom property values on element itself */ .second { –item-size: initial; –item-color: inherit; } </style> </head> <body> <div class=”container”> <div class=”first item”>First Item</div> <div class=”second item”>Second Item</div> </div> <script> window.CSS.registerProperty({ name: “–item-color”, syntax: “<color>”, inherits: false, initialValue: “peachpuff”, }); </script> </body> </html> CSS @ Rules – Rule List The table given below lists all the CSS @ Rules: @Rule Example @charset @charset “UTF-8”; @container @container (width > 400px) { h1 {font-size: 2em;} } @counter-style @counter-style sample {} @font-face @font-face { font-family: “CustomFont”; src: url(“customfont.woff2”) format(“woff2”); } @font-feature-value @font-feature-values “CustomFont” {@swash { fancy: 2; }} @font-palette-values @font-palette-values One { font-family: “Bungee Spice”;} @import @import ur(); @keyframes @keyframes sample-slide { from { transform: translateY(100%) } } @layer @layer sample-layer{ .margin-lg { margin: 5px; } } @media @media screen and (max-width: 600px) {} @namespace @namespace svg url(); @page @page { size: 5in 6in; margin-left: 4in } @property @property sample-property { rules } @supports @supports (transform-origin: 10% 10%) {} Print Page Previous Next Advertisements ”;

Aug 10

CSS – Flexbox

CSS – Flexbox ”; Previous Next Flexbox organizes elements within a container along a single dimension, which can be either horizontally or vertically aligned. What is CSS Flexbox? CSS flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container. In this article we will cover all the properties for managing the positioning, alignment, and gaps between elements along both the main and cross axes briefly. Table of Contents Elements of Flexbox Basic Flexbox Layout Vertical Flexbox Layout Flexbox Justify Content Flexbox Align Items Centering a Div Flexbox Wrap Property Flexbox Align Self Flexbox Container Properties Flexbox Items Properties Elements of Flexbox Flexbox Container: The flex container defines the outer element of flexbox, where all the child elements are present. A flexbox container can be defined by setting ”display: flex” or ”display: inline-flex”. Flexbox items: Flexbox items are direct children of flexbox container. This items can be arranged vertically and horizontally inside flexbox container based on need. Main Axis: Main axis is primary axis along which items arranged in a container. By default this is horizontal axis. Cross Axis: >Cross axis is perpendicular axis to primary axis. By default this is vertical axis. Following Diagram will demonstrate the CSS Flexbox: Basic Flexbox Layout Flexbox is commonly used to create responsive flexbox layout. Example <!DOCTYPE html> <html lang=”en”> <head> <style> .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100vh; } .item { background-color: lightcoral; padding: 20px; margin: 10px; border: 3px solid #ccc; } </style> </head> <body> <div class=”container”> <div class=”item”>Item 1</div> <div class=”item”>Item 2</div> <div class=”item”>Item 3</div> </div> </body> </html> Vertical Flexbox Layout In CSS, we can also define vertical flexbox by setting `flex-direction: column`. Example <!DOCTYPE html> <html lang=”en”> <head> <style> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .item { background-color: lightseagreen; padding: 20px; margin: 10px; border: 3px solid #ccc; } </style> </head> <body> <div class=”container”> <div class=”item”>Item 1</div> <div class=”item”>Item 2</div> <div class=”item”>Item 3</div> </div> </body> </html> Flexbox Justify Content Property The `justify-content` property is commonly used inside flexbox containers to align flexbox items inside container. There are several values possible for this property, for a complete reference of justify-content property visit our tutorial on justify-content property. Some of the commonly used values of justify-content is noted down below. There are lot more values associated with it. // Align Item at center of main axis justify-content: center; // Align Item at start of main axis justify-content: flex-start; // Align Item at end of main axis justify-content: flex-end; // Align Item at left side of main axis justify-content: left; // Align Item at right side of main axis justify-content: right; Flexbox Align Items Property The `align-items` property in CSS is used to align flex items across cross axis (vertical axis in a row layout, horizontal axis in a column layout) of the container. There are several values associated with this property. To learn more about `align-items` property visit our tutorial on CSS Align Items. // Align items at start of cross axis of container align-items: flex-start; // Align items at end of cross axis of container align-items: flex-end; // Align items at center of cross axis of container align-items: center; // Align baselines of items (For items with variable sizes) align-items: baseline; // Stretch items along cross axis to fill container align-items: stretch; Centering a Div using Flexbox Centering a div element( or any other elements ) is always a challenging and most discussed problem in CSS. With the help of CSS flexbox we can easily center a div element inside a container. We have to use `justify-content` and `align-items` properties to center items, following code shows how this is done. Example <!DOCTYPE html> <html lang=”en”> <head> <style> .flex-container { display: flex; /* Center horizontally */ justify-content: center; /* Center Vertically */ align-items: center; border: 1px solid #ccc; height: 250px; background-color: grey; } .flex-item { background-color: lightblue; border: 1px solid #333; padding: 5px; height: 70px; width: 70px; } </style> </head> <body> <div class=”flex-container”> <div class=”flex-item”> This div is in center of container </div> </div> </body> </html> Flexbox Wrap Property Flexbox with wrap property allows items within a container to move to next line when there is no enough space in a single line. This helps to maintain a responsive layout. Following code demonstrates how to use flexbox to create a responsive layout that centers its items and wraps them to fit within the available space. For a complete guidance on flex wrap, visit our tutorial on CSS flex-wrap. .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .item { padding: 20px; margin: 10px; /* base size 100px */ flex: 1 1 100px; } Flexbox Align Self Property In CSS, we have `align-self` property which can be used to override `align-items` property set on container. This helps to dynamically place each items at special locations inside container. Following code shows how to use `align-self` property. Here we can see that `align-items: stretch` is not applicable to second and third items, this property is override by `align-self` property of items. .container { display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; height: 250px; } .item { background-color: lightpink; padding: 20px; margin: 10px; border: 1px solid #ccc; } .item:nth-child(2) { /* Center 2nd item along the cross axis */ align-self: center; }

Aug 10

CSS – Pseudo Elements

CSS – Pseudo Elements ”; Previous Next CSS pseudo-elements are used to style specified parts of an element. While browsing a webpage, you might have noticed that the first letter of some paragraphs is larger than rest of letters. This type of styling for a specific part of elements is done using pseudo-elements in CSS. In this tutorial we will explain all the pseudo-elements and their functioning. Table of Contents What is Pseudo-Element? Insertion Pseudo-Elements CSS Backdrop Pseudo-Element CSS Cue Pseudo-Element CSS First-Letter Pseudo-Element CSS First-Line Pseudo-Element CSS File-Selector-Button CSS Marker Pseudo-Element CSS Placeholder Pseudo-Element CSS Selection Pseudo-Element Multiple Pseudo-elements All CSS Pseudo-Elements What is Pseudo-Element? A pseudo-element in CSS, is used to style a specific part of an element that are not the part of the DOM (Document Object Model) and do not exist in the HTML markup. For Example first letter of a paragraph, placeholder text inside input element or selected part in a document. Pseudo-elements are denoted by a double colon (::) notation. Only one pseudo-element can be used in a selector. A pseudo-element in a selector must appear after all the other components. For example, p::last-line:hover is invalid. Pseudo-elements can be used to add decorative styles, create special effects, and modify the appearance of certain parts of an element, that has a state already applied to it. For example, p:hover::last-line is a valid statement and selects the last line of the paragraph when the paragraph is hovered Syntax selector::pseudo-element { property: value; } The single colon syntax is supported by the browsers for the four original pseudo-elements, i.e., ::before, ::after, ::first-line, and ::first-letter. Content Insertion Pseudo-Elements In CSS, pseudo-elements ::before and ::after are used to insert text contents or images before and after any element. Example This example shows how to insert text and images at start and end of a paragraph using CSS. <!DOCTYPE html> <html> <head> <style> p:before { content: “NOTE:”; font-weight: bold; } p:after { content: url(/css/images/smiley.png); } </style> </head> <body> <p> We inserted intro at start and emoji at end. </p> </body> </html> CSS Backdrop Pseudo-Element In CSS the ::backdrop pseudo-element is used to style the backdrop of an element that is in a modal context, such as the backdrop behind a <dialog> element when it is shown. Example Following example demonstrates use of ::backdrop pseudo-element. <!DOCTYPE html> <html> <head> <style> body{ height: 200px; } dialog { padding: 20px; border: 2px solid black; border-radius: 10px; } dialog::backdrop { /* Semi-transparent black */ background-color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <h3> Backdrop Example </h3> <dialog id=”myDialog”> <p> This is a dialog with a styled backdrop. </p> <button id=”closeButton”> Close </button> </dialog> <button id=”openButton”>Open Dialog</button> <script> const dialog = document.getElementById(”myDialog”); const openButton = document.getElementById(”openButton”); const closeButton = document.getElementById(”closeButton”); openButton.addEventListener(”click”, () => { dialog.showModal(); }); closeButton.addEventListener(”click”, () => { dialog.close(); }); </script> </body> </html> CSS Cue Pseudo-Element In CSS, the pseudo-element ::cue is used with Web Video Text Tracks to style specific parts of text tracks, such as subtitles or captions, for media elements like <video> and <audio>. Example Following example demonstrates use of ::cue pseudo-element: <!DOCTYPE html> <html> <head> <style> video { width: 100%; } video::cue { font-size: 1rem; color: peachpuff; } </style> </head> <body> <video controls src=”/css/foo.mp4″> <track default kind=”captions” srclang=”en” src=”/css/cue-sample.vtt” /> </video> </body> </html> CSS First-Letter Pseudo-Element In CSS, the ::first-letter pseudo-element is used to target the first letter of text content of any elements like div, paragraph, span etc Example Following example demonstrates use of ::first-letter pseudo-element: <!DOCTYPE html> <html> <head> <style> p::first-letter { text-transform: uppercase; font-size: 2em; color: darkred; font-style: italic; } </style> </head> <body> <p> this is a paragraph with first letter in lowercase, we used ::first-letter pseudo-element to capitalize first-letter of paragraph with a larger font size and a different color. </p> </body> </html> CSS First-Line Pseudo-Element In CSS, the ::first-line pseudo-element is used to target the first line of text content of any elements like div, paragraph, span etc Example Following example demonstrates use of ::first-line pseudo-element: <!DOCTYPE html> <html> <head> <style> p::first-line { background-color: #f0f0f0; color: darkred; font-style: italic; } </style> </head> <body> <p> This is a normal paragraph with no stylings, we used ::first-line pseudo-element to only style first-line of paragraph by adding a background color, font-style and text color </p> </body> </html> CSS File-Selector-Button Pseudo-Element In CSS, the ::file-selector-button pseudo-element is used to style the button of a file input element (<input type=”file”>) in modern browsers. Example Following example demonstrates use of ::file-selector-button pseudo-element: <!DOCTYPE html> <html> <head> <style> body { display: block; height: 100px; } input::file-selector-button { background-image:url(/css/images/border.png); background-size: 200%; border: 2px solid black; border-radius: 8px; font-weight: 600; color: rgb(6, 1, 9); padding: 15px; transition: all 0.25s; } </style> </head> <body> <h2> Select a file </h2> <input type=”file”> </body> </html> CSS Marker Pseudo-Element In CSS, the ::marker pseudo-element is used to style the marker of ordered list and unordered list. Example Following example demonstrates use of ::marker pseudo-element: <!DOCTYPE html> <html> <head> <style> ol li::marker { color: rgb(11, 38, 241); font-weight: bold; } ul li::marker { content: url(”/css/images/smiley.png”) } </style> </head> <body> <h2>Numbered list</h2> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> <h2>Bulleted list</h2> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </body> </html> CSS Placeholder Pseudo-Element In CSS, the ::placeholder pseudo-element

Aug 10

CSS – 3d transform

CSS – 3D Transforms ”; Previous Next CSS provides a set of properties that allow you to transform and adjust the elements in the three-dimensional space. The properties that let you transform the elements include 3D translations, rotations, scaling, perspective adjustments, etc. The following table lists all the various properties that are used to transform the elements in the three-dimensional space: Property Description backface-visibility Sets the visibility of back face of an element to the user. perspective Determines the distance between the z=0 plane and the user. perspective-origin Determines the position at which the user is looking at the 3D-positioned element. rotate Rotates an element in the three-dimensional space. scale Scales an element in the three-dimensional space. transform Transforms an element in the three-dimensional space. transform-style Sets the position of the children of an element in three-dimensional space or keeps it flattened in the plane. translate Translates an element in three-dimensional space. matrix3d() Function that defines a three-dimensional transformation as a 4×4 homogeneous matrix. perspective() Function that determines the distance between the z=0 plane and the user. rotate3d() Rotates an element around a fixed axis in three-dimensional space. rotateZ() Rotates an element around the z-axis. scale3d() Scales an element up or down in three-dimensional space. scaleZ() Scales an element up or down along the z-axis. translate3d() Translates an element in three-dimensional space. translateZ() Translates an element up or down along the z-axis. Print Page Previous Next Advertisements ”;

Aug 10

CSS – Color

CSS – Colors ”; Previous Next CSS Colors can be specified using predefined name of colors, RGB, RGBA, HSL, HSLA and Hexadecimal values. CSS allow us to change background color, text color, border color and caret color of any elements in HTML documents. Colors are very important aspects of web design, as they not only enhance the visual appeal but also influence user behavior. Background Color Red Green Blue Grey Pink Text Color White Yellow Cyan Black Blue Change Background Color and Text Color Table of Contents CSS Legal Color Values CSS Background Color CSS Text Color CSS Border Color CSS Caret Color CSS Color Keywords CSS Color Codes Generator Browser Safe Colors Types of Values for CSS Colors Following are all the value we can set to color properties in css. Color name: CSS has a set of predefined color names that you can use directly. For example, red, blue, green, grey, lightblue, aquamarine. There are lot more. background-color: grey; Hexadecimal code: It starts with a hash (#) followed by six hexadecimal digits that represent RGB value of color. background-color: #FF0000; /* Red Color */ Short Hexadecimal code: Shorter version of hexadecimal format where each of the RGB components is represented by a single digit, and the value is duplicated. background-color: #F00; /* Red Color */ RGB Function: The rgb() function defines color by taking three parameters, red, green, and blue values. Parameter values can vary from 0 to 255. background-color: rgb(0, 0, 255); /* Blue Color */ RGBA Function: The rgb() function defines color by taking four parameters, red, green, blue and alpha values. ALpha value describes intensity of color with a decimal value between 0 and 1. /* Half Intense Blue Color */ background-color: rgba(0, 0, 255, 0.5); HSL Function: The hsl() function accepts three parameters for colors, Hue (0 to 360 degree), Saturation (%), and Lightness (%) /* Green Color */ background-color: hsl(120, 100%, 50%); HSLA Function: The hsla() function accepts four parameters for colors, Hue (0 to 360 degree), Saturation (%), Lightness (%) and alpha( 0 to 1 decimal number) /* Half Intense Green Color */ background-color: hsla(120, 100%, 50%, 0.5); CSS Background Color In CSS, we can set background color for elements like div, span, body, paragraph etc using background-color property. Example In this example we set different background colors for body, div, span elements in HTML. <!DOCTYPE html> <html lang=”en”> <head> <style> body{ background-color: lightgrey; padding: 10px; } div{ background-color: cyan; padding: 10px; } span{ background-color: yellow; padding: 10px; } p{ background-color: white; padding: 10px; } </style> </head> <body> <div> This is a Div </div> <br> <span> This ia a span </span> <p> This is paragraph </p> </body> </html> CSS Text Color In CSS, we can use color property to set color for texts inside any type of element Example In this example we set different text colors for p, div, span elements in HTML. <!DOCTYPE html> <html lang=”en”> <head> <style> div{ background-color: cyan; color: red; padding: 10px; } span{ background-color: yellow; color: green; padding: 10px; } p{ background-color: black; color: white; padding: 10px; } </style> </head> <body> <div> This is a Div </div> <br> <span> This ia a span </span> <p> This is paragraph </p> </body> </html> CSS Border Color In CSS, we can use the border-color property to set the color of the border for any element. Example In this example, we set different border colors for p, div, and span elements in HTML. <!DOCTYPE html> <html lang=”en”> <head> <style> div { border: 2px solid; border-color: red; padding: 10px; margin: 10px 0; } span { border: 2px solid; border-color: green; padding: 10px; margin: 10px 0; } p { border: 2px solid; border-color: blue; padding: 10px; margin: 10px 0; } </style> </head> <body> <div> This is a Div </div> <br> <span> This ia a span </span> <p> This is paragraph </p> </body> </html> CSS Caret Color The caret-color property in CSS specifies the color of the text cursor (caret) inside an input or textarea element. This can be customized to enhance the user interface. Example In this example, we set cursor color for input and textarea elements. <!DOCTYPE html> <html lang=”en”> <head> <style> input, textarea { width: 100%; padding: 5px; margin-top: 10px; box-sizing: border-box; caret-color: darkred; } </style> </head> <body> <input type=”text” placeholder=”Click here…”> <textarea> Type Something </textarea> </body> </html> CSS Color Keywords There are a few keywords that are reserved to serve particular purposes, all the reserved color keywords are: inherit, transparent and currentColor. All of these keywords purpose and usage are described below. CSS Colors Inherit Keyword The inherit keyword in CSS is used to make an element inherit the computed value of a property from its parent element. This can be useful for maintaining consistency in styling. Example In this example, the parent element has a text color of dark red, and the child element inherits this color using the inherit keyword. <!DOCTYPE html> <html lang=”en”> <head> <style> .parent { color: darkred; padding: 10px; border: 1px solid #ccc; } .child { color: inherit; padding: 10px; border: 1px solid #ccc; background-color: lightgray; } </style> </head> <body> <div class=”parent”> This is the parent

Aug 10

CSS – Media Queries

CSS – Media Queries ”; Previous Next Media queries in CSS are used to apply different CSS styles based on the screen size, resolution, and other characteristics of the user device. Media queries uses @media rule to include a extra block of CSS properties when a certain conditions are met. Media queries can also be used to style printable version of page separately. Syntax @media not|only mediatype and (media feature) and (media feature) { CSS-Code; } Here, media-type can be things like screen, print, speech, etc., and media-feature can be characteristics such as width, height, aspect ratio, orientation, and more. You might have noticed that the same website looks different on mobile and desktop devices. This type of screen depended styling is achieved using CSS media queries. In this tutorial, we will learn about media queries and the properties associated with them. Table of Contents Media Types CSS Media Type Print CSS Media Type Screen CSS Media Type All Width Ranges for Media Queries Combining CSS Media Queries CSS Media Type With Only CSS Media Queries AND Operator Media Queries NOT Operator Creating Complex Media Query Media Queries Screen Orientation List of Media Queries Features Media Types Media types are used in CSS media queries to apply different styles based on device. The most common media types are all, print, and screen. If you don”t specify a media type, it matches all devices. all: Default Value. This value applies to all media types. print: This value is only valid when printing the document. screen: This value is only valid for screens, such as computers, tablets, and smartphones. JavaScript provides a CSS object model interface called CSSMediaRule, which can be used to access the rules created using the @media CSS at-rule. CSS Media Type Print Sometimes the print version generated for user doesn”t require all the styling shown in screen. The print version generally generated in grayscale style or with simple light colors. This type of designing is recommended, as dark backgrounds will consume more ink from printer. Example Following example demonstrates use of a CSS media query with the media type print. <!DOCTYPE html> <html> <head> <style> body{ background-color: black; color: white; padding: 10px; } @media print { body { background-color: white; color: black; padding: 10px; } } button { background-color: aqua; padding: 5px; } </style> </head> <body> <h3> Tutorialspoint </h3> <p>CSS Media Type – Print</p> <p> Background is white for printable version of this page. Check out… </p> <button onclick=”printPage()”>Print Page</button> <script> function printPage() { window.print(); } </script> </body> </html> CSS Media Type All This is used to specify common styling that used in all screen sizes, printable version and other versions. Example The following example demonstrates the use of a CSS media query with the media type all <!DOCTYPE html> <html> <head> <style> @media all { body{ background-color: black; color: white; padding: 10px; } } </style> </head> <body> <h3>Tutorialspoint </h3> <p> CSS Media Type – All </p> <p> In printable version or any screen size, the styles of this page is same. </p> <button onclick=”printPage()”> Print Page </button> <script> function printPage() { window.print(); } </script> </body> </html> CSS Media Type Screen This value is only valid for screens, such as computers, tablets, and smartphones. Example The following example demonstrates that if the screen size is greater than 500px, the background color changes to pink and text color changes to blue <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: row; padding: 10px; gap: 10px; } .child{ padding: 10px; background-color: #f0f0f0; border: 2px solid; } @media screen and (max-width: 500px) { .container { flex-direction: column; } } </style> </head> <body> <p> Orientation of child elements depend on screen size, for screen size less than 500px, children align in two different columns. </p> <div class=”container”> <div class=”child” > HTML </div> <div class=”child”> CSS </div> </div> </body> </html> Width Ranges for Media Queries In media Queries, you can also specify screen width range like this. @media (width > 700px) { /* Styles for screens that are at least 700px wide */ } Example The following example demonstrates that when the screen width is between 600px and 800px, the background color changes to yellow and text color changes to red. <!DOCTYPE html> <html> <head> <style> p { color: blue; } @media (600px < width < 800px) { p { background-color: yellow; color: red; } } </style> </head> <body> <h1>Tutorialspoint</h1> <p>CSS Media Type – Screen</p> <p>Resize the browser size to see the effect.</p> </body> </html> Comma Separated Media Types A comma in media query is similar to logical ”OR” operator. The following declaration will applying to screen width less than 500px or for printable versions. You can also use OR operator instead of comma. @media (min-width: 500px), print { /* Styles */ } Example The following example demonstrates using media types with comma separation. The background color changes when in print mode and also for screen size is > 500px <!DOCTYPE html> <html> <head> <style> body { background-color: white; color: black; } @media (min-width: 500px), print { body { background-color: black; color: white; } } button { background-color: violet; padding: 5px; } </style> </head> <body> <h1>CSS Media Type – Screen and Print</h1> <p> Resize the window to less than 500px to see the background and font color changes to default. </p> <p> Click on below button to see the effect when you print the page. ( Enable background graphics

Aug 10

CSS – Offset

CSS – offset Property ”; Previous Next The CSS shorthand property offset makes it easier for an element to animate along a certain path. It has many characteristics that together comprise an offset transform. With this transform, a specified point inside the element (offset-anchor) is aligned to a certain path position (offset-position) at various points along the route (offset-distance). It also allows the element to be optionally rotated (offset-rotate) to follow the path”s direction. Constituent Properties The offset property is a shorthand for the following CSS properties: offset-anchor offset-distance offset-path offset-position offset-rotate Possible Values The following list of values is accepted by offset shorthand property. offset-anchor – Defines a point within the element that aligns with an offset position on the path. offset-path – Defines the path along which the element is animated. offset-distance – Defines how far along the path the element is placed. offset-rotate – Optionally rotates the element to align with the direction of the path. auto – All properties are reset to their default values. Applies to Transformable elements Syntax offset = [ <”offset-position”>? [ <”offset-path”> [ <”offset-distance”> || <”offset-rotate”> ]? ]? ]! [ / <”offset-anchor”> ]? CSS offset – path value The following example demonstrates the usage of offset shorthand property with path value. <html> <head> <style> @keyframes slide { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .container { width: 400px; height: 200px; border: 2px solid #3498db; border-radius: 10px; position: relative; overflow: hidden; background-color: #f0f0f0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } .text { position: absolute; font-size: 28px; color: #3954cc; animation: slide 6s ease-in-out infinite alternate; offset: path(”M 10 100 Q 50 50 90 100 T 170 100 T 250 100”); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } </style> </head> <body> <div class=”container”> <div class=”text”>This is Sliding Text</div> </div> </body> </html> CSS offset – path and auto value The following example demonstrates the usage of offset shorthand property with path and auto value. <html> <head> <style> @keyframes orbit { 0% { offset-distance: 0%; offset-rotate: 0deg; } 100% { offset-distance: 100%; offset-rotate: 360deg; } } #planet { width: 60px; height: 60px; background-color: #0000A0; border-radius: 50%; position: absolute; animation: orbit 6s linear infinite; offset: path(”M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0”) auto; } #sun { width: 100px; height: 100px; background-color: #ffd700; border-radius: 50%; position: absolute; left: 28%; top: 33%; transform: translate(-50%, -50%); } </style> </head> <body> <div id=”sun”></div> <div id=”planet”></div> </body> </html> CSS Offset – Related Properties Following table lists related properties to offset property: Property Description offset-anchor Specifies the position inside an element”s box that acts as the offset path. offset-distance Specifies where element should be positioned. offset-path Specifies element”s path inside its parent container. offset-rotate Specifies the orientation or direction of an element as it moves along the specified offset-path. offset-position Provide an element”s starting location along a route. Print Page Previous Next Advertisements ”;

Aug 10

CSS – Min Inline Size

CSS – min-inline-size Property ”; Previous Next CSS min-inline-size property specifies the minimum horizontal or vertical size of an element”s block, determined by its writing mode and equivalent to either min-height and min-width based on the writing mode value. Possible Values The min-inline-size property accepts the same values as min-height and min-width. Applies To Same as width and height. Syntax <length> Values min-inline-size: 100px; min-inline-size: 5em; <percentage> Values min-inline-size: 10%; Keyword Values min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content; min-inline-size: fit-content(20em); The min-inline-size property sets the minimum width for horizontal writing modes and the minimum height for vertical writing modes, respectively. A companion property, min-block-size defines the other dimension. CSS min-inline-size – <length> Value The following example demonstrates the min-inline-size: 200px property sets the minimum width of the inline element to the 200px − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: 200px; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – <percentage> Value The following example demonstrates the min-inline-size: 30% property sets the minimum width of the inline element to the 30% − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: 30%; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – max-content Value The following example demonstrates the min-inline-size: max-content property allows the inline element to expand horizontally to fit its content − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: max-content; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – With Vertical Text The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction − <html> <head> <style> div { background-color: greenyellow; border: 2px solid blue; margin: 10px; padding: 5px; min-inline-size: 150px; writing-mode: vertical-rl; } </style> </head> <body> <div> <h3>CSS min-inline-size with writing-mode: vertical-rl.</h3> </div> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

CSS – Grid

CSS – grid Property ”; Previous Next CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It”s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties: grid-template-rows grid-template-columns grid-template-areas grid-auto-columns grid-auto-flow grid-auto-rows grid-gap (or grid-row-gap and grid-column-gap) Possible Values <grid-template> − Works the same as the grid template shorthand. <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns> − Sets grid-template-rows to the specified value (auto-flow or dense). If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-columns is omitted, it is set to auto. [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> − Sets grid-auto-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-rows is omitted, it is set to auto. Applies to All the HTML elements. DOM Syntax object.style.grid = “<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>”; CSS grid – <grid-template> The following example demonstrates that a grid set as grid: 100px/ 200px, has the first row 100px high and columns 200px wide − <html> <head> <style> .grid-box { display: grid; grid: 100px / 200px; gap: 10px; } .grid-box > div { background-color: red; border: 3px solid lightgreen; padding: 10px; text-align: center; } </style> </head> <body> <div class=”grid-box”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html> CSS grid – minmax() / repeat() The following example demonstrates that the use of grid: minmax(100px, min-content) / repeat(auto-fill, 50px); property. minmax(100px, min-content) is used for row sizing. Here, the minmax function defines a minimum size of 100px and a maximum size dependent on the content. repeat(auto-fill, 50px) is used for column sizing. The repeat function repeats the pattern for grid tracks. It uses auto-fill to create as many columns as possible within the available area, with each column having a fixed size of 50px. <html> <head> <style> .grid-container { display: grid; grid: minmax(100px, min-content) / repeat(auto-fill, 50px); color: white; text-align: center; width: 300px; } .grid-container > div { background-color: red; border: 2px solid lightgreen; margin: 5px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – auto-flow Value The following example demonstrates that the use of the grid: auto-flow / 200px property sets row size to auto-flow, which automatically sizes the height of the row and set columns width to 200px − <html> <head> <style> .grid-container { display: grid; grid: auto-flow / 200px; color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – auto-flow dense Value The following example demonstrates the use of grid: 100px 200px / auto-flow dense property. It specifies two rows with heights of 100px and 200px. The columns are set to auto-flow dense, which automatically place items in the grid and dense, to fit as many grid elements as feasible without gaps. <html> <head> <style> .grid-container { display: grid; grid: 100px 200px / auto-flow dense; color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> The following example demonstrates that the grid: auto-flow 50px / repeat(3, 150px) property sets the rows to auto-flow 50px, which automatically places items in the grid with row height set to 50px. The repeat(3, 150px) specifies that there should be three columns, each 150px wide. <html> <head> <style> .grid-container { display: grid; grid: auto-flow 50px / repeat(3, 150px); color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – Related Properties Following is the list of CSS properties related to grid: property value display Define whether an element is a grid container or an inline grid container. gap Defines the gap between rows and columns. grid-area Defines the location and size of the grid item within a grid layout. grid-column Control the placement of a grid item within the grid container in the column direction. grid-row Control the placement of a grid item within the grid container in the row direction. grid-template Specify the grid columns, grid rows and grid areas. grid-auto-columns Determines the size of automatically generated grid column tracks or a pattern of such tracks. grid-auto-rows Determines the size of automatically- generated grid rows tracks or a pattern of such tracks. grid-auto-flow Specifies arrangement