Learn Free CSS tutorials

Best 10 Frequent used styles for anchor links examples | a tag CSS styles

February 28, 2022 · 4 min read

In this tutorial, Learn Multiple examples of anchor tag styles in HTML CSS. How to add typography styles to anchor? Add cursor hand on mouse hover how to add hover color to the anchor tag? how to disable styles for the anchor tag? How to link a button? how do you set focus styles for the anchor tag? How to add an image to the anchor tag? An anchor tag in HTML uses to link from one page to another page or navigate to different Linked sections on the same page....

Best ways to implement line break without by tag in CSS

February 28, 2022 · 2 min read

Sometimes, you want to display the following text in multiple lines on the UI page abc def ghk lmn pqr tuv will code the text in HTML using p and div tags as follows <p> abc def ghk lmn pqr tuv <p> The browser displays the line abc def ghk lmn pqr tuv we can use the br tag to get a line break in UI. <p> abc def</br> ghk lmn</br> pqr tuv</br> <p> How do a line break without tag...

Bulma CSS framework tutorials with examples

February 28, 2022 · 2 min read

This post is an index page for all posts of Bulma CSS tutorials with examples. Bulma CSS Introduction and features Bulma is CSS opensource framework based on flexbox. which support the following features Responsive that works on any screen size, Like a Bootstrap framework, It is designed as per Mobile First Lightweight in size A lot of Inbuilt components and predefined SASS styles Better design than bootstrap It is based on modules that support sass files Customizable and extendable Installation and Setup Any website or HTML can be integrated with Bulma CSS in many ways....

Correct Media query for Ipad Pro and Ipad CSS with examples

February 28, 2022 · 1 min read

Sometimes, you want to design pages for Ipad and Ipad pro, So you have to write a CSS style using media queries. This post covers the correct media query for Ipad for different orientations. Apple has iPad tablets with different versions 11 and the latest version 12. x. Ipad and pro’s latest versions are 12. x It has two orientations. Landspace portrait We write media queries with device width, height, and orientation....

CSS align content to bottom in flexbox example

February 28, 2022 · 2 min read

This tutorial shows multiple ways to align elements or content to the bottom in the CSS flexbox with examples. Let’s create a flex with child items in HTML <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <div class="flex-container"> <div>heading 1</div> <div>heading 2</div> <div>heading 3</div> <button class="button">Button</button> </div> </body> </html> Here is a flex container with a display:flex .flex-container{ display:flex; border:1px solid black; height:150px; width: 150px; flex-direction: column; } Render the flex container on the browser as seen below heading 1 heading 2 heading 3 Button There are multiple ways we can align to bottom elements in CSS flexbox....

CSS direction property example| dir ltr rtl in html

February 28, 2022 · 2 min read

HTML and CSS contain code to display text and content on a webpage. dir attribute in HTML direction attribute in CSS dir attribute in HTML It will be useful when CSS is not supported in some browsers. It is a global attribute applied to any HTML tag. <div dir="rtl"> text content from right to left</div> It has support in all major browsers. direction attribute in CSS direction property in CSS uses to change the direction of a text element displayed on a page....

CSS Flexbox center horizontally and vertically a text example

February 28, 2022 · 2 min read

CSS flex example to the horizontal and vertical center of child items and text in HTML example Let’s declare a flex container and add child elements to the display. Declared four child items inside a flex container. <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <div class="container"> <div class="item"> <p>One</p> </div> <div class="item"> <p>Two</p> </div> <div class="item"> <p>Three</p> </div> <div class="item"> <p>Four</p> </div> </div> </body> </html> In CSS styles, the container contains flex and flex-direction is column....

CSS paragraph styles | HTML p tag CSS examples

February 28, 2022 · 2 min read

This tutorial shows you multiple CSS styles added to a paragraph in HTML. A paragraph is a block of text content like a section in a textbook. In Webpages, Paragraphs are created using an HTML p tag or div tag. p tag uses semantically for text content in an HTML web page. Let’s create a paragraph in html <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....

Difference between @import and @use in Sass/scss

February 28, 2022 · 2 min read

SASS provides @import and @use allows to reuse of mixins functions and variables in other modules. @import and @use in Sass @import allows you to import sass and CSS stylesheets into another stylesheet. component.scss: $primary-color: blue; @mixin button { background-color:$primary-color; color:white } Let’s import component.scss in style.scss @import "component.scss"; .buttonId{ @include button; } Let’s import component.scss in style.scss use @use @use "component.scss" as component .buttonId{ @include component.button; } Let’s see what is different between these two...

Display tooltip to div with pure css and javascript in html example

February 28, 2022 · 2 min read

Tooltip in HTML is important information to be displayed in an element while mouse over an element. An element can be a div, button, or input control. This tutorial explains adding a tooltip to the div element with examples. There are multiple ways we can add a tooltip to the Div element in HTML pages. Pure css Pure Javascript How to add a tooltip to the div element with pure CSS <div class="tooltipContainer"> Name <span class="tooltip">Please enter name</span> <input type="text" name="name"/> </div> CSS code:...

Fix for Image elements have explicit width and height

February 28, 2022 · 1 min read

When you are testing a website in google page sight or lighthouse, You can use Cumulative Layout Shift score is high when you don’t specify the image dimensions. If you don’t specify the width and height for an image, The page loading shifts the next and causes a bad experience. Here is an error Image elements do not have explicit width and height This error occurs for an image not defined as the fixed width and height for the img tag....

Fix Using / for division is deprecated removed in DartSass2

February 28, 2022 · 3 min read

During angular application migration from 11 to 12, I got the warning message during ng build command execution. DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($min-width, 2) More info and automated migrator: https://sass-lang.com/d/slash-div Let’s see how to fix this warning message DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0 This issue says the division operator is deprecated and SASS forces us to replace it with math....

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials

February 28, 2022 · 3 min read

In this blog post, We will explore how to integrate the bootstrap framework with the ReactJS library. react-bootstrap components Bootstrap is a popular open-source HTML, Javascript, and CSS framework for building responsive applications targeted to Desktop and mobile. Bootstrap was developed based on the JQuery framework. In this tutorial, We are going to learn bootstrap integration in react library without JQuery.React is one of the popular javascript frameworks for building client-side applications....

How to resize disable in textarea in CSS| draggable in HTML

February 28, 2022 · 3 min read

It is a CSS short tutorial on How to resize textarea in HTML and CSS. You will learn the following things as part of this post. How to disable resize Textarea with CSS/HTML How to disable resize horizontally textarea Disable Resize vertically for textarea TextArea is an Input element and sizer. sizer allows support of multiline text and is resizable in the horizontal and vertical directions. Text area can be created with rows and cols....

How to add a horizontal and vertical scrollbar to an HTML div with css example

February 28, 2022 · 5 min read

Sometimes, We want to add a vertical or horizontal container to HTML elements. This post explains the way how to add a horizontal and vertical scrollbar. It also includes CSS styles to change the color of a scrollbar. You can add a scrollbar to the HTML body, table, div, and any valid HTML element using CSS. How to add a scrollbar to the div element Suppose you have an HTML div element, You declared width of 300px and height:200px....

How to add a horizontal line with div and hr example

February 28, 2022 · 1 min read

It is a short tutorial with examples to make horizontal and vertical lines in CSS. When we need to divide two HTML components, the hr tag in HTML creates a horizontal line between them. Horizontal lines in HTML are simple to create using the hr tag, border, or custom CSS styles. Horizontal line in HTML The hr tag in HTML uses to provide thematic breaks between content. The hr tag in HTML uses to draw horizontal line breaks....

How to add css styles to input type file upload in html

February 28, 2022 · 2 min read

In Html forms, the Input type=file button allows us to upload the documents from web pages. The look of upload button behaves differently in different browsers. Styling this upload button is a tedious task, It covers applying the styles for the upload button in CSS/Javascript. There are other file upload widgets available in Bootstrap, but the tutorial only tells about custom CSS styles. In HTML, a File widget can be created using the below snippet of code....

How to change navbar color in Bootstrap with css

February 28, 2022 · 3 min read

This post talks about multiple ways to solve the below items in Bootstrap 4. How to change the color of text color in the navbar bootstrap Change the background color navigation bar navbar in bootstrap can be created as follows <nav class="navbar navbar-default" role="navigation"></nav> The default background color is white and the color is blue. In bootstrap, Changing the color of navigation is not that easy, as it contains brand and anchor links inside it....

How to change the cursor into a hand when a user hovers over a list item?

February 28, 2022 · 2 min read

This tutorial shows you how to change the cursor into hand for the CSS list tag in HTML. It covers the CSS styles for a hand cursor. ordered list unordered list usually, a hand cursor pointer is used for anchor styles, Sometimes, We need to apply for an order and unordered list items. CSS cursor hand styles for unordered list Let’s create an ordered list using the <ul> tag in html...

How to Convert Hex color to RGB in Sass| 2 ways examples

February 28, 2022 · 2 min read

Colors in CSS contain Hexa values and RGB and RGBA values. For example, #fff is a white color Hexa code RGB(255,255,255) is an RGB color code, that contains red green blue values rgba(255, 170, 255, 0.5) is an RGBA color code that RGB and optional Alpha. Convert Hexa color code to RGBA color code There are multiple ways, we can convert to rgba color codes. use rgba() function Sass provides an RGBA function that converts Hexa color to rgba color....

How to detect if the OS is in a dark or light mode in browsers?

February 28, 2022 · 2 min read

Sometimes, you want to apply styles for a page opened in Chrome/Firefox and Safari on OSX Dark mode. OSX provides two themes to indicate light and dark modes. This theme customization provides in Windows also. light: It indicates the light colors of an OS dark: It uses dark colors of an underline OS How to detect OS Dark light mode in CSS with examples? CSS provides media queries to detect in Chrome and Firefox....

How to disable source map CSS files in sass? | no-source-map example

February 28, 2022 · 2 min read

SASS is a preprocessor that compiles into sass files and outputs .css and .css.map files. CSS map helps developers to debug these files. In Production, These files are not required and can be omitted, This tutorial covers how to disable sourcemap CSS files in sass compilation. Sass framework provides three implementations node-sass dart-sass ruby-sass With sass command, We used to compile sass to CSS file as follows sass --watch input.scss:output.css It compiles and converts input....

How to make a phone number and skype clickable in HTML anchor example

February 28, 2022 · 2 min read

This blog post examples of how phone numbers are clickable in HTML. Normally, In a webpage, text can be a clickable link by using an anchor (a) tag in HTML. Suppose, You have a phone number link on the browser on a mobile device, if you click on it, It opens the calling contacts page with the number given below. This shows multiple examples, First way is to make a clickable link using href tel: schema Another example makes skype clickable links....

How to make pre-code block 100% responsive in mobile CSS example

February 28, 2022 · 3 min read

In this tutorial, You learn how to make pre-code blocks 100% responsive with CSS. This tutorial solves the following things. pre tag is not responsive on mobile pre tag should be horizontally scrollable Boostrap pre-code block with horizontal scrollable Pre is an HTML tag used to display code snippets or store the formatted text like line the pre tag is a full form or abbreviated as preformatted HTML content pre tag in HTML example Pre-tag displays the same formatted text in HTML as well as in the browser....

How to print and debug console and output in Sass with examples

February 28, 2022 · 2 min read

This tutorial shows How to debug sass code. Sometimes, We want to know the value of a variable during CSS compile generation. It is possible with sass inbuilt commands. How to print sass value to output and console Let’s see multiple ways to print the sass variable data to the console and output. Use sass Inbuilt rules and directives Sass provides the following rules @debug: This function is called when debug message is emitted to the console....

How to select multiple classes in CSS|SASS example

February 28, 2022 · 2 min read

It is a short tutorial about how to select multiple classes of HTML elements with CSS. We can select use class selectors or id selectors, But sometimes, we want to force to use class selectors, example explains how to select multiple classes in CSS/HTML. Let’s have a div class with multiple CSS class names. The div tag has multiple class names separated by space as given in the below example....

How to set alternative table row color in CSS?

February 28, 2022 · 2 min read

It is a short tutorial table CSS styles on how to change row color How to change alternative row colors in a table? How to change the first-row color in the table? How to set the last row color in the table In the Html table, The table represents with the <\table\> tag The row represented with tr tag the column represents with td, and th for header columns How to change alternative row colors and styles in the HTML table What is the alternative row color in the HTML table?...

How to style ordered list without bullets in CSS

February 28, 2022 · 3 min read

In CSS, There is an Unordered list that is used to display the list of items in We can create a list using the ul tag with li child elements <html> <body> <h2>UL html styles example</h2> <ul> <li>India</li> <li>USA</li> <li>Germany</li> </ul> </body> </html> Output India the USA Germany As you have seen an output contains bullet points We can remove bullet points using CSS styles. Let’s see different ways to style an unordered list without bullets....

How to use sass variable in multiple files in Sass| 2 ways examples

February 28, 2022 · 1 min read

SASS provides variables declared once and used in multiple files using @import and @use directives. For example _variables.scss $primary-font-color:blue; Let’s use this variable in multiple files in different ways. use the @import directive home.scss @import "variables" body{ color:$primary-font-color; } use @use directive home.scss @use "variables" body{ color:variables.$primary-font-color; } or you can also use a namespace with @use as seen below home.scss @use "variables" as v body{ color:v.$primary-font-color; } @import allows you to provide global scoping and no local scope, It is going to be deprecated soon, Please avoid using @import....

How to write 100% Responsive font sizes effectively with css

February 28, 2022 · 3 min read

In this tutorial, You learn how to make fonts work responsive on mobile, tablet, and desktop. To make it 100% responsive, Each displayed element should work as expected in screen resolutions. It helps users to read the text across screen and device sizes. Typography is one of the important points for a better UX view. In CSS font sizes can be configure using fixed sizes(in Pixels) or relative units(Percent,EM,REM,VW,VH,VMIN,VMAX) In any application, font-sizes apply to the below items....

Multiple ways to apply CSS styles to HTML button with examples

February 28, 2022 · 2 min read

In this blog, Learn different styles applied to the HTML button with examples. How do style a button in CSS and HTML examples Let’s create a button in HTML. use button tag <button type="button" id="button"> Button</button> or input tag <input type="button" value="button"/> It is easy to apply styles using the CSS id selector. This example changes the button style’s background-color, font-weight, font-size, and color. Here is a code for HTML button css font styles example...

SASS Calc function with examples in CSS|SCSS

February 28, 2022 · 2 min read

SASS is a pre-processor for CSS language. It is an advanced CSS for large applications. It provides a calc function to calculate athematic values for different CSS units. Contents calc function in SASS How to use the sass variable in the calc function calculate percentage with pixels sass variable percentages minus pixel This tutorial talks about calc function usage examples. calc function in SASS We already have a calc function in CSS that calculates the expression in the browser, Whereas calc in SASS is compile-time only....

Top 3 Input placeholder style examples in css/html

February 28, 2022 · 2 min read

It is a short tutorial about input placeholder usage in CSS/HTML with examples. placeholder is a short text displayed in input controls to tell the user about the input control. It acts as a label for the input element. It is introduced in HTML5 You can check my previous available post: Angular Placeholder Example React input placeholder examples CSS provides non-standard pseudo selectors to change the styles of an input element....

What is the difference between section and div tag in html

February 28, 2022 · 2 min read

section and div are tags used to display the content on HTML pages. There are two differences between section and div semantic content font-size The only difference between section and div is a semantic meaning applied to the content inside it. what is Section? Section is an element and has semantic meaning to the content inside it. These can be used to group the content or elements in HTML. It is an HTML5 element....

Z-index maximum and minimum value

February 28, 2022 · 1 min read

z-index is a CSS attribute used to apply stack order of HTML elements. It is a z-order of an element position. It only works with positions with absolute, relative, and fixed types. It contains an integer value assigned to it Following is an syntax z-index:auto | <integer> | inherit It contains auto or integer or parent inherit. Here is an example to stack one element over other with more z-index value....

Learn free CSS tutorials