Skip to main content

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS.
We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II).
You should have 2 files, one sections.html file and another sections.css file linked to it.
Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes 'display' and 'float' . 
This is the CSS code that we used to style our sections.html page.

 #header{
    background-color: grey;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
}

h2{
    margin: 0px;
    color: white;
}

#content{
    padding-left: 15px;
}

p{
    display: inline-block;
    float: left;
    margin-right: 50px;
}

form{
    display: inline-block;
    border-left: 2px solid grey;
    padding: 12px;
}

input{
    display: block;
    margin-bottom: 24px;
    width: 200px;
    padding: 8px;
}

textarea{
    display: block;
    margin-bottom: 24px;
    width: 214px;
    text-align: left;
}

button{
    width: 214px;
    padding: 8px;
}

#footer{
    background-color: grey;
    padding: 15px;
    color: white;
}

ul{
    list-style: none;
}

You should be familiar with all the attributes (margin, width, padding e.t.c) so far except float and display.
Let's begin with the display attribute.

As the name suggests, the display attribute is used to specify how an element of html should be seen (or not seen). It can take on many values but the following are the most commonly used ones;

  • none => when display is specified as none, the element will not be visible. It is completely        removed.
  • inline => when display is specified as inline, the element takes as much space (width & height) as it requires. You cannot change the width and height of an element after specifying it as inline.
  • inline-block => when display is specified as inline-block, the element takes as much space (width & height) as it requires but you can change this width and height.
  • block => when display is specified as block, the element takes the whole width and starts in a new line.
 Before we continue, you should know that different html elements have different default values for their attributes. 'by default' is a common term you will hear a lot as a software developer, which describes how something is when it's out-of-the-box (before you make any changes to it).
To understand this further, lets do some coding.

Create an html file and name it display.html. Type the following code in it using a text editor, save and open it in your browser.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="display.css">
</head>
<body>

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

    <a href="#">some text 3</a>

</body>
</html>

Note : the # in href is just a placeholder (has no meaning) and so nothing happens when the link is clicked. You can even leave it empty (as in href="").
Now create a css file and name it display.css. Type the following code in it using a text editor and save it in the same location as your display.html file.

p, a{
    border : 1px solid;
} 

The above code simply shows a black border around our paragraphs and anchor.

Notice that even though all elements have the same content length (11 including spaces),  the two paragraphs are taking the entire width of the page while the anchor is only taking the width it requires.
This is because, by default, paragraphs are block elements while anchors are inline elements.

Add the following code in your css, save and refresh your display.html page in the browser;

a{
     width : 600px;
}

You will see no change. This is because the anchor element is an inline element by default, so you cannot change it's width or height unless you first modify it's display.

Modify the css code as follows;

p, a{
    border : 1px solid;
}

a{
    display: block;
    width: 600px;
    height: 600px;
}
Now save and refresh your browser. You will see that the anchor element now takes a larger space (600px by 600px to be exact). This is because you have modified the display of the a tag to make it a block element.


Now modify the css as follows;

p, a{
    border : 1px solid;
    width: 200px;
    height: 100px;
}

a{
    display: block;
}

p{
    display: inline-block;
}

We have given the same size (width & height) to all the elements, and changed the display of the paragraph to inline-block.
Save and refresh display.html in your browser.
Notice how now the paragraphs appear next to each other.

Why is the anchor not appearing next to the paragraphs? Why is has it started on it's own line even though it has the same width as the paragraphs?
This is because the anchor's display is block. Remember a block element will start on it's own line and will not allow another element in that line even if there is space available.

Now modify the css as follows;

p, a{
    display: inline-block;
    border : 1px solid;
    width: 200px;
    height: 100px;
}


Save the changes (we have made all elements to be inline-block elements). Refresh your browser and observe how all elements appear next to each other.

The display property can be a bit tricky to get at first, so be sure to play around with your code, re-read this blog in order to grasp the concept. 

As always, I will upload a video soon that you can use to follow up, and the comment section below is available if you have any questions/feedback.

Happy coding, we'll catch up later in 4th and final part of this class, where we shall discuss the float property.








 

Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 107

Hello and welcome back to this series of tutorials for beginners in web development. So far we have a simple html page and a css file linked to it. We begin this tutorial by creating new html and css files, in the same folder as where my_site.html is located. We shall call them index.html and index.css respectively. Done? Great! Link the two files together , by opening up index.html in your text editor (e.g. Sublime Text) and typing the following code below the closing title tag  </title>  and before the closing head tag </head> :               <link rel="stylesheet" type="text/css" href="index.css"> Inside the body of your html (i.e after <body> and before </body>),  type the following html code :              <p> This is a paragraph </p>          ...
Post a Comment
Read more

HTML BASICS : CLASS 109 part I

Hello and welcome back to this tutorial series for beginners in web development. This class introduces the html 'div' tag and form elements. Let's begin by learning about the html 'div' tag. " div " stands for division . It allows you to group and separate content into different sections . Consider the image below. The image above shows a common layout (way of arranging elements)  for many web pages. It consists of;  a top area called the header, where most sites place a logo and site name as well as navigation links (links to other parts of the website)  a bottom area called the footer, where most sites place contact information and social media links. a side bar, which can be on the right side or left side. Some sites have two side bars, one on each side. and a main content area, where the main content of the page is displayed. For example. This blog site has a header at the top. It contains the name of the site 'In Relatable Te...
Post a Comment
Read more

HTML BASICS : CLASS 103

Hello and welcome to the third in a series of beginner level classes for web developers. In the previous lesson (see here ), we learned about the paragraph and list tags. At this point the code in your my_site.html file should look like this: <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h2>NASA | JPL</h2>     <h1>ON A MISSION</h1>     <h4>PODCAST</h4>     <p>A new podcast from NASA</p>     <ul>         <li>Arrival</li>         <li>We Are the World</li>         <li>Worlds of Wonder</li>     </ul>      <ol>         <li>NASA is cool...
Post a Comment
Read more