HTML 5 TutorialsMaking WebPages(Part 2)-Styling Webpages using CSS

Making WebPages(Part 2)-Styling Webpages using CSS

We are back today. We had completed some part of our practical assignment of making webpages. We had started with homepage containing some data, menu and some un-ordered lists having links to different pages.
Our final homepage is like this:

final_homepage
fig 1

We have already completed showing its content, its background image and some styling using CSS file as shown below in 2 figures.

last_progress_output_1
fig 2

last_progress_output_2
fig 3

Last time, we had divided our html code into some blocks using div tags and span tags, so that we could style it properly and in an organized way. We have used “id” and “class” in div tags and span tags to identify as to which block we are styling and what style should be applied to which block/blocks.
Today we are going to apply further styling and learn some more new things.
So let’s proceed.

Remember one thing, we have separated the blocks using div and span tags in .html file. But we are going to write the code for applying styles to the .html file in .css file, in our case “style.css” file. The link tag in head section of the .html file have linked both the files, so all changes in “style.css” file are reflected in “homepage.html” file.

  • Wildcard Selector:
    • Let’s start with the style.css file. This was the file which we had created in the CSS folder of our “Making Webpages” folder.
    • The code in the file was as shown below:
    • previous_css_file
      fig 4

    • Now, just have a look on the style.css file below:
    • wildcard_selector_code
      fig 5

    • Did you notice the change in the file?
    • Yes, you have some code before body, it is as follows:
    • *{
      	margin:0 auto 0 auto;
      	text-align:left;
       }
      
    • This code tells us that, you will have a margin for homepage with 0 pixels at top and bottom and auto on right and left.
    • I imagine you know the syntax for margin. It is like this,
      margin:top right bottom left; having values in pixels.
    • Now, what is “auto”?
    • “auto” indicates that whatever content you have on your webpage will be brought up in the centre.
    • In the above code, top and bottom margin is 0 pixels, so there is no space left at top and at bottom. Right and left margin is “auto”, so the content will be left aligned as specified in the code itself, but it will always come at the centre. I mean, if you try to shrink your webpage from left side or from right side, the content will not at all hide, it will just fit itself in the centre.
    • All this code is written in the block as follows:
    • *{
      		Content code
       }
      
    • Here, asterisk (*) indicates “everything” in the webpage.
    • This is the reason why, the “margin” and the “text-align” selectors in above code will be applied to the whole (content of) webpage.
    • Code written in this manner is called “Wildcard Selector” that must be applied to each and every element of webpage.
    • We understood “Wildcard Selector”; now let’s start styling the blocks separated by div tag and span tag.

  • Styling “container” block:
    • Last time we had separated a main div tag that contained all other div tags inside it, and had its “id” as “container”.
    • The code for it in “homepage.html“ file was as shown below:
    • <body> 
           <div id=”container”>
                 -
                 -         <!—code in between-->
                 -
           </div> <!—container end-->
      </body>
      
    • Now we will style this div tag using its id, “container”.
      The code file “style.css” is shown below:
    • styling_container_block_code
      fig 6

    • Here, the code
      #container
      {
      	width:960px;
      }

      is written for div tag having id as “container”.

    • In a .css file every id starts with a hash sign (#) followed by its name and curly braces containing styling code.
    • In the above code, “container” is an “id”, so the width:960px; will be applied to the content of the whole “container” block.
    • Here, width:960px; means, the width of the content visible on the webpage will be 960 pixels as shown below.
    • styling_container_block_output
      fig 7

    • You can compare it with the content of fig 3.
  • Styling “header” block:
    • The content of “header” block is shown in the code below:
    • <div id="header">
           <h1><span class="blue-text">Blue</span> Developer Directory</h1>
           <h2>Find A Developer <span class="white-text">NOW</span></h2>
      </div> <!--header end-->
    • Now let’s apply some width and height to the header block using .css file as shown below.
    • header_block_styling_code
      fig 8

    • Code is:
    • #header
      {
      	width:960px;
      	height:85px;
      }
    • Here, we have given a width of 960 pixels and height of 85 pixels to the header block.
    • Next we have some styling for h1 tag, for instance, its fore-color, font-size, padding etc.
    • So let’s do it.
  • Styling h1 tag inside “header” block:
    • The code is shown highlighted in the following figure:
    • styling_header_block_h1_tag_code
      fig 9

    • In the above figure you can see the highlighted code, it is given below:
    • #header h1
      {
      	float:left;
      	color:#ffffff;
      	font-size:43px;
      	padding:20px 0 0 20px;
      }
    • Here, “#header h1” indicates that you are specifying the styling code only for the h1 tag that is placed inside the “header” block. If you write just “h1” as we used to do before,
      eg:

       h1 { color:#ffffff; }

      it will apply white color to all the h1 tags in the webpage as illustrated in the example.

    • Hence, from the highlighted code above, The heading ”Blue Developer Directory” will get aligned at left with fore color as white color and font size of 43 pixels. It will have padding of 20 pixels at top and left side and 0 pixels at bottom and right side.
    • The output is shown as follows:
    • styling_header_block_h1_tag_output
      fig 10

    • Now it’s time for styling h2 tag in header block separately.
  • Styling h2 inside “header” block:
    • The code for h2 is shown highlighted in the figure below:
    • styling_header_block_h2_tag_code
      fig 11

    • The highlighted code is as follows:
    • #header h2
      {
      	float:right;
      	color:#67A0F5;
      	padding:40px 20px 0 0;
      }
    • Here, you can see that h2 tag inside the “header” block is styled with light blue fore-color and aligned to right side (float:right;) and having padding on top with 40 pixels and at right side with 20 pixels. No padding at bottom and left.
    • In the code above, padding is written in a single line. Instead of that you can write it in another way also as,
    • padding-top:40px;
      padding-right:20px;
      padding-bottom:0;
      padding-left:0;
    • The output is shown below:
    • styling_header_block_h2_tag_output
      fig 12

    • Now, we know that the word “Blue” in “Blue Developer Directory” is displayed in blue colour.
  • Styling class “blue-text” in span in header block:
    • You can view the code of .html file where class is defined in span tag under the heading “Styling header block” above.
    • Here, our aim is to make the “Blue” word in “Blue Developer Directory”, blue in colour.
    • For that see the following highlighted code:
    • styling_blue_text_class_code
      fig 13

    • highlighted code is shown below:
    • #header h1 span.blue-text
      {
      	color:#67A0F5;
      }
    • Here, we know that “blue-text” is a class, not id.
    • Hence, in the statement: – #header h1 span.blue-text
      • #header: – indicates that the styling is inside the id, “header”.
      • #header h1: – indicates that the class to be styled is inside the h1 tag which is in turn in the “header” block.
      • #header h1 span.blue-text: – indicates that, the blue-text class is the attribute of span tag. Since “blue-text” is a class, it should be preceded with a period (.); so we have span.blue-text.
    • The output of the above highlighted code is as follows:
    • styling_blue_text_class_output
      fig 14

  • Styling class “white-text” in span in header block:
    • This is same as above concept of class. The only difference here is that, “white-text” class is in h2 tag in span tag and instead of blue, we require white colour.
    • The code is given below:
    • #header h2 span.white-text
      {
      	color:#ffffff;
      }
    • You will get the output as follows:
    • styling_white_text_class_output
      fig 15

  • Styling “menu” block:
    • Just have a look at the bright blue colour strip, in fig 2 above. It contains some menu-items placed in an un-ordered list.
    • The menu-items are placed vertically, so we need to make its orientation horizontal and style it in such a way that it looks like the menu bar shown in fig 1 above.
    • Code for styling the div tag having id as “menu” is shown below:
    • #menu
      {
      	display:block;
      	float:left;
      	clear:both;
      	width:960px;
      	height:54px;
      }
    • Here, “menu” is an id of the div block so it is preceded by a hash symbol (#).
    • In the above code we are only dealing with the bright blue strip. It doesn’t affect its content in any way.
    • In this code, we have fixed the strip with the width of 960 pixels and a height of 54 pixels.
    • It is presented as a separate block in the statement “display:block”.
    • It origins from the left side of the webpage as specified in the statement “float:left”.
    • The statement “clear:both”, clears the float statement assigned to h1 and h2 tags for the “menu” block. I mean, for h1 tag in “header” block we have a selector “float” with value “left” and in h2 tag of “header” block, we have value “right” for the “float” selector. Both these values will not be automatically applied to “menu” block, because we have cleared both the values through statement “clear:both”. So whatever we have applied for “menu” block, only that will be reflected.
    • This was only for the “menu” block. Now let’s do some styling with its content.
  • Styling un-ordered list of “menu” block:
    • We know that the menu-items are in an un-ordered list shown vertically.
    • So let’s do some styling for it. The code is shown as follows:
    • #menu ul
      {
      	list-style:none;
      	padding:0;
      	margin-left:auto;
      	width:960px;
      }
    • In the above code, the statement “#menu ul” indicates that ul tag is inside the block having id “menu”. This will insure that the styling done will be applied only to the un-ordered list in the “menu” block.
    • The un-ordered list will occupy the width of 960 pixels and will have padding of 0 pixels.
    • The un-ordered list has the left margin as “auto” in the statement “margin-left:auto”, this means that the menu-items will automatically make its space in the middle.
    • The statement “list-style:none” removes the points/bullets preceding every menu-item.
    • Here is the output shown:
    • output_for_ul_in_menu_block
      fig 16

    • The output shows that the menu-items has no more bullets preceding them and has shifted to the left.
  • Styling every li tag of ul tag of “menu” block:
    • Now, we need to style every individual list item/menu-item to make it inline and be placed next to each other horizontally.
    • For this the code is shown below:
    • #menu li
      {
      	list-style:none;
      	padding:0;
      	display:inline;
      }
    • Since we are applying style to li tag in “menu” block, hence the statement “#menu li”.
    • Here, the list-style is “none”, hence no bullets for list-items and padding is 0 pixels i.e. no space left above and below the list-item.
    • The statement “display:inline” indicates that every list-item be an inline element,i.e. it can be placed on a single horizontal line just as shown in fig 1.
    • The output is shown below:
    • output_for_li_in_menu_block
      fig 17

  • Styling every a tag in li tag inside “menu” block:
    • We have changed the orientation of our menu bar from vertical to horizontal successfully.
    • But the menu-items are not clearly visible, so we need to change its fore-color, remove its underlines and style it as we require.
    • The menu-items are nothing but the hyperlinks, so we will have to style the a tag in the li tag.Let’s see the code below:
    • #menu li a
      {
      	float:left;
      	color:#ffffff;
      	text-decoration:none;
      	text-align:center;
      	font-size:15px;
      	padding:15px 20px 15px 20px;
      }
    • The statement “#menu li a” indicates that we are now going to apply style to the anchor tag (a tag) in the li tag inside “menu” block.
    • The statement “float:left”; allows the menus to start from left side of the webpge.
    • Color:#ffffff; gives white fore-color to all the links in li tags.
    • The statement “text-decoration:none” removes the underlines of all the links.
    • Font size is made 15 pixels through the statement “font-size:15px”.
    • Text is aligned at the centre through the statement “text-align:center”.
    • The statement “padding:15px 20px 15px 20px;” allows to leave space of 15px from top and bottom of the menu-items and 20px from right and left of each menu-item respectively.
    • Thus we completed styling our header and the menu bar.
    • The output is shown below.
    • output_for_a_in_li_in_menu_block
      fig 18

    • We will proceed further in next chapter. Till then study it thoroughly.

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 -