CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
RWD Media Query
A media query in CSS is a method that targets the browser through some characteristics, features and user preferences and then execute or apply the styles on the elements.
A media query is specified in a @media rule which wraps the element with conditions describing when and where the styles need to be applied when these conditions are met by the browser.
CSS RWD Media Query - width Property
In the following example the body's background is changed to plum when the viewport width is wider than 35em and narrower than 85em. When the viewport width does not match that range of values, then it will fallback to white.
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      background-color: white;
      height: 300px;
      width: 300px;
   }
﻿
   @media (min-width: 35em) and (max-width: 85em) {
      div {
         background-color: plum;
      }
   }
</style>
</head>
<body>
   <div></div>
</body>
</html> 
CSS RWD Media Query - Multiple Breakpoints
In the following example the body’s background is changed to different colors based on the size of the screen. Multiple breakpoints are set at different screen sizes using the max-width and min-width properties inside the media queries. On meeting the requirements of the media query, the styling is applied.
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
   }
﻿
   body {
      font-family: sans-serif;
      font-size: 35px;
      background-color: aqua;
      height: 1500px;
      width: auto;
   }
   
   .container {
      border: 4px solid red;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
   }
﻿
   #size {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 35px;
   }
﻿
   @media (max-width: 512px){
      .container {
         background-color: plum;
      }
   }
﻿
   @media (max-width: 657px) and (min-width: 513px){
      .container {
         background-color: lightyellow;
      }
   }
﻿
   @media (max-width: 1000px) and (min-width: 658px) {
      .container {
         background-color: teal;
      }
   }
﻿
   @media (min-width: 1001px) {
      .container {
         background-color: bisque;
      }
   }
</style>
</head>
<body>
   <div class="container">Responsive Web Design</div>
   <div id="size"></div>
   <script>
      window.onresize = screen;
      window.onload = screen;
﻿
      function screen() {
         checkWidth = window.innerWidth;
﻿
         document.getElementById('size').innerHTML = "Width : " + checkWidth + "px";
      }
   </script>
</body>
</html>
CSS RWD Media Query - Using Orientation
In the following example the body’s background is set to bisque and the navigation bar is teal in color, when the orientation of the screen is landscape. As the screen is resized such that the orientation changes to portrait, the background color changes to seagreen and the navigation bar changes to orange and becomes sticky. The same feature is achieved using the media query.
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: bisque;
   }
   
   nav {
      block-size: 5rem;
      background: red;
﻿
   }
﻿
   @media only screen and (orientation: portrait) {
      nav {
            background: orange;
            position: sticky;
            top: 0;
            color: black;
      }
      body {
         background-color: seagreen;
      }
   }
</style>
</head>
<body>
﻿
   <nav>Navigation</nav>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
﻿
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
</body>
</html>
﻿
﻿
﻿
﻿
﻿
﻿
﻿
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

RWD Media Query

CSS RWD Media Query - width Property

CSS RWD Media Query - Multiple Breakpoints

CSS RWD Media Query - Using Orientation
