Selectors, Display Property, Position Property In CSS
Selectors
Class Selector
In this article I want to mention other things that you can use as selectors in order to make more specific changes to our web site by using CSS . We have been using tag selectors since we begin to use Internal and External CSS in our projects. For instance, We have 2 different images and we would like to have different background color. If we would use tag selector for style our images, What would have happened? Obviously, Both of our images would have same background color, wouldn’t it ? Therefore , We will use .class selector in order to avoid that problem. Okay than let’s see how it is doing. I have attached simple html component screenshot at below.
And this html component has stylesheet which name is “style” at left side of page. I have given some basic properties for our webpages. The goal of the .class selector is that select all elements which belong to a particular class attribute. To select the elements with a particular class, use (.) character with specifying class name in our stylesheet. And implement different css properties for that elements. I attached display of these 2 component at below in order to make it more clear before using .css selector.
As we have mentioned that we would like to have different background color of images. We will add class = “ “ attribute in the elements which we want to select with a particular class. Obviously , we will add class attribute at our images element. Moreover, An element might be able to multiple class name for various styles.
To access element which had class attribute , we have to use (.) character with specifying class name in our external css stylesheet. As you can see at below from screenshot there are two separate class name ( hamburger , pizza) and one common class name ( circular )at 2 of images element.
Class selectors stronger than tag elements. If you inspect your page, You will see that css style which from img tag selector, crossed out. Because Class selectors have more priority order compare to tag selectors. Okay than , We expect that hamburger images has black background color , pizza images has orange background color and both of our images have circular shape.
Id Selector
So use classes when we want to apply the same style to a group of related items. And use the id to apply a specific style to a single element on our web page. The ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, it’s id attribute must match exactly the value given in the selector. You should think kind of like name versus passport where anybody can have the same name. However, there is only one person with particular passport number and that uniquely identifies to across all of the other humans in the world. So the similarities are they are both used to identify HTML elements that we want to style and CSS does not actually care what we use. Okay than , Let’s implement id selector to our project.
A CSS ID selector contains a “#” immediately followed by the ID value, which must be an identifier.
And I attached display of the using all selectors at below. I highly recommend to try it out yourself.
Display Property
The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page. There are a few important values for display properties such as block, inline, inline-block etc.
Display Block Property
It is used to displays an element as a block element. And it always starts on a new line and takes up the full width available. Moreover, block element stretches out to the left and right as far as it can. Also, we can add padding, margin for all of the side of block element. There are bunch of elements which we have already used for our projects. Examples of that elements <div>…</div>, <h1>…</h1> — <h6>…</h6>, <p>…</p>,<form>…</form> etc. How do they look when we used them in our projects. Let me show how they do.
As you can see from left side , there are heading , paragraph and form elements we have in our html page. The point that block element stretches out to the left and right as far as it can. I put style attribute on each element by using inline css in order to see more clear.
There is one point that is important as well. What if we would like to put our elements next to each other. Property of block-level elements can not be next to each other. However, we can figure it out with different display properties.
Display Inline Property
Displays an element as an inline element (like <span>). Any height and width properties will have no effect. Before showing display inline property, we should take look inline element. An inline element does not start on a new line and only takes up as much width as necessary. Now while we can have spans that are nested inside paragraph tags or h1s or whatever else it may be (block-level element), you can also have them as standalones. If we select our span element and we also give it a background color, then you can see that these elements are inline. Let me show it.
As we mentioned that any height and width properties will have no effect. For example we cant give particular any height span element. Okay than , I have attached new example at below to see display inline property.
I wanted to have 3 box by using basic Internal CSS. I have created my boxes by using <div>…</div>( div tag is used to divide or section off content on a web page and is also block element). According to features of block elements I have given width, height properties, haven’t it? Than, I have set 2 of my boxes display property as inline and last my box is still block element. Do you expect to display of these boxes as a 200x200 pixels each of box and next to each other? Let’s see how do they display on the page.
So we have 2 boxes(Box 1 and Box 2) which are inline element next to each other but does not have any width and height property. On the other hand, we have a box (Box 3) which has width and height property but not next to other boxes. What if we want boxes to give height and width property meanwhile be next to each other? How could we do that? At that point , Inline-Block Display property becomes our developer life.
Display Inline-Block Property
This property uses the both properties that I have mentioned at above , block and inline. So, this property aligns the elements inline but the difference is that it can put the height and the width of block. Basically, this will align the element both in block and inline fashion. Let’s head to see how do they do.
I wanted to have 3 box by using basic Internal CSS again . According to features of inline-block elements I have given width, height properties, haven’t it? Than, In order to display of these boxes as a 200x200 pixels each of box and next to each other , I set display property as inline-block on each boxes.
In a conclusion , We have managed to have 3 boxes which can be set any width, height and next to each other.
Position Property
The position CSS property sets how an element is positioned in a document. Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value. There are five different position value
- Static
- Relative
- Fixed
- Absolute
- Sticky
For this article we will cover static, relative and absolute values.
Position: static
This is the default value of position property. Static positioned elements are not affected by the top, bottom, left, and right properties. Furthermore, The element is positioned according to the normal flow of the document
Position: relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, bottom, right and left. There are two important things that we have to remember when we are dealing with relative positioning. The first thing is that when we move an element that has a relative position, it does not affect the position of any elements on the screen. The second thing to remember is that when we change the coordinate properties (top, bottom, left or right ), we are taking the top of where that element used to be located. Let me show how it is.
I have set position of two boxes as static (Box 1 and Box 2) and position of last box as relative. When I set position as relative, it does not make any affect on 3rd box because of having not new value of coordinates. When I set to value of bottom and left properties. My box has moved new location according to new value of bottom and left properties. There were two important things that we should remember when we are dealing with relative position. As you can see that third box did not affect the position of any other box on the screen.
And Box 3 which relatively-positioned element moved to be adjusted away from its normal position
Position: absolute
The element which has absolute position , is removed from the normal document flow. And the element does not have space in the page layout. It is positioned relative to its closest positioned ancestor(parent element). If there is not any parent element , it is placed relative to the initial containing block. Same as positioning relative element ,Its final position is determined by the values of top, bottom , left and right. This values create a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
For example, I would like to have 3 boxes. One of box will be ground for other two boxes. In order to do this property, I will set position of ground box(Box 1) as relative. Than rest of my box’s(Box 2 and Box 3) position property needs to set as absolute. So, I will provide to have position relative the to its ancestor(parent element) which is Box 1. After that , I can be able to be positioned my Box 2 and Box 3 as much I want on the ground by using top, bottom ,left and right properties value. From our example which is at left side. Box 2 and Box 3 was set (0,0) coordinates of Box-1 . You can see display of this example at below.
Okay than , What if we would like Box 2 and Box 3 to touch on their corner. There is just basic math calculation left to do it.
I hope that anyone who has read this article, enjoyed and catch some points from article. Thanks for reading.
