Essential CSS Tutorial – Part 2

At the end of Part 1 of this tutorial we introduced <style></style> tags of HTML in order to define styles globally. By changing styles of <a></a> globally, we changed it for all the links. Problem with defining styles and modifying default look and feel of HTML elements is that we will have same look and feel of these HTML elements throughout the website which is obviously not desirable for large websites. To resolve this issue we have ‘class’ selector.

Class

In simple words ‘class’ is a named group of styles which can be applied to any HTML tag. Class is defined by a custom name which is preceded by period (.) sign and having its styles enclosed in curly brackets. After defining a class, the same can be applied to any HTML tag by using ‘class’ attribute within that HTML tag. So, let’s define a class and use it. First, create a fresh HTML file in “csstut” folder that we created in Part 1 of the this tutorial. To speed up the process, simply copy-paste the index.html file and rename the new file as ‘second.html’. Now, replace the contents of second.html with following code:

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style>
.mystyle {
   text-decoration: none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin:10px; background-color: white;
}
.mystyle:hover {
   color:white; background-color: blue;
}
.div-style {
   padding:10px; margin:20px; box-shadow: 1px 1px 8px gray; background-color: lightgray;
}
</style>
</head>
<body>
  <div class="div-style">
    <a class="mystyle" href="http://youtube.com">YouTube</a>
    <a class="mystyle" href="http://twitter.com">Twitter</a>
    <a class="mystyle" href="http://linkedin.com">Linkedin</a>
  </div>
</body>
</html>

Save the file and open it in the browser. All three links behave same as clickable dynamic buttons. Here, we haven’t changed the default style for <a></a>, instead we defined styles under a custom class name i.e. ‘mystyle’ and applied the ‘mystyle’ to all three links using ‘class’ attribute in <a> tag. Moreover, we defined another class named ‘div-style’ and used ‘box-shadow’ style to give some dramatic drop shadow effect. Then we applied ‘div-style’ to <div></div> tags; <div> is just a container for other HTML tags.

We can define as many custom classes as we like. Also, we can apply multiple classes to same tag. To understand this, let’s modify second.html as follows:

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style>
.mystyle {
   text-decoration: none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin:10px; background-color: white;
}
.mystyle:hover {
   color:white; background-color: blue;
}
.btn {
   color:white; text-decoration:none; padding:5px 10px 5px 10px; border-radius:5px; margin:10px;
}
.btn-green {
   background-color:green; border: 1px solid darkgreen;
}
.btn-green:hover {
   background-color:darkgreen;
}
.btn-red {
   background-color:red; border: 1px solid darkred;
}
.btn-red:hover {
   background-color:darkred;
}
.div-style {
   padding:10px; margin:20px; box-shadow: 1px 1px 8px gray; background-color: lightgray;
}
</style>
</head>
<body>
  <div class="div-style">
    <a class="mystyle" href="http://youtube.com">YouTube</a>
    <a class="mystyle" href="http://twitter.com">Twitter</a>
    <a class="mystyle" href="http://linkedin.com">Linkedin</a>
  </div>
  <div class="div-style">
    <a class="btn btn-green" href="http://google.com">Google</a>
    <a class="btn btn-red" href="http://google.com">Google</a>
  </div>
</body>
</html>

Save and reload the browser. We have second <div> with two Google buttons – one has green color and other has red color. Here, we’ve defined ‘btn’ class for carrying basic button styles i.e. padding, margin, text color etc. Then, we defined separate ‘btn-green’ and ‘btn-red’ classes to have separate colored buttons. By doing so we decoupled the styling from generic to more specific. Then in each link we applied basic ‘btn’ along with a colored class i.e. ‘btn-green’ or ‘btn-red’. That’s how we chained styles together and applied multiple classes to an HTML tag.

<div></div>

Let’s talk about <div> a bit more. <div> means a ‘division’ or a portion or a layer; it’s just a holder or container element for other HTML tags. One important thing about <div> is that it has ‘block’ display by default i.e. covers whole width of screen and have line-breaks before and after it. We can change ‘block’ behavior of any tag by styling it as “display: inline;” conversely we can change ‘inline’ behavior of any tag by styling it as “display: block;”. Let’s change ‘div-style’ as follows:

.div-style {
   padding:10px; margin:20px; box-shadow: 1px 1px 8px gray; background-color: lightgray; display:inline;
}

Save and reload second.html and observe how <div> tags have become inline (in one line) instead of block. We did this just to clarify the concepts of inline and block displays. So, let’s undo the above change and make the <div> tags block again by removing ‘display: inline;’

.div-style {
   padding:10px; margin:20px; box-shadow: 1px 1px 8px gray; background-color: lightgray;
}

Save and reload second.html to get the original look and feel of <div> tags as block.

Position

While playing with <div> we also need to understand how to position them. ‘Positioning’ <div> is vital concept because through ‘position’ together with ‘right’, ‘left’ , ‘top’, ‘bottom’ and ‘z-index’ CSS styles, we can actually organize and place contents of our webpage in a desired way or in a specific location.

Ok, let’s do away with the theory first, which won’t make sense most probably:

An HTML element including <div> can be ‘positioned’ as ‘static’, ‘relative’, ‘absolute’, ‘fixed’ or ‘sticky’.

All the HTML elements including <div> are positioned ‘static’ by default. A static positioned element cannot have styles of ‘right’, ‘left’ , ‘top’, ‘bottom’ and ‘z-index’.

A ‘relative’ positioned element acts relative to the flow of document or view-port or parent element. A relative positioned element can have styles of ‘right’, ‘left’ , ‘top’, ‘bottom’ and ‘z-index’.

An ‘absolute’ positioned element will render along the parent element if the parent element is already positioned. If parent element is not positioned then the ‘absolute’ positioned element will render along the document or view-port. An absolute positioned element can have styles of ‘right’, ‘left’ , ‘top’, ‘bottom’ and ‘z-index’. An ‘absolute’ positioned element falls off the normal flow of document and it can overlap too and that’s where ‘z-index’ plays a major role. ‘z-index’ defines which element comes over which.

‘Fixed’ and ‘sticky’ positioned elements are different beasts; as their names suggest, they get glued to a specific position of the document / view-port irrespective of the webpage scrolling.

Didn’t make much sense? So let’s understand by practical examples and add following new styles within <style></style> tags of second.html:

.parent-1 {
   border: 1px solid black; position: relative; left: 10px; top: 10px; height: 30px; width: 400px; overflow: auto;
}
.parent-2 {
   border: 2px solid red; position: absolute; left: 200px; top: 5px; color: white; background-color: gray; z-index:-1;
}
.parent-3 {
   border: 3px solid purple; position: sticky; margin-top: 20px; top: 20px; background-color: lightgray; padding: 5px;
}
.child-1 {
   border: 3px solid pink; position: absolute; left: 40px;
}
.child-2 {
   border: 3px solid orange; position: fixed; right: 20px; background-color: teal; color: white; padding-top: 20px; padding-bottom: 20px; z-index: 1;
}

And then insert following lines within <body></body> tags of second.html:

  <div class="parent-1">
    Parent-1 (relative) div at body level.
  </div>
  <div class="parent-2">
    Parent-2 (absolute) div at body level.
  </div>
  <div class="parent-1">
    Parent-1 (relative) div at body level.
	  <div class="child-1">
		Child-1 (absolute) inside a positioned div.
	  </div>
	  <div class="child-2">
		Child-2 (fixed) inside.
	  </div>
  </div>
  <div class="parent-3">
	Parent-3 (sticky).
  </div>
  <p style="font-size:150px;">
	We have kept the font size of this paragraph at 150px so that we could scroll down the browser view and observe how 'fixed' and 'sticky' positions behave.
  </p>

Save and reload the second.html to observe styling and behavior of each <div>.

First <div> applies the styles class ‘parent-1’ which has ‘position: relative’ style. This div is a top level element which has <body> as its parent – therefore this div will position itself relative to body and will become part of normal flow of the <body> element. And that’s why this div is appearing right after the previous two divs.

Second <div> applies the styles class ‘parent-2’ which has ‘position: absolute’ style. This div is also top level element, in order words this div has no positioned parent element. And we know if an element is positioned as absolute but has no positioned parent, then the element falls off the normal flow of document and that’s why this div has fallen off the normal flow of document and is appearing at the beginning of the webpage.

Third <div> has two children divs. First child <div> applies the styles class ‘child-1’ which has ‘position: absolute’ style. Since this child <div> has a parent <div> which is positioned (‘parent-1’ is positioned ‘relative’), this child will position itself with the flow of positioned parent. Second child <div> applies the styles class ‘child-2’ which has ‘position: fixed’. Second child <div> will stick to view-port and will stay fixed to that position irrespective of scrolling.

Fourth <div> applies the styles class ‘parent-3’ which has ‘position: sticky’ style. This <div> will behave relative to the flow of document at first and if the scrolling continues beyond the position of this div then it will stick to the view-port just like ‘fixed’ position element.

Apart from ‘position’ style, there are certain other styles to be noted, for instance we’ve inserted ‘z-index: -1’ style in ‘parent-2’ class which sends this div behind the other divs. ‘z-index’ defines the precedence means which element comes over which. ‘-1’ value sends the element backward of others. Try changing the value from ‘-1’ to ‘1’ and observe the behavior of ‘parent-2’ div. Similarly elements with ‘1’ or higher z-index value will be sent forward to others as we have defined in ‘child-2’ class due to which the ‘fixed’ div remains above the other divs. Try changing the value from ‘1’ to ‘-1’ and observe the behavior of ‘fixed’ div.

Then we’ve used ‘left’ style in some classes in order to specify how much space be present at the ‘left’ side of the element. Similarly we used ‘right: 20px’ in the ‘child-2’ class which specifies the space which will be present at he ‘right’ side of the element. For ‘sticky’ positioned elements it is essential to define ‘top’ style as we did in ‘parent-3’ class.

We’ve also used ‘height’ and ‘width’ styles in ‘parent-1’ class – these styles are used to specify the height and width of an element, for instance we used ‘width: 400px’ in ‘parent-1’ class in order to restrict width of the div, which otherwise would have expanded till the end of the view-port. Similarly we set ‘height: 30px’ in order to have just enough visibility for contents within ‘parent-1’ div. Next, we inserted ‘overflow: auto’ which makes sure that in case the contents of an element are beyond its set height or width then vertical or horizontal scroll bar, as the case may be, appears automatically. So, in our case, the height of the ‘parent-1′ class has been set at ’30px’ and a child element (child-1) is half hidden due to parent’s 30px height – therefore a vertical scroll bar automatically appears on the parent element in order to facilitate scrolling through the contents within it (Note: If vertical scroll bar is not visible then increase height as 40px).

The final contents of second.html are as follows;

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style>
.mystyle {
   text-decoration: none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin:10px; background-color: white;
}
.mystyle:hover {
   color:white; background-color: blue;
}
.btn {
   color:white; text-decoration:none; padding:5px 10px 5px 10px; border-radius:5px; margin:10px;
}
.btn-green {
   background-color:green; border: 1px solid darkgreen;
}
.btn-green:hover {
   background-color:darkgreen;
}
.btn-red {
   background-color:red; border: 1px solid darkred;
}
.btn-red:hover {
   background-color:darkred;
}
.div-style {
   padding:10px; margin:20px; box-shadow: 1px 1px 8px gray; background-color: lightgray;
}
.parent-1 {
   border: 1px solid black; position: relative; left: 10px; top: 10px; overflow: auto; height: 30px; width: 400px;
}
.parent-2 {
   border: 2px solid red; position: absolute; left: 200px; top: 5px; color: white; background-color: gray; z-index:-1;
}
.parent-3 {
   border: 3px solid purple; position: sticky; margin-top: 20px; top: 20px; background-color: lightgray; padding: 5px;
}
.child-1 {
   border: 3px solid pink; position: absolute; left: 40px;
}
.child-2 {
   border: 3px solid orange; position: fixed; right: 20px; background-color: teal; color: white; padding-top: 20px; padding-bottom: 20px; z-index: 1;
}

</style>
</head>
<body>
  <div class="div-style">
    <a class="mystyle" href="http://youtube.com">YouTube</a>
    <a class="mystyle" href="http://twitter.com">Twitter</a>
    <a class="mystyle" href="http://linkedin.com">Linkedin</a>
  </div>
  <div class="div-style">
    <a class="btn btn-green" href="http://google.com">Google</a>
    <a class="btn btn-red" href="http://google.com">Google</a>
  </div>
  <div class="parent-1">
    Parent-1 (relative) div at body level.
  </div>
  <div class="parent-2">
    Parent-2 (absolute) div at body level.
  </div>
  <div class="parent-1">
    Parent-1 (relative) div at body level.
	  <div class="child-1">
		Child-1 (absolute) inside a positioned div.
	  </div>
	  <div class="child-2">
		Child-2 (fixed) inside.
	  </div>
  </div>
  <div class="parent-3">
	Parent-3 (sticky).
  </div>
  <p style="font-size:150px;">
	We have kept the font size of this paragraph at 150px so that we could scroll down the browser view and observe how 'fixed' and 'sticky' positions behave.
  </p>
</body>
</html>

Leave a Comment