Category: css

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 – Gradients

CSS – Gradients ”; Previous Next CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors. What is CSS Gradient? In CSS, gradient is a special type of user defined images that can be used for background or borders of element. We can set a gradient to background property of any HTML elements using function gradient(type, color1, color2, color3); Zooming a image gradient does not loose it”s quality as this are defined by browsers according to developers code. Table of Contents Types of CSS Gradients Linear Gradients Radial Gradients Conic Gradients Gradients for Borders Positioning Color Stops Creating Hard Lines Color Bands Using Gradients Stacked Gradients Related Functions   Types of CSS Gradients CSS defines three types of gradients Linear Gradient: Goes from left to right, up to down or diagonally. Radial Gradient: Start from center to edges. Conic Gradient: Revolve around a center point. Linear Gradient Radial Gradient Conic Gradient Choose a gradient for background Linear Gradients The linear gradient creates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle. Syntax linear-gradient(direction, color1, color2, …); /* Gradient from bottom right to top left */ linear-gradient(to top left, color1, color2, …); /* Gradient at an angle 45 degree */ linear-gradient(45deg, red, yellow); The direction parameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient. Example In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well. Following example demonstrates this: <html> <head> <style> div { height: 70px; width: 100%; } .topBottom { background: linear-gradient(green, yellow); } .RightLeft{ background: linear-gradient(to right, green, yellow); } </style> </head> <body> <h1>Linear gradient</h1> <h3>Top to Bottom ( Default )</h3> <div class=”topBottom”></div> <h3>Right to left</h3> <div class=”RightLeft”></div> </body> </html> Radial Gradients A radial gradient is a type of gradient that consists of colors radiating outward from a central point. In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern. Syntax radial-gradient(shape size position, color1, color2..); The shape parameter defines the shape of the gradient (circle or ellipse). The size parameter specifies the size of the shape. The position parameter sets the center of the gradient Example In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box. Let us see an example: <html> <head> <style> div { height: 100px; width: 100%; } .gradient { background: radial-gradient(green, yellow); } .center-gradient { background: radial-gradient( at 0% 50%, green 30px, yellow 60%, magenta 20% ); } </style> </head> <body> <h1>Radial gradient</h1> <h3>Simple Radial Gradient</h3> <div class=”gradient”></div> <h3>Center Positioned Radial Gradient</h3> <div class=”center-gradient”></div> </body> </html> Conic Gradients A conic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc. Syntax conic-gradient(from ”angle” at ”position”, ”color-list”) position (optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center. angle (optional): Specifies the starting angle of the gradient in degrees. color-list : Defines the colors and their positions in the gradient. Example In this example we will create a conic gradient pie chart with four different colors, then align gradient at different locations of diagram. <!DOCTYPE html> <html lang=”en”> <head> <style> div { height: 80px; width: 110px; border-radius: 50%; } .gradient1{ background: conic-gradient( from 45deg at 50% 50%, red, yellow, green, blue, red); } .gradient2{ background: conic-gradient( from 45deg at 20% 40%, red, yellow, green, blue, red); } </style> </head> <body> <h1>Conic Gradient Example</h1> <h3>Align at center</h3> <div class=”gradient1″></div> <h3>Align at 20-40</h3> <div class=”gradient2″></div> </body> </html> Gradients for Borders The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns. Syntax border-image: linear-gradient(”color-list”) You can also use radial and conical gradients for borders. Example Here is an example of use of gradients in creation of borders: <!DOCTYPE html> <html lang=”en”> <head> <style> .gradient-border { height: 200px; width: 200px; border: 10px solid; border-image: linear-gradient( to right, red, yellow, green, blue) 1; } </style> </head> <body> <h2>Gradient Border </h2> <div class=”gradient-border”></div> </body> </html> Positioning Color Stops Positioning color stops for gradient allows to control the point at which transition occur for a gradient. Syntax linear-gradient(to right, red 10%, pink 30%, blue 60%) to right: Specifies the direction of gradient. red 10%: Sets the red color to stop at 10% of the gradient pink 30%: Sets the pink color to stop at 30% of the gradient. blue 60%: Sets the blue color to stop at 60% of the gradient. Example <html>

Aug 10

CSS – Height

CSS – Height Property ”; Previous Next The height property sets the height of an element”s content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area. The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties. Possible Values length − A specific length value such as pixels (px), centimeters (cm), inches (in), etc. percentage − A percentage of the height of the containing element. auto − The browser will calculate the height automatically based on the content. It is the default value. max-content: Defines the intrinsic preferred height. min-content: Defines the intrinsic minimum height. fit-content: Available space will be used by box, but never exceeds the max-content. fit-content (<length-percentage>): Fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)). clamp(): Enables selection of a middle value within a range of values, specified between minimum and maximum height. Negative values like height: -200px are not accepted. Applies to All the HTML elements except non-replaced inline elements, table columns, and column groups. DOM Syntax object.style.height = “100px”; CSS Height – Length Unit Here is an example of adding height to a div element in length units: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { height: 100px; background-color: rgb(230, 230, 203); } div.b { height: 2.5in; background-color: rgb(230, 230, 203); } </style> </head> <body> <div class=”a”>This div element has a height of 100px.</div> <div class=”b”>This div element has a height of 2.5 inches.</div> </body> </html> CSS Height – Percentage value Here is an example of adding height to a div element in percentage values: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { height: 80%; background-color: rgb(230, 230, 203); } div.b { height: 120%; background-color: rgb(236, 190, 190); } </style> </head> <body> <div class=”a”>This div element has a height of 80%.</div> <div class=”b”>This div element has a height of 120%.</div> </body> </html> CSS height – auto value Here is an example of adding height to a div element set as auto: <html> <head> <style> div.auto { height: auto; background-color: yellow; padding: 20px; margin-bottom: 5px; } </style> </head> <body> <div class=”auto”>This div element has a height set as auto.</div> </body> </html> CSS Height – Using max-content and min-content Here is an example of height equal to max-content and min-content: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.c { height: max-content; background-color: bisque; } div.d { height: min-content; background-color: darkseagreen; } </style> </head> <body> <div class=”c”>This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div> <div class=”d”>This div element has a height of min-content.</div> </body> </html> CSS Height – Image Here is an example of adding height to an image: <html> <head> <style> .demoImg { margin-top: 15px; height: 200px; margin-right: 0.5in; } </style> </head> <body> <img class=”demoImg” src=”images/scancode.png” alt=”image-height”> </body> </html> CSS Height – Using clamp() Here is the example where clamp() function is used for setting height: <html> <head> <style> p{ display: inline-flex; border: 1px solid black; background-color: yellow; height: clamp(20px, 100px, 180px); width: clamp(50px, 100px, 200px); padding: 1em; margin: 2em; } </style> <body> <div> <p>The clamp function is used for height & width, where the background color is selected for the value between the min and max ranges of height and width.</p> </div> </body> </html> CSS Height – Related Properties Following is the list of related CSS properties of height: property value max-height Sets an upper bound on the height of an element. min-height Sets a lower bound on the height of an element. min-content Sets intrinsic minimum height of the content. max-content Sets intrinsic maximum height of the content. fit-content Fits the content depending on the available size. fit-content() Clamps a given size based on the formula min(maximum size, max(minimum size, argument)). Print Page Previous Next Advertisements ”;

Aug 10

CSS – Layouts

CSS – Layouts ”; Previous Next You have so far learnt about the various fundamentals of CSS which helps in styling text and the boxes that contain the content. In this chapter we will learn how to arrange and adjust these boxes in relation to the viewport. Prerequisites In order to proceed with learning of CSS layout, certain prequisites are essential, such as: Having a basic knowledge of HTML. Basic idea of the CSS fundamentals. Understanding of how to style the boxes. The chapter will list fundamental tools and techniques available for CSS layout. Let us look at each topic. CSS Layout – Normal flow This section explains about the normal flow of a webpage, where the elements position or lay themselves as per this flow. The normal flow is the basic ground for any changes that you intend to do. A box model is applied to the individual elements, where padding, border, or margin are added to the content. A block-level element fills the available inline space of the parent element with its content, by default; whereas an inline-level element”s size is same as its content”s size. For the elements that have a display value of inline, you can set the width or height In the normal layout flow, the block-level elements are positioned in the block flow direction, which is as per the parent”s writing mode. Each block-level element will appear in a new line below the last line, separated by the specified margin. The inline-level elements do not appear on a new line, rather they appear in the same line along with other text content, till the time they have space to be inside the width of the parent block level element. When there is no space left, then the content will fall into a new line. CSS Layout – Flexbox Laying out of elements in rows and columns, in a one-dimensional space, is taken care by the flexbox layout. In this layout the items or elements flex in order to fill the space and at the same time they may shrink to fit in the smaller spaces. CSS Layout – Grids Layout system of positioning elements in a two-dimensional space, is the responsibility of the grid layout. It helps in laying the content in rows and columns and make the whole building complex layout easy. CSS Layout – Floats CSS float is one of the commonly used property to create multiple column layouts on webpages, apart from using it to float images inside a container. But with flexbox and grid features, the float is restricted for the usage of floating images or text. CSS Layout – Positioning Positioning is a feature that determines the position or placement of elements on a webpage, which can be fixed or relative to a viewport. CSS Layout – Multiple-column layout This layout lets you lay the content in different columns, just like a newspaper. CSS Layout – Responsive design With the advance in the various devices, the screens are available in diverse sizes. The responsive web design (RWD) is helpful in allowing web pages to adjust their layout and display as per the different screen sizes, with varying widths and resolutions. CSS Layout – Media queries The Media Query provided by CSS are essential as they help in creation of different layouts based on the size of the viewport. A rule is specified via a media query and as the browser and device environment matches the rule, certain CSS gets applied. The media queries are also helpful in detecting other features of the environment, where your site is running. Print Page Previous Next Advertisements ”;