CSS Hands-on | Part 1

Let use see how to insert a content after every paragraph. Just sepcify like

p::after {
  content : "..."
}

Similarly,to insert a text before the start of every paragraph, use

p::before {
   content : "Hi"
}

Positions in CSS are different ways to display an element at specific areas in a web page. There are three possible positioning techniques like:

1. position : absolute;
2. position : relative;
3. position : fixed;

Let us understand these one by one:

The position : absolute value specifies that the top - left coordinate will be referenced from the window's top left corner For example if we specify left : 30px for position : absolute, the element will be positioned 30px to the left of the screen

But in position: relative if we specify the same left:30px , it means that the element will be positoned 30px left of its enclosing parent element in the DOM tree

The value position : fixed means that the element will not move with the scrolling. It will maintain its coordinates.

CSS Backgrounds

CSS has many sub properties for the background images as well as background colors.
For example to set the background color of an element use the background-color property. To set the image as a background for a certain paragraph or a div use either the background-image or shorthand background property.

To understand backgrounds , let us take an example.

div.image {
  background-image: url("../images/56a3c6584f77fc045512ac2a_colourLogo.png");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

The background-image specifies the location of the image The background-position specifies the left and top positioning of the element The background-size specifies whether the background will scale up to cover the whole window or shrink to fit inside the smaller window size The background-repeat specifies if the background image will repeat if it is smaller in size than the window size

The background-repeat has four special values as follows:

1. no-repeat => The background image will not repeat even it is smaller than the window size
2. repeat-x => The background image will repeat in the X -direction ,i.e.,in the horizontal direction if it is smaller than the window size but will not repeat in the vertical (Y-direction)
3. repeat-y => The background image will repeat in the Y -direction ,i.e.,in the vertical direction if it is smaller than the winndow size but will not repeat in the horizontal (X-direction)
4. repeat => The background image will repeat in both the X and Y directions (i.e., the horizontal and vertical) directions if it is smaller than the window size

The background-size has two values :

1. cover => The background image scales up to cover the entire page
2. contain => The backgrund image shrinks to fit the window

Handling Overflow:

If your text or any other belemengt is taking too much space and it is crosses the border of its parent or its own space , it is called overflow of an element.
To handle this, CSS has three different properties:

1. overflow : none
2. overflow-x : none
3. overflow-y : none

If you want the browser to think and handle overflows on their own, depeending on the circumstances you can write as follows:

• overflow : auto
• overflow-x : auto
• overflow-y : auto

If you want a scrollbar to scroll down (hidden i.e., overflowed) content, use

p {
  overflow : scroll;
}

Similarly,

p {
  overflow-x : scroll;
}

p {
  overflow-y : scroll;
}

min-width and max-width, min-height and max-height

Sometimes, in your web page layout, you want to have an upper and lower bound on the width and/or the height of an HTML element
Web pages have different sizes and orientation. It can lead to problems because the website is built only for larger screen sizes. To pack up this we can use the min-width.
1 If the screen width 300px and the width of the image is 400px then if write min-width=300px then the image will fit in the smart phone. Similarly, for adjusting the height we can use min height.

Responsive using CSS

To create different styles for certain that behave differently on different screen sizes use the media annotation. Example,

  @media( max-width = 991px) {
  #div1 {
  	overflow : none;
  }
  
  #div2 {
    background-position : cover;
  }
  
  }
  

The above code will apply the stylesheets for both the div elements for devices whose width is maximum 991px not more than that and that means for mobiles, smart phones, tablets, small laptops,etc.

The above technique is called Mobile-first, meaning that the layout and markup is made tailor-made for small devices having a priority over large laptops or desktops.

The Desktop-first design is the opposite of Mobile-first meaning that instead of max-width=991px we will write min-width=991px and everything else is the same. min-width=991px means that the device should be of size 991px mimimum. Hence, scvreen sizes greater than 991px will be allowed

Floats

Sometimes, we want to position elements one by one like an image and its description in a single horizontal line, we use

#div1 {
    	float:left;
    	max-width: 50%;
    }
    img {
    	float:left;
    	max-width: 50%;
    }

Now, suppose the HTML code is like

<div class="root">
  <div id="div1">Some text</div>
  <img src="test.png" />
</div>

Then the div will be at the left and the in to the left.

The floats feature is a very good solution for aligning images and their description as before floats where in use, the text and image could not have been properly aligned meaning half the "div" text will be below the image and half in the right side top corner

Some examples to use "floats" is:

1. Define a menu bar at the top of web pages of a website sometuimes called a header
2. Define a horizontal unordered or ordered list iotems
3. Create a animating slideshow with HTML5,CSS3 and JQuery(ire including javacscript)