Mainak

Media and responsive queries matter as they can change the view of a website on a desktop platform and also in a mobile platform to use the viewport much better. Just follow the below-provided links and understand what are CSS Media Queries and Responsive Design.

• CSS Media Queries
• How do you write media queries in CSS for Responsive design?
• Media types
• Media feature descriptors
• Logic operators

CSS Media Queries

All the above rules we saw are applied to@importor to thelinkHTML tag can be used inside the CSS, too.

You should wrap them in a @media () {} structure.

Example:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

Moreover, this is the basis for responsive design.

Media queries can be pretty challenging. But this example implements the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is the landscape:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

The syntax for CSS media queries relates to TestNG annotations which as a novice web developer, you will obtain a bit different & unique. The media query can be performed by the word “media” as shown below:

@media <media_type> connector ( <query> )

As an example:

@media only screen and (max-width: 480px) {
  /* CSS rules to apply /*
}

This media query will see for screens (“only screen” as addressed) with a max-width of 480px. If it attains one, the conditions will be performed and the changes will be addressed to the HTML code.

If we just use the media type and not the media expressions (queries), the following values are accepted:

• all
• print
• screen
• speech

@media print {
   .heading {
     font-size: 12px
   }
}

The above query will obtain the content with the class name heading to a font size of 12 pixels when the page wants to be printed.

Media types

In media queries and @import declarations, we can use media types that allow us to determine on which media a CSS file, or a piece of CSS, is loaded.

Media types are:

• all means all the media
• print used when printing
• screen used when the page is presented on a screen (default)
• speech used for screen readers

Example:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

/* OR */

@import url(myfile.css) screen, print;

It can also be used in the link tag of an HTML page, like:

<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

Media feature descriptors

These additional keywords are used to express more conditionals. These are:

• width
• height
• device-width
• device-height
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• orientation
• scan
• grid

They have a min-* and max-* property, like:

• min-width, max-width
• min-device-width, max-device-width

The values they consume are px, em, rem, or any length values.

Example:

@import url(myfile.css) screen and (max-width: 800px);

We can also specify the orientation of the device, like:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

We can use the scam property to determine the types of screens. Acceptable values are progressive and interlaced.

The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device. This takes an integer value as input. Like this, there are other properties like grid, color-index, monochrome.

There are other values like aspect-ratio and device-aspect-ratio , that accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.

@import url(myfile.css) screen and (aspect-ratio: 4/3);

Also, there is resolution which represents the pixel density of the device, expressed in a resolution data type like dpi.

@import url(myfile.css) screen and (min-resolution: 100dpi);

Logic operators

We can combine multiple queries with logical operators like and, or(can use , instead) not.

Example:

/* and */
<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

/* or */
@import url(myfile.css) screen, print;

/* not */
@import url(myfile.css) not screen;

To show some data in web pages consists of showing a list altogether. We can override the default style for the list and put our style manually using CSS. Look at the links available here and learn how to style lists using CSS. Also, you may get an idea about the CSS Properties for styling lists from this tutorial.

• Basic Styling in CSS
• How to style a list in CSS?
• 1. list-style-type Property
• 2. list-style-image Property
• 3. list-style-position Property
• CSS list-style Property
• CSS marker-offset Property

Basic Styling in CSS

Colouring, padding, margin, and other basic styling can be used to the list and its items:

ul {
    background: #FF888E;
    padding: 25px;
}
ul li {
    background: #45597E;
    margin: 25px;
    color: #FFFFFF;
}

Output:

Do Refer:

• The CSS Borders Tutorial
• The CSS calc() function

How to style a list in CSS?

By following the three CSS properties shown here helps to modify the list:

1. list-style-type
2. list-style-image
3. list-style-position

1. list-style-type Property

list-style-type is used to set a predefined marker to be used by the list:

li {
  list-style-type: square;
}

We can also use the disc, circle, or none in place of the square.

2. list-style-image Property

list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:

li {
  list-style-image: url(list-image.png);
}

3. list-style-position Property

list-style-position lets us add the marker outside or inside of the list content, in the flow of the page rather than outside of it.

li {
  list-style-position: inside;
}

CSS list-style Property

The list-style lets you specify all the list properties into a single expression. These properties can perform in any order. We can use the shorthand property i.e list-style to specify all the properties altogether:

li {
  list-style: url(list-image.png) inside;
}

Check out the following example:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Result:

CSS marker-offset Property

The marker-offset property enables you to define the distance between the marker and the text concerning that marker. Regrettably, this property is not maintained in IE 6 or Netscape 7. Its value must be a length as shown in the below example −

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

It will result like below:

What are CSS Pseudo-classes?

Pseudo-classes are predefined keywords.

They are used to select an element based on its state or to target a specific child.

They start with a single colon :.

The most common use case is to style the visited and unvisited links. Also, focus or hover over an element.

• The :hover pseudo-class
• CSS – The :lang Pseudo-class
• The :visited pseudo-class
• The :nth-child pseudo-class
• CSS classes and pseudo-classes

The popular pseudo-classes are:

Also Check:

• CSS Pseudo Elements
• The CSS Display property

The :hover pseudo-class

The below sample code shows how to use the :hover class to alter the color of links when we place a mouse pointer over that link. Feasible values could be any color name in any valid format.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

CSS – The :lang Pseudo-class

The:langpseudo-class enables you to set special rules for various languages.

In the illustration below, :lang represents the quotation marks for <q> elements with lang=”no”:

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

The :visited pseudo-class

We want to make a link color yellow, before and after the visit:

a,
a:visited,
a:active {
  color: yellow;
}

The :nth-child pseudo-class

:nth-child() deserves a special mention. It can be used to target odd or even children with :nth-child(odd) and :nth-child(even).

It is commonly used in lists to color odd lines differently from even lines:

ul:nth-child(odd) {
  color: green;
    background-color: gray;
}

We can also use it to target the first 4 children of an element with :nth-child(-n+4). Or you can style 1 in every 7 elements with :nth-child(7n).

CSS classes and pseudo-classes

The classes in CSS can be connected with pseudo-classes. So, we can address it as-

Syntax

selector.class: pseudo-class {  
  property: value;  
}

Let’s see the following example to understand the working of it:

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
div.hello:hover {
  color: red;
  font-size:40px;
} 
</style>
</head>
<body>
<h1>CSS Classes and pseudo-classes</h1>
<h2>Move your cursor to the below text</h2>
<div class="hello">Hello World</p>

</body>
</html>

Output:

What is CSS Pseudo-elements?

Pseudo-elements act in a similar way, but, they work as if you had added a whole new HTML element into the markup, in place of utilizing a class to existing elements. Pseudo-elements start with a double colon ::.

For instance, it can be applied to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

They are used to style a specific part of an element and start with a :: .

We also use : as a pseudo-element for backward compatibility.

• Pseudo Element & Pseudo Class Syntax
• Example of CSS Pseudo Elements
• The :after pseudo-element
• The :before pseudo-element (Decorative example)
• The :first-line pseudo-element
• The :first-letter pseudo-element
• The ::selection pseudo element

::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

The pseudo-elements are:

Do Check:

• CSS Comments
• The CSS Display property

Pseudo Element & Pseudo Class Syntax

The syntax of pseudo-element:

selector::pseudo-element {
  property: value;
}

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

CSS classes can also be practiced with pseudo-elements −

selector.class:pseudo-element {property: value}

Examples of CSS Pseudo Elements

We want to make the font of the first line of the paragraph slightly bigger than the rest:

p::first-line {
  font-size: 1.5rem;
}

Or maybe we want the first letter to be bigger and bolder:

p::first-letter {
  font-weight: bolder;
  font-size: 2rem;
}

We can specify the content property to insert any kind of content like image, after or before an element:

p::before {
  content: url(/myimage.png);
}

.myElement::before {
    content: "Hey There!";
}

The :after pseudo-element

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Output:

The :before pseudo-element (Decorative example)

HTML Code:

<span class="ribbon">Notice where the orange box is.</span>

CSS Code:

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Output:

The :first-line pseudo-element

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Output:

The :first-letter pseudo-element

The resulting example proves how to use the :first-letter element to add unique effects to the first letter of elements in the document.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Output:

The ::selection pseudo element

HTML Code:

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS Code:

/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Output:

The z-index CSS property estimates the z-order of a positioned element and its descendants or flex items. Look at the below sections to understand the concept of thez-index property thoroughly.

It’s very useful when you have multiple elements that overlap each other, and you need to decide which one is visible, as nearer to the user, and which one(s) should be hidden behind it.

This property takes a number (without decimals) and uses that number to calculate which elements appear nearer to the user, in the Z-axis.

Also Check: 

• Responsive pre tags in CSS

The higher the z-index value, the more an element is positioned nearer to the user.

When deciding which element should be visible and which one should be positioned behind it, the browser does a calculation on the z-index value.

• Definition of CSS z-index Property
• Formal Definition of z-index CSS
• Syntax for z-index CSS Property
• Formal Syntax
• CSS z-index Property Values
• Using CSS z-index Property
• Example on Visually layering elements using CSS z-index Property

CSS z-index Property

The z-indexproperty defines the stack order of an element. An element with a more comprehensive stack order is always ahead of an element with a lower stack order. Overlapping elements with a larger z-index defense those with a smaller one.

Remember: On all positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements), the z-index property only works.

Formal Definition of z-index CSS

Syntax for z-index CSS Property

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

The z-index property is defined as either the keywordauto or an<integer>.

auto:The box does not set a new local stacking context. The stack level of the created box in the current stacking context is 0.

<integer>:This <integer> is the stack level of the created box in the current stacking context. Also, the box builds a local stacking context. This implies that the z-indexes of descendants are not related to the z-indexes of elements outside this element.

Formal Syntax

auto | <integer>

CSS z-index Property Values

Using CSS z-index Property

The default value isautoa special keyword. Using auto, the Z-axis order is determined by the position of the HTML element in the page – the last sibling appears first, as it’s defined last.

By default, elements havestaticvalue for thepositionproperty. In this case, thez-indexproperty does not make any difference – it must be set toabsolute, relative or fixed to work.

Example:

.my-first-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    z-index: 10;
}

.my-second-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    z-index: 20;
}

The element with class .my-second-div will be displayed, and behind it .my-first-div.

Here we used 10 and 20, but you can use any number. Negative numbers too. It’s common to pick non-consecutive numbers, so you can position elements in the middle. If you use consecutive numbers instead, you would need to re-calculate the z-index of each element involved in the positioning.

Example on Visually layering elements using CSS z-index Property

HTML

<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>

CSS

.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Output:

Texts are the most fundamental elements of any website or web page. In this tutorial, we have shared how to disable text selection highlighting using CSS? Along with the CSS user-select Property definition and usage, syntax, values,  supported browsers, Steps to disable the text selection with CSS, and Example Codes on How to disable text selection highlighting using CSS?

• CSS user-select Property
• user-select property values
• How to disable text selection using CSS
• Example on How to disable text selection highlighting in the browsers using CSS?
• Steps to Disable Text Selection In WebPage Using CSS

CSS user-select Property

Theuser-selectproperty defines whether the text of an element can be selected. In various web browsers, in case you double-click on some particular text it will be selected/highlighted. To be unselected or disabled, this property can be used.

CSS Syntax

user-select: auto|none|text|all;

Do Check:

• How to invert colors using CSS
• How to align center in flexbox

user-select property values

How to disable text selection using CSS

By default browsers let us select the text in the browser using the keyboard, pressing the cmd-A combination on a Mac for example, or using the mouse.

How can you disable that, to make your web page behave more like an app and less like a document?

Use the user-select: none; CSS rule.

-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

One thing I use sometimes is to make all the app interface unselectable applying user-select: none; on the body element, then I can re-enable it on specific elements, using:

user-select: text;

Also, observe what statements that we can use for different browsers to disable a selectivity of text.

• Chrome, Opera: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• Internet Explorer: -ms-user-select

Example on How to disable text selection highlighting in the browsers using CSS?

At present, browsers only assist a small subset of CSS properties for::selection pseudo-element like color, background-color and text-shadow. Let’s see an example:

::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
::-moz-selection {
    color: none;
    background: none;
}

Steps to Disable Text Selection In WebPage Using CSS

There are two steps that should be followed to disable the text selection in webpage using CSS:

1. Make a HTML file and determine markup for webpage
2. Make a CSS file and specify styling to disable the text

Step 1: Make a HTML file and determine markup for webpage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="disable_style.css">
</head>
<body>
  
<h1>Disable Text Selection In WebPage Using CSS</h1>
<p class="select">Select The Text In This Paragraph This Is Selectable Like Any Other Text</p>
<p class="no_select">Try To Select This Text You Are Not Able To Select This Text In Modern Browsers</p>

</body>
</html>

Step 2: Make a CSS file and specify styling to disable the text

In this step, we have used the user-select property to disable the text selection and also the cross-browser prefix to work in most of the browser and also with some old browsers.

body
{
    background-color:#EB99FF;
    font-family:helvetica;
    text-align:center;
    margin:0px auto;
    padding:0px;
}
h1
{
    margin-top:100px;
    color:#424242;
    font-size:40px;
}
h1 p
{
    margin:0px;
    font-size:18px;
    color:black;
    text-decoration:underline;
}
.select
{
    font-size:30px;
    font-weight:bold;
    color:#4000FF;
}
.no_select
{
    font-size:30px;
    font-weight:bold;
    color:#4000FF;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}