{"id":113719,"date":"2023-06-16T09:00:33","date_gmt":"2023-06-16T03:30:33","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113719"},"modified":"2024-07-27T17:57:37","modified_gmt":"2024-07-27T12:27:37","slug":"css-media-queries","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-media-queries\/","title":{"rendered":"CSS Media Queries"},"content":{"rendered":"

Developers can alter the appearance of a webpage based on a variety of factors, including the size, orientation, and resolution of the device’s screen, by using the CSS @Media Query. It enables responsive design, where the layout of a webpage adjusts to fit different devices and screens. CSS Media Queries make it possible to create dynamic, multi-device experiences that provide optimal viewing and interaction experiences for the user. It’s a crucial tool in modern web development and essential for creating websites that look great on all devices.<\/p>\n

Among various functions, CSS Media Queries are very helpful to develop fluid layouts that provide better usability in different devices.<\/p>\n

For example, the media queries can allow changing the font sizes, adjusting the grid and the arrangement of the items on the website for better readability and usability. This is important so that users can be retained and so that content is not restricted to a specific kind of device. Moreover, media queries apply to any form of media, whether printed, on screens or spoken, meaning that their application can span across various platforms.<\/p>\n

Properties of CSS Media Queries<\/h3>\n

There are several properties that can be used in CSS @media queries to apply different styles based on specific conditions. Below are a few of the attributes that are used regularly:<\/p>\n

1. Max-width:<\/strong><\/p>\n

<style>\r\n@media only screen and (max-width: 600px) {\r\nbody {\r\nbackground-color: lightblue;\r\n}\r\n}\r\n<\/style><\/pre>\n
2. Min-width:<\/strong><\/p>\n
<style>\r\n@media only screen and (min-width: 600px) {\r\nbody {\r\nbackground-color: lightgreen;\r\n}\r\n}\r\n<\/style><\/pre>\n
3. Min-resolution:<\/strong><\/p>\n
<style>\r\n@media only screen and (min-resolution: 300dpi) {\r\nbody {\r\nbackground-color: lightpink;\r\n}\r\n}\r\n<\/style><\/pre>\n
4. Orientation:<\/strong><\/p>\n
<style>\r\n@media only screen and (orientation: landscape) {\r\nbody {\r\nbackground-color: lightgray;\r\n}\r\n}\r\n<\/style><\/pre>\n
5. Aspect-ratio:<\/strong><\/p>\n
<style>\r\n@media only screen and (aspect-ratio: 16\/9) {\r\nbody {\r\nbackground-color: lightyellow;\r\n}\r\n}\r\n<\/style><\/pre>\n
Uses of CSS Media Query<\/h3>\n
CSS @media query is a powerful tool for creating dynamic, multi-device web experiences. Here are some of the most common uses of CSS @media query<\/p>\n
1. Responsive design:<\/strong><\/p>\n
<style>\r\n\/* styles for devices with a screen width of 600px or less *\/\r\n@media only screen and (max-width: 600px) {\r\nbody {\r\nbackground-color: lightblue;\r\n}\r\n}\/* styles for devices with a screen width of more than 600px *\/\r\n@media only screen and (min-width: 601px) {\r\nbody {\r\nbackground-color: lightgreen;\r\n}\r\n}\r\n<\/style><\/pre>\n
2. Device-specific styles:<\/strong><\/p>\n
<style>\r\n\/* styles for tablet devices in landscape mode *\/\r\n@media only screen and (min-width: 601px) and (max-width: 900px) and (orientation: landscape) {\r\nbody {\r\nbackground-color: lightpink;\r\n}\r\n}\r\n\r\n\/* styles for desktop devices *\/\r\n@media only screen and (min-width: 901px) {\r\nbody {\r\nbackground-color: lightgray;\r\n}\r\n}\r\n<\/style><\/pre>\n
3. Print styles:<\/strong><\/p>\n
<style>\r\n\/* styles for print media *\/\r\n@media print {\r\nbody {\r\nbackground-color: white;\r\n}\r\n}\r\n<\/style>\r\n\r\n<\/pre>\n
4. High-resolution displays: <\/strong><\/p>\n
<style>\r\n  \/* styles for high-resolution displays *\/\r\n  @media only screen and (min-resolution: 300dpi) {\r\n    body {\r\n      background-color: lightyellow;\r\n    }\r\n  }\r\n<\/style>\r\n<\/pre>\n
Options available in CSS @Media Query<\/h3>\n
There are several options available in CSS @media query that can be used to apply different styles based on specific conditions. The attributes that are most frequently used are listed below:<\/p>\n
Screen size:<\/strong><\/p>\n
<style>\r\n@media only screen and (max-width: 600px) {\r\nbody {\r\nbackground-color: lightblue;\r\n}\r\n}\r\n<\/style><\/pre>\n
Device orientation:<\/strong><\/p>\n
<style>\r\n@media only screen and (orientation: landscape) {\r\nbody {\r\nbackground-color: lightgreen;\r\n}\r\n}\r\n<\/style><\/pre>\n
Display resolution:<\/strong><\/p>\n
<style>\r\n@media only screen and (min-resolution: 300dpi) {\r\nbody {\r\nbackground-color: lightpink;\r\n}\r\n}\r\n<\/style><\/pre>\n
Display type:<\/strong><\/p>\n
<style>\r\n@media only screen and (monochrome) {\r\nbody {\r\nbackground-color: lightgray;\r\n}\r\n}\r\n<\/style><\/pre>\n
Example:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>\r\nWebsite Layouts\r\n<\/title>\r\n<style>\r\n#div1{\r\nwidth: 60%;\r\nborder: 1px solid black;\r\n}\r\n\r\n@media screen and (max-width: 900px) {\r\n#div1{\r\nwidth: 80%;\r\n}\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n#div1{\r\nwidth: 100%;\r\n}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<body>\r\n<div id=\"div1\">\r\n<h1> DataFlair <\/h1>\r\n<p> DataFlair is a company that provides excellent online training courses in various IT fields. Their courses are well-structured, hands-on, and taught by experienced trainers. <\/p>\r\n<\/div>\r\n<\/body>\r\n<\/body>\r\n<\/html><\/pre>\n
Output<\/strong><\/p>\n
\"css<\/a><\/p>\n
Understanding Breakpoints in CSS Media Queries<\/h3>\n
Breakpoints are specific points in your website’s design where the layout needs to change in order to accommodate different screen sizes. For example, you may want to change the layout of your navigation menu when the screen size drops below a certain point.<\/p>\n
When using CSS media queries, it’s important to understand the breakpoints in your design and to create media queries that target these specific breakpoints. Some common breakpoints include:<\/p>\n
    \n
  • Small screens:<\/strong> Typically, screens with a maximum width of 576px are considered small screens.<\/li>\n
  • Medium screens:<\/strong> Screens with a width between 577px and 768px are considered medium screens.<\/li>\n
  • Large screens:<\/strong> Screens with a width between 769px and 992px are considered large screens.<\/li>\n
  • Extra-large screens:<\/strong> Screens with a width between 993px and 1200px are considered extra-large screens.<\/li>\n
  • Full HD screens:<\/strong> Screens with a width above 1200px are considered full HD screens.<\/li>\n<\/ul>\n
    By understanding these breakpoints and creating media queries that target them, you can ensure that your website looks great on all devices and screen sizes. It’s also important to test your website on different devices and screen sizes to ensure that your media queries are working correctly.<\/p>\n
    Creating Complex Media Queries with CSS<\/h3>\n
    While basic CSS media queries are straightforward, creating complex media queries can require some additional planning and organization. Here are some tips for creating more complex media queries:<\/p>\n
    1. Use comments to document your media queries:<\/strong> When dealing with complex media queries, it’s helpful to add comments to your code to explain what each media query is doing. This can make it easier to debug any issues that arise and to understand your code in the future. For example:<\/p>\n
    \/* Media query for screens up to 576px *\/\r\n@media (max-width: 576px) {\r\n\/*small screens *\/\r\n}\r\n\r\n\/* Media query for screens between 577px and 768px *\/\r\n@media (min-width: 577px) and (max-width: 768px) {\r\n\/* medium screens *\/\r\n}<\/pre>\n
    2. Create a separate CSS file for each breakpoint:<\/strong> To keep your media queries organized, you can create a separate CSS file for each breakpoint. For example, you might have a “small.css” file for screens up to 576px, a “medium.css” file for screens between 577px and 768px, and so on. Then, in your HTML, you can include only the CSS files that correspond to the current screen size. For example:<\/p>\n
    <link rel=\"stylesheet\" href=\"small.css\" media=\"(max-width: 576px)\">\r\n<link rel=\"stylesheet\" href=\"medium.css\" media=\"(min-width: 577px) and (max-width: 768px)\"><\/pre>\n
    3. Use variables to simplify your media queries:<\/strong> If you’re using the same values in multiple media queries, consider using variables to simplify your code. For example, you might create a variable for your site’s maximum width and then use that variable in all your media queries. This makes it easier to update your styles later on. For example:<\/p>\n
    \/* Define variable for site's maximum width *\/\r\n:root {\r\n--site-max-width: 1200px;\r\n}\r\n\r\n\/* variable in media queries *\/\r\n@media (max-width: var(--site-max-width)) {\r\n\/* site's maximum width *\/\r\n}\r\n\r\n@media (min-width: var(--site-max-width)) {\r\n\/* Styles for screens above site's maximum width *\/\r\n}<\/pre>\n
    4. Test your media queries on multiple devices and screen sizes:<\/strong> As always, it’s important to test your media queries on multiple devices and screen sizes to ensure that your website looks great across the board. You might also consider using a tool like BrowserStack to test your website on a wide range of devices and browsers. This can help you identify any issues with your media queries and make sure that your website is accessible to as many users as possible.<\/p>\n
    Accessibility and CSS @Media Query<\/h3>\n
    CSS includes several media features that can help make websites more accessible to users with disabilities. Here are some examples of common accessibility-related media features:<\/p>\n
    1. prefers-reduced motion:<\/strong> This media feature detects whether the user has requested a reduction in motion. This can be helpful for users with motion sickness, vestibular disorders, or other conditions that may make it difficult to view websites with animated or moving elements. For example, designers might use this feature to disable animations or other motion-based effects when the user has requested reduced motion. Here’s an example:<\/p>\n
    @media (prefers-reduced-motion: reduce) {\r\n\/*reduced motion *\/\r\n}<\/pre>\n
    2. prefers-contrast:<\/strong> This media feature detects whether the user has requested increased contrast. This can be helpful for users with low vision or color blindness. For example, designers might use this feature to increase contrast between text and background elements when the user has requested it. Here’s an example:<\/p>\n
    @media (prefers-contrast: high) {\r\n\/*high contrast *\/\r\n}<\/pre>\n
    3. inverted-colors:<\/strong> This media feature detects whether the user has enabled inverted colors. This can be helpful for users with visual impairments. For example, designers might use this feature to adjust a website’s colors to ensure that they remain readable and navigable when the user has enabled inverted colors. Here’s an example:<\/p>\n
    @media (inverted-colors: inverted) {\r\n\/* inverted colors *\/\r\n}<\/pre>\n
    Breakpoint in CSS @Media Query<\/h3>\n
    In CSS @media query, a breakpoint is a specific screen size or range of screen sizes where the styles defined within the media query will be applied. It is the point at which the design of a website or application changes in response to the size of the viewport.<\/p>\n
    Breakpoints are commonly used in responsive web design to ensure that a website or application is optimized for different screen sizes, from desktops to tablets to smartphones. By setting breakpoints at specific screen sizes, developers can create a flexible and responsive design that adapts to the user’s device and viewport size.<\/p>\n
    Common breakpoints in CSS @media query include small screens (less than 768 pixels), medium screens (between 768 and 1024 pixels), and large screens (greater than 1024 pixels). However, breakpoints can be set at any screen size or range of screen sizes, depending on the needs of the website or application.<\/p>\n
    Creating complex media queries in CSS<\/h3>\n
    Creating complex media queries in CSS involves using logical operators to combine multiple conditions and create more targeted styles for specific devices or situations.<\/p>\n
    Here are the basic steps to creating complex media queries in CSS:<\/p>\n
    1. Identify the conditions you want to target, such as screen size, device orientation, resolution, or any other relevant factors.<\/p>\n
    2. Use logical operators (such as and, or, and not) to combine multiple conditions into a single media query.<\/p>\n
    3. Define the styles you want to apply within the media query, using the same syntax as a standard CSS rule.<\/p>\n
    For example, to create a complex media query that targets devices with a screen size of 768 pixels or larger and a landscape orientation, you could use the following CSS:<\/p>\n
    @media screen and (min-width: 768px) and (orientation: landscape)\r\n{ \/* Styles for devices with a screen size of 768px or larger in landscape orientation *\/ }<\/pre>\n
    This media query uses the operator to combine two conditions: min-width: 768px, which targets screens with a minimum width of 768 pixels, and orientation: landscape, which targets devices in landscape orientation. The styles defined within the media query will only be applied to devices that meet both conditions.<\/p>\n
    By using logical operators and multiple conditions, you can create complex media queries that target specific devices, situations, or user needs, and ensure that your designs are responsive and accessible across a wide range of devices and contexts.<\/p>\n
    Accessibility in CSS @Media Query<\/h3>\n
    Accessibility in CSS @media query refers to ensuring that the styles applied to different devices or situations are inclusive and accessible to users with diverse needs and abilities.<\/p>\n
    When designing responsive websites or applications using media queries, it’s essential to consider the needs of users with disabilities, such as low vision or motor impairments, and ensure that the content is perceivable, operable, and understandable for them.<\/p>\n
    Some accessibility considerations to keep in mind when using media queries include:<\/p>\n
    1. Providing clear and consistent navigation options that are easy to use and understand.<\/p>\n
    2. Ensuring that the content is easily readable and legible, with sufficient contrast between text and background colors.<\/p>\n
    3. Using scalable fonts and responsive layouts that adjust to different screen sizes and resolutions.<\/p>\n
    4. Using accessible color schemes that don’t rely solely on color to convey information.<\/p>\n
    5. Providing alternatives to visual content, such as text descriptions for images and videos.<\/p>\n
    By following these best practices and considering the needs of users with diverse abilities, you can create accessible and inclusive designs that work well across a range of devices and situations.<\/p>\n
    Conclusion<\/h3>\n
    In conclusion, CSS media query is a fundamental tool for modern web development. It allows developers to create responsive, dynamic, and device-specific styles for their web pages. Developers can use CSS @media query to apply styles based on conditions such as screen size, orientation, and resolution, creating dynamic user experiences for different devices. This ensures that their content is engaging and meets the needs of their audiences. Whether you are creating a new website or improving an existing one, CSS @media query is a must-have tool in your web development arsenal.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Developers can alter the appearance of a webpage based on a variety of factors, including the size, orientation, and resolution of the device’s screen, by using the CSS @Media Query. It enables responsive design,...<\/p>\n","protected":false},"author":581,"featured_media":113854,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27458,27459],"class_list":["post-113719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-media-queries","tag-css-media-query"],"yoast_head":"\nCSS Media Queries - DataFlair<\/title>\n<meta name=\"description\" content=\"CSS media queries allow developers to create responsive, dynamic, and device-specific styles for their web pages. Learn with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-media-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Media Queries - DataFlair\" \/>\n<meta property=\"og:description\" content=\"CSS media queries allow developers to create responsive, dynamic, and device-specific styles for their web pages. Learn with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-16T03:30:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T12:27:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Media Queries - DataFlair","description":"CSS media queries allow developers to create responsive, dynamic, and device-specific styles for their web pages. Learn with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/css-media-queries\/","og_locale":"en_US","og_type":"article","og_title":"CSS Media Queries - DataFlair","og_description":"CSS media queries allow developers to create responsive, dynamic, and device-specific styles for their web pages. Learn with examples.","og_url":"https:\/\/data-flair.training\/blogs\/css-media-queries\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-06-16T03:30:33+00:00","article_modified_time":"2024-07-27T12:27:37+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"CSS Media Queries","datePublished":"2023-06-16T03:30:33+00:00","dateModified":"2024-07-27T12:27:37+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/"},"wordCount":1649,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp","keywords":["CSS Media Queries","CSS Media Query"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-media-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/","url":"https:\/\/data-flair.training\/blogs\/css-media-queries\/","name":"CSS Media Queries - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp","datePublished":"2023-06-16T03:30:33+00:00","dateModified":"2024-07-27T12:27:37+00:00","description":"CSS media queries allow developers to create responsive, dynamic, and device-specific styles for their web pages. Learn with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-media-query.webp","width":1200,"height":628,"caption":"css media query"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-media-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS Media Queries"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113719"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113719\/revisions"}],"predecessor-version":[{"id":142978,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113719\/revisions\/142978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113854"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}