We have learned the basics of HTML and how to change the appearance of our HTML elements with CSS, but we have not been able to tell the web browser where and how to place our HTML elements on the web page. In this lesson, we will further learn how to take control over our web pages. We will learn about divs and the CSS Box Model.

Outcomes for this lesson

  • Learn about divs
  • CSS: The Box Model
  • The Display Property
  • File Transfer Protocol

 

Lesson Preparation

Before we get started coding, let’s setup for the exercise. Create a new folder on your computer. We will be saving our work for the lesson here. *Note* You will want to keep these files for when you do your HW. Open your text editor and create a new HTML document with the following code:

Save this HTML document as index.html. Open and create a blank CSS stylesheet (blank text document). Save it as style.css. Make sure both of these files are in the same folder!

Divs

Sometimes there is not a clear way of selecting HTML elements on a web page for a CSS style rule. Right now, we have classes and ids in our web development arsenal. What if we wanted to put a blue background behind the h1 and first 2 p elements and change their text color to be white? How would we go about solving this? Well, the first thing that comes to mind is using classes. We could:
We could then select the class “blue”, add in our CSS declarations (property: value pairs) and be done. This does work, but it isn’t manageable. Another, more manageable, way we could do this is by using divs.

The div tag:


<div></div>

Divs are generic containers for HTML elements/content. We can use divs to group elements for CSS styling. We can give our div a class or id and then select the class or id in our CSS style rule. Let’s see this is action:

First, open in your web browser. Take a look.

Open index.html and surround the h1 element and the first two paragraph with div tags:

Now, give this div an id with the value “div-target”:

Save and refresh index.html in your web browser (open it if you haven’t). Nothing visually should have changed. That’s because divs don’t visually change anything on a page (unless we use CSS). In essence, divs don’t represent anything. They are just a container. Let’s get back to the problem and change the background and text colors.

Open up style.css. Let’s begin creating a new style rule. Select the div by id. Then create a declaration that changes the background property to the value #3498db. Create another declaration that changes the color property to the value #ecf0f1. Your CSS style rule should look like:

Save and refresh your HTML page in your browser (CTRL + R Windows, CMD + R Mac). All of the elements’ text colors inside of the div should have changed to a white color and there should be a blue background. Nice! You may ask why I did this. Other than to demonstrate the div tag to you, in this situation, the div tag was more manageable to use. What if we wanted more elements to also have the blue background with white text? Let’s say I wanted the third paragraph in our HTML document to also have this styling. In our first instance where I was only using classes, I could give that new element (the third p element) a class. That would work, but by using this method, we can quickly overuse classes in our HTML document. Using our latest example with divs, all I need to do is place any additional elements inside of the div. Try it. Cut and paste the third paragraph element inside the div element, save, and refresh the web page. The third paragraph’s styling should have changed. Ultimately, how you organize your HTML and style your web page is up to you. Every situation is different and calls for a different solution. Sometimes using just classes will be better and others you will want to use a div. **I will mention this:** Divs aren’t always the most semantic (meaningful) solution/ element to use. Beginning web designers often start to overuse divs in their HTML, which is called “divitis”. Get it? It’s named like a medical condition! Hahaha……. well at least I found it funny. On a more serious note, use divs only when necessary. If there is a more semantic (meaningful) way to select elements for styling, don’t use divs.

CSS Box Model

So far, we have been able to change the appearance of our HTML elements with CSS. We have changed background colors, text color, and more. For basic CSS styling this is fine, but to delve deeper and learn more, we need to learn how the browser (and we) should view HTML elements.

Let’s get Rectangular

In HTML, every element is displayed as a rectangle. The CSS Box Model is how we conceptualize an HTML element as a whole. This image visualizes the CSS Box Model: box-model Let’s see how this works. Open up the same index.html file we have been using. After the third paragraph, add a new paragraph with an id of “p-target”. Add whatever text you want between the opening and closing p tags. Your code should look like:

Save and refresh the page in your browser (Open it if you haven’t already). You should see a new paragraph element. Open up style.css. Under your existing CSS rules, create a new CSS rule. Select the p element by id. Add a declaration that changes the background property to #9b59b6. Add another declaration that changes the text color to #ecf0f1. So far, you CSS rule should look like:

Save and refresh your web page. The paragraph you added should have a purple background and white text. Notice how the purple stretches across the browser window. This is what we call the **content area** (the area for your content).

Padding

Things feel a little stuffy in here. There isn’t much space around the text of the p element. Let’s add some space for it. In stlye.css under the same style rule we just used, add a declaration of:

padding-left: 25px;

Your style rule should look like:

Save and refresh your web page in the browser. The text (content) should have moved over 25px. The spacing around content (what we just changed) is called **padding**. We use padding to create space for the content within the HTML element. We can change the padding on the left, right, top, and bottom. For example, to change the bottom padding, we would use:

padding-bottom: 25px;

Using this syntax/form, if we wanted to change all four sides of padding on an element at the same time, we would have to make 4 separate declarations. But there is an easier way!

padding-top: 25px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 5px;

Is equivalent to:

padding: 25px 10px 15px 5px;

Change your padding property to this. Using this syntax is easier. All you have to remember is that (from left to right) the values are top, right, bottom, left. I like to think of it as going around the box model of an HTML element clockwise.

Border

HTML elements have a border. In the CSS Box Model image, the border area width is big, but just remember that it is the border of an element. In the same CSS style rule from before, add a declaration of:

border: 3px solid #2ecc71;

Your code should look like:

Save and refresh your web page in the browser. You should have a tiny green border around your p element. Following the syntax (left to right), the first value is the border-width, then the border-style, and the border-color. We use the border property to create borders.

Margin

Margins are the area around an element (outside of the border). The margin property follows the same syntax as padding; four values, read left to right, representing the element’s box model clockwise. Let’s see it in action. In the same CSS rule, add the following declaration:

margin: 50px 10px 40px 20px;

Your code should look like:

Save and refresh your web page in your browser. Your p element should have moved down 30px and to the right 30px. This is what we call the **margin area**. With margins, we can control how much space we want around HTML elements. You may have noticed the paragraph element moved away (down) from the one above it. That’s because we made the top margin bigger and created more margin area above the p element.

The Display Property

Each HTML element has a preset display value. The two most common display values are block and inline.

Add two unordered lists, each with three list items, under your last paragraph element in your index.html file. Give the second ul element an id of “inline-list”. I’ve added a elements between each of my list items. Your code should look like:

Save and refresh your web page in your browser. You should see two new lists under your paragraphs. Notice how the each list item starts on a new line.

Display: Block

Block elements start on a new line, take up the full width of their container (in our case, the whole browser window), and end with a new line. Li elements by default display as block elements. As you can see, the first list’s items each start on a new line. If you want to change an elements display property, the CSS declaration would look like:

display: block;

 

Display: Inline

Inline elements do not disrupt the flow of elements on a web page. They only take up the width they need and do not start on new lines. Good examples of inline elements are span and a tags, as well as images. Let’s see what an inline element looks like in action. In style.css, under all your previous style rules, begin to create a new CSS style rule. In this style rule, we want to make the list items in the second list display as inline. To do this, select the second ul element by the id of “inline-list”. Now, we don’t want to make the unordered list display as inline. We want the list items inside the ul with an id of “inline-list” to be displayed as inline, so we use a selector of: “#inline-list li” Then, add a declaration of:

display: inline;

Your CSS style rule should look like:

Save and refresh your web page in your browser. The second list’s items should have moved onto one line and dropped the bullet points. These li items are now being displayed as inline (not starting on a new line and taking up full width of their parent container).

A Note on CSS Box Model and Layout

The CSS Box Model and other layout properties are difficult to grasp at first. In this lesson, I haven’t gone over how to control the layout (flow of elements) in our web pages. I **HIGHLY** recommend you check out the following website: Learn Layout

I strongly suggest you check out and go through these few pages. The authors of this site have done a phenomenal job on explaining this difficult concept to learn.

File Transfer Protocol (FTP)

FTP or File Transfer Protocol is a network protocol that allows files to be transfered between two computers over the internet (and other networks).

With FTP, you can upload website files onto a web server and edit them.

To use FTP to upload and edit website files, you will need an FTP client (a program you install on your computer). Below is a list of free FTP clients:

Windows

  • Cyberduck
  • Winscp (no instructions listed here, but the process is very similar to Cyberduck)

Mac

  • Cyberduck (what is installed on the Mac computers in lab)

There are other FTP clients out there, namely Filezilla, the ones listed are just a few.

Different modes of FTP

File Transfer Protocol has multpile protocol modes. An example analogy would be visiting a website online via http (not secure) vs visiting a website in https (secure, usually with a lock icon near the address bar).

One mode, SFTP or SSH File Transfer Protocol allows for secure access to the other computer you are connecting to (in this case a web server).

When we connect to our personal UCSC website space (web server), we will be using SFTP.

Connecting to a Web Server

Since we haven’t purchased web hosting and a domain name yet, we are going to use our people.ucsc.edu pages as an example. This will also be the place where you will upload your homework files (so make sure to read this!).

UCSC provides everyone (student/faculty/staff) website space where they can place personal webpages. Since we are only writing our web pages in HTML and CSS, we can use this free service. More information can be found here

Before you make a connection to a web server, you will need credential information to login, such as the username, password, and the address of the web server. Simply, you will need:

  • Hostname
  • Port number
  • Username
  • Password

To connect to your personal UCSC website space, you will need the following information:

  • Hostname: sftp.ic.ucsc.edu
  • Port number: 22
  • Username: CruzID (your UCSC ecommons username or the portion of your UCSC email before the @)
  • Password: CruzID Blue password

With this information let’s get started.

Connecting with Cyberduck

Open up Cyberduck. You will be met with an application that looks somewhat like this (slightly different on Windows).

cyberduck_1

Hit Open Connection. The connection credential menu should appear.

cyberduck_2

Fill in the necessary information. Make sure the protocol is set as SFTP. Fill in the rest of the credentials, which are listed above (server is hostname, port, username, and password).

Once your details are filled in, hit Connect.

A fingerprint popup may appear. If so, hit allow.

cyberduck_3

Once your connection to UCSC’s server authenticates, you should see a list of folders and files. Only one folder in your UCSC storage space can be used to place website files in for people to view. This is the public_html file.

cyberduck_4

Navigate to the public html folder. Files placed in here will be viewable to the public (if they are website files). Navigate inside the public html folder. You may or may not have files already located in this folder depending on if you have used it before.

Here, I have an HTML file named index.html. The general web convention is that an HTML file named index.html will be the web page a web server first looks for to serve to the website visitor. Also in this folder, I have a CSS file that is styling index.html.

cyberduck_5

cyberduck_6

When a visitor visits people.ucsc.edu/~[ucsc id], they will be sent to the public_html folder and the web server looks for an HTML file to serve up. In this case, it’s my index.html file.

Adding subdirectories

We can put other folders inside of our public_html folder to better organize our virtual website storage. For example, I put a folder named webdesignlab inside my public html folder. We would call webdesignlab a subdirectory.

cyberduck_8

We can also send visitors to this new subdirectory. To reach the webdesignlab folder, the URL would be **people.ucsc.edu/~[cruzid]/webdesignlab.

Inside webdesignlab we can put other website files.

To create a new folder in Cyberduck, right click where you want the folder to be and hit New Folder and name it whatever you want. It’s very similar to the process you would go through on your own computer.

Editing files

You can edit files located on your web server from Cyberduck. Right click on the file you want to edit, hover over Edit With and select the editor (text editor in this case) that you want to use. When you save your changes, they will be uploaded to the web server.

Practice with File Paths


Homework Assignment

Part 1

Login to your Codecademy account and go to the HTML/CSS section. Complete the following sections:

CSS Positioning
HW_img3

You do not need to complete the small project right after. It is good practice though!

 

Just as a reminder, to find your Codecademy profile URL, while logged into your Codecademy account, navigate to Me in the top right corner. Click Me and it will show a dropdown menu. Click “View my profile”.

HW_Img_4

Now you are on your profile page. The link needed will be in your URL bar (this is a link that brings the viewer to your profile where they can see the badges you have earned).

HW_Img_5

Copy and paste this link into the body of your submission email.

Part 2

Create a new folder on your computer.

Create a new HTML document with the following code:

Save this as index.html inside the new folder you just created. Open this index.html in your web browser and take a look. Create a new CSS document. Save it as “style.css” inside the new folder you just created. You should have both your index.html and style.css files in this folder. At the top of your style.css file, we need to put a comment at the top with your name. Comments do not affect our CSS, they just provide us a way to make notes in our files. To do this, type the following:

/* YourFirstName YourLastName */

Whatever text goes between / and / will become a comment. Make sure to change the text to your first and last name. With your new style.css, use CSS to do the following: Each numbered section will need a new CSS style rule to be created. Make sure to have index.html open in your web browser while doing this. After each change you make in your stylesheet, you can save and refresh the web page to see if the changes you made worked.

1. Let’s start off by giving the whole page a default background and make all text have the font family of Arial. Select the body tag:

  • Change the background to #ecf0f1.
  • Change the font family to Arial.

2. Look at the code in index.html. I surrounded the h1 and unordered list in a header tag. The header tag is a newer tag that can be used to surround elements that will be in your “header” section of your web page. It doesn’t change the look of your page, but it gives it more meaning. Select the header tag:

  • Change the background color to #34495e.

3. Let’s make the h1 element look nice.

  • Center the text on the page. Use the property “text-align” with the value “center”.
  • Change the text color to #fff.
  • Let’s give the text some room to breathe. Use the padding property with the value “25px 0 25px 0″. This give the top and bottom 25px of padding and the left and right stay the same.

 

  4. Let’s use the unordered list of links to make a basic navigation menu. Select the ul tag:

  • Change the background color to #2c3e50.
  • Center the text. Use the “text-align” property with a value of center.
  • Change the padding for each side to be 20px.

 

 

5. Our list right now is vertical, let’s make it horizontal. We need to get more specific and target the list items (li tags) inside the unordered list. Select the ul and then the li elements. Selector should look like: ul li (then brackets):

  • Make the li elements display as inline-block. Use the display property with a value of “inline-block”.

 

6. We should change the appearance of the links in the unordered list. Select the a elements in the unordered list. Use the selector: ul li a :

  • Get rid of the underline for each link. Use the property “text-decoration” with a value of none.
  • Give the top and bottom a padding of 19px. Give the left and right a padding of 14px.
  • Change the text color to #fff.
  • Bold the text. Use the property “font-weight” with a value of 700. (the value 400 is normal text, bigger is bolder, smaller is thinner).

 

 

7. Let’s change how links act when we use our mouse and hover over them. After your last CSS style rule, create a new one and use the following code:
:hover is what we call a “pseudo class”. Read more about it here.

8. Lastly, let’s give this paragraph some style and move it on the page.
– Change the background color to #7f8c8d.
– Change the text color to #fff.
– Center the text. How to do this is in previous examples above.
– Change the elements width to 80% of the page. Use the property “width” with a value of 80%.
– Give the text some room. Give the top and bottom padding of 50px and the left and right padding of 30px.
– Move the element down and away from the unordered list. Also center the paragraph element on the whole page. Use the “margin” property and give it a value of “50px auto”. 50px is for top and bottom padding and auto allows the browser to even out space on the left and right of the element.

Save and make sure everything shows up properly. **You will submit this style.css in HW #3 as well.**

HW Part 3

Now that you have your completed index.html file and style.css file, let’s put them on a live web server.

Via FTP, connect to your personal UCSC website storage. After you connect:

  • Navigate inside the public_html file.
  • Create a new folder inside public_html named webdesignlab.
  • Navigate inside of the webdesignlab folder.
  • Upload your index.html and style.css files inside the webdesignlab folder. You can drag the files into this folder to upload them.
  • When we go to check homework, we will visit people.ucsc.edu/~[your cruzid]/webdesignlab. The website files you just uploaded need to be the website that is displayed when visiting the URL you provide us.

Now you can submit your HW.

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line in the following format: HW #3 Firstname Lastname
  • The web address of your Codecademy profile (put this in the body of the email)
  • The web address of your index.html and style.css files for Part 2 on your UCSC web storage (in the format: people.ucsc.edu/~[your cruzid]/webdesignlab)