HTML 5 TutorialsMaking Webpages (Part-3)Styling using CSS

Making Webpages (Part-3)Styling using CSS

We have completed styling the horizontal menu bar of the webpage “homepage.html”. In this session we will style the remaining part of the webpage.
Let’s start.
Our final output should look like this:

final_homepage
fig 1

Making Webpages (Part – 2) output is shown below:

output_for_a_in_li_in_menu_block
fig 2

  • We were working on the anchor(a) tag in the div tag having “id” as “menu”.
  • The code we were working on last time was :
  • #menu li a
    {
    	float:left;
    	color:#ffffff;
    	text-decoration:none;
    	text-align:center;
    	font-size:15px;
    	padding:15px 20px 15px 20px;
    }
    
  • Explanation of this code has been done in last session.
  • Due to this code our menu-items are center aligned,have originated from left side of the blue strip,they are white in fore-colour,proper size is given and padding is also given.
  • Only thing is they are not bold, so let’s make them bold.
  • Code is shown below:
  • #menu li a
    {
    	float:left;
    	color:#ffffff;
    	text-decoration:none;
    	text-align:center;
    	font-size:15px;
    	font-weight:bold;
    	padding:15px 20px 15px 20px;
    }
    
  • Here, font-weigth:bold; has been added to the code which will make the menu-items look bold.
  • Styling div tag having “id” as “leftmenu”:
    • Now we will apply step by step styling to the leftmenu in our “style.css file”.
    • Look at the code below:
    • #leftmenu{
      	margin-top:25px;
      	width:190px;
      	float:left;
      	background:#1C478E;
      	border-radius:10px;
      	padding:15px 20px 10px 10px;
      }
      
    • Let’s understand the code:
    • Here,margin-top:15px; will leave 15px margin from top of the leftmenu.
    • width:190px;this selector will provide the leftmenu with the width of 190 pixels.
    • When we apply the above 2 selectors, your leftmenu will try to move to the right-most side of the page. To bring it back to the left side of the page, we need to use selector float:left;.
    • background:#1C478E;gives a blue shaded background colour to the leftmenu.
    • padding:15px 20px 10px 10px; leaves space from top right bottom and left respectively.

    • You can see that, the square of blue shade has been formed around the leftmenu. It’s vertices are pointed as shown in figure below.
    • leftmenu_square_vertives
      fig 3

    • If we want to make all its vertices rounded, we will have to use the selector border-radius:10px;
    • The output of this whole code would be seen like this:
    • leftmenu_rounded_vertices_output
      fig 4

    • If it would had not been for CSS, to get the rounded corner effect we would had to use the background images. But now because of CSS it has become possible very easily.
  • Styling ul tag of leftmenu:
    • After styling main leftmenu div tag, now we will style the ul tag inside leftmenu block.
    • The code is shown below:
    • #leftmenu ul
      {
           list-style:none;
           padding:0;
      }
    • Here, due to list-style:none; the bullets given to each list-item are removed as shown in fig 5.
    • The output is shown below:
    • leftmenu_ul_styling_output
      fig 5

  • Styling h3 tag in leftmenu block:
    • Now, let’s do some styling to the heading of leftmenu i.e.“Links.”
    • The code is as follows:
    • #leftmenu h3
      {
      	color:#ffffff;
      	padding-bottom:8px;
      	border-bottom:#fff solid  2px;
      	font-size:16px;
      }
      
    • Here, color:#ffffff; gives white colour to the heading “Links”.
    • padding-bottom:8px; leaves space of 8 pixels at the bottom of “Links”.
    • Below “Links” you have a solid border, this is achieved by boder-bottom:#fff solid 2px; here, #fff gives white colour to the border, then solid is the style of the border and 2px is the width given to the border.
    • Size of the heading “Links” is increased by the selector font-size as font-size:16px;
    • The output is shown below:
    • leftmenu_h3_tag_styling_output
      fig 6

  • Styling li tag of ul tag in leftmenu block:
    • Here, we want the leftmenu items to be visible and be separated by dashed lines. So the code to achieve this styling, is as follows:
    • #leftmenu li
      {
      	list-style:none;
      	padding: 15px 0 8px 0;
      	border-bottom:1px dashed #fff;
      }
      
    • This code is to style every list-item of the un-ordered list of leftmenu block.
    • List-style is kept none.
    • Each list-item has a padding of 15 pixels from the top, 8 pixels from the bottom and 0 pixels at the right and the left side.
    • The border under each list-item is achieved by the “border-bottom” selector coded as border-bottom:1px dashed #fff; 1px being the width of the border, dashed being its style and #fff being its white colour.
    • The output is shown below:
    • leftmenu_li_tag_styling_output
      fig 7

  • Styling anchor(a) tag in the li tag in leftmenu block:
    • We can’t see the leftmenu list-items properly, so to make them visible and to remove their underlines we need to do some styling. Here’s the code:
    • #leftmenu a
      {
      	color:#ffffff;
      	text-decoration:none;
      	font-weight:bold;
      	font-size:14px;
      }
      
    • In this code, each list-item which is probably a hyperlink is given white fore-color due to the selector color coded as color:#ffffff;
    • The underlines of the hyperlinks are removed by text-decoration:none;
    • Every list-item is made bold by font-weight:bold;
    • And size is increased by font-size:14px; giving it size of 14 pixels.
    • The output of the code is shown below:
    • leftmenu_a_tag_styling_output
      fig 8

    • Let’s learn an interesting concept in CSS.
    • We know that on any website; if we click on a hyperlink, it’s fore-colour changes indicating that the link has been visited.
    • If we don’t want the colour of any link to be changed, we have a solution for it in CSS.
    • We just have to add a line in the above code.
    • #leftmenu a,#leftmenu a:visited
      {
      	color:#ffffff;
      	text-decoration:none;
      	font-weight:bold;
      	font-size:14px;
      }
      
    • You just have to add the text shown after comma in the above code.
    • The line is actually “ #leftmenu a,#leftmenu a:visited”.
    • Here, the first “#leftmenu a” determines the tags to which the code written in the curly braces is to be applied.
    • The second “#leftmenu a:visited” indicates that the code written inside the curly braces will be applied to the visited links also. That means, when the fore-colour of the visited link changes, this code will change it to as it was when unvisited.
    • One more interesting concept of CSS.
    • When we know that we have to apply same styling to two different blocks, we write the same code for both the blocks separately.
    • But what if we write the code only once, that too for both the blocks.
    • Observe the example code below.
    • #leftmenu a,#menu a
      {
      	color:#ffffff;
      	text-decoration:none;
      	font-weight:bold;
      	font-size:14px;
      }
      
    • Here, if there is such a situation that you have same styling for different id’s viz.the “leftmenu” as well as the “menu”, you can use both the id’s separated by comma having the code in common.
    • Now we will continue styling our further content.

  • Styling div block having “id” as “content”:
    • We finished completely with the menu and leftmenu. Now we move to the div with id “content”.
    • First we will see the code and then understand it.
    • The code is as follows:
    • #content
      {
      	display:block;
      	width:600px;
      	margin-top:24px;
      	float:left;
      	background:#ffffff;
      	border-radius:10px;
      	border:6px solid #1C478E;
      	padding:15px;
      	margin-left:15px;
      }
      
      
    • Let’s have a look on the code.
    • Remember that we have given “content” as id for 2 div blocks, so all this styling will be applied to both the blocks.
    • The selector display:block; is used so that, both the white coloured content blocks should start on a new line one below the other as shown in fig 1.
    • The content blocks has a width of 600 pixels due to the code width:600px;.
    • margin-top:24px; leaves a distance of 24 pixels between the horizontal menubar and the content block.
    • float:left; keeps the content blocks left aligned.
    • background:#ffffff; gives them their white background colour.
    • border-radius:10px; makes the corners of the content blocks rounded with radius 10 pixels.
    • border:6px solid #1C478E; gives a blue shaded solid style border of width 6 pixels, which is seen surrounding the white coloured content blocks.Here, 6px being the width of the border, solid being its style and #1C478E being the blue shaded colour of the border.
    • padding:15px; this leaves 15px space from all inner sides of the content blocks, between the actual content and the border of the blocks.
    • margin-left:15px; this will keep a distance of 15 pixels between the leftmenu and the content blocks.
    • Remember padding means leaving space from inner side of the block and margin means leaving space from the outer side.
    • The output is shown below:
    • content_div_styling_output
      fig 9

  • Styling h3 tags:
    • We have more than one h3 tags to be styled similarly, so we will apply styling code common for all h3.
    • It is a good practice to write all the code commonly applied in one place. So write it below the body in “style.css” file.
    • The code is as follows:
    • h3
      {
      	font-size:16px;
      	font-weight:bold;
      	padding:10px 0;
      	color:#054dbc;
      }
      
    • Here, font-size:16px; increases the size of the heading text.
    • font-weight:bold; makes it bold.
    • padding:10px 0; applies padding of 10 pixels on top and bottom and no padding on right and left.
    • Blue coloured shade is applied to the heading text due to the code color:#054dbc;.
    • Output is shown below:
    • styling_h3_tags_commonly
      fig 10

    • In the above figure, the h3 headings tags “Who Are We?” and “What Skills Do Our Developers Have?” are shown with styling.

    On having a look at fig 1, we come to know that the image in the content block is aligned to the right side. So we have to shift the image to the right side. Let’s do it, but before that just see this code from “homepage.html” file.

    <div id="content">
    <h2>Welcome to Blue Developer Directory!</h2>
    <img class="float" src="images/web.jpg" alt="web  developer directory!">
          -
          -	         <!--some code here-->
    </div> <!--content1 end--> 
    
    • This code is of the first content div tag.
    • In this, we have the image tag containing our image of “web developer directory!”.
    • Here, you can see that the image tag has an attribute class having value “float” i.e. class=”float”.
    • We are going to apply styling to this “float” class which will be in turn applied to the image.
    • So let’s do it. Write the following code in “style.css” file.
    • .float
      {
      	float:right;
      	margin:15px;
      }
      
    • This code is to shift the image in first content block to the right side.
    • We know that float is declared as class in “homepage.html” file. So in “style.css” it is preceeded by a period (.float), since classes in CSS are always preceeded by a period.
    • Inside the code block, float:right; shifts the image to the right side.
    • margin:15px; keeps the text away from the image by 15 pixels.
    • The output is shown as follows:
    • shifting_image_to_right_by_float_class_styling
      fig 11

  • Styling second content block having class as “developer”:
    • Observe fig 1.In the second content block you will see 4 latest blue developers details. These 4 details are in separate div block each with an attribute class=”developer”. These details are arranged horizontally.
    • We want to make our page look like as shown in fig 1.
    • For that we need to style the class developer step by step, so that the styling will be applied to all the div blocks containing class “developer”.
    • So write the following code in “style.css” file.
    • .developer
      {
              padding:15px;
      	width:120px;
      	float:right;
      }
      
    • Here,width:120px; gives a width of 120 pixels to each developer details.
    • float:right; helps in arranging all the records horizontally.
    • padding:15px; is required to make the records start arranging from left side.(it depends on the browser).
    • The output is shown below:
    • styling_second_content_blocks_developer_class
      fig 12

  • Styling h2 tag:
    • There is one h2 tag in first content block i.e. the heading “Welcome to Blue Developer Directory!” and one in second content block i.e. “Latest Blue Developers”.
    • We can apply common styling to both, hence write the code.
    • h2
      {
      	padding-bottom:10px;
      }
      
    • Here a padding of 10 pixels is provided at the bottom of the headings.
    • The output is shown below:
    • styling_second_content_blocks_developer_class_h2_tag
      fig 13

  • Styling h4 tag:
    • The 4 latest developers names are in h4 tag. Let’s style them with the following code.
    • h4
      {
      	font-size:15px;
      	font-weight:bold;
      	padding-bottom:7px;
      	color:054dbc;
      }
      
    • Here, the text size is made 15px due to the code font-size:15px;
    • Letters are made bold by font-weight:bold;
    • A 7 pixels space is left at the bottom of each developer name by padding-bottom:7px;
    • A blue shaded fore-color is given to the names by color:054dbc;
    • The output is shown below:
    • styling_h4_tags_commonly
      fig 14

  • Styling ul tag in the div tag having class=developer:
    • Now, we need to style the ul tags inside the div tags having class “developer” so that all it’s bullets are removed and the data is aligned properly.
    • The code for it is given below:
    • .developer ul
      {
      	margin-bottom:10px;
      	list-style:none;
      	padding:0;
      }
      
    • Here, .developer ul indicated that “developer” is a class, since it is preceeded by a period and ul tag is inside the developer class.
    • list-style:none; removes the bullets of the list-items.
    • padding:0; aligns the list content properly.
    • The output is shown below:
    • styling_ul_tag_in_developer_class
      fig 15

  • Styling li tag in ul tag in developer class:
    • Now we will style the list-items of the un-ordered list as they are very close to each other.
    • The code is as follows:
    • .developer li
      {
      	list-style:none;
      	line-height:0.5cm;
      }
      
    • Here, again .developer li indicates that li tag is inside the developer class.
    • list-style:none; removes all styles from the list.
    • line-height:0.5cm; keeps all the list-items at a proper distance of 0.5cm from each other.
    • The output is shown below:
    • styling_li_tag_in_developer_class
      fig 16

    • Thus we completed styling our “homepage.html” file.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -