PHP Tutorial

Step 7

PHP Tutorial

In this tutorial we will create a simple twitter copycat. In step 7 we will add some color to our site by editing our style.css file.

Step 7

1. Let’s start by defining the width of the page and the background color:

html {
  background-color: #E6ECF0;
}

body {
  margin: 0;
}

body > header {
  background-color: #FFF;
}

body > header div {
  width: 40em;
  margin: 0 auto;
}

#tweets {
  width: 40em;
  margin: 1em auto;
}

.tweet {
  background-color: #FFF;
}

The automatic margins keeps our page centered. Using em to define our body width, ensures that the amount of text in each line is independent from the pixel density.


2.

We don’t need the Tweets header:

#tweets > header {
  display: none;
}

3. Some padding adjustments and a border for the tweets section:

.tweet {
  padding: 1em;
  border-bottom: 1px solid #E6ECf0;
}

4. And now formatting the tweets themselves:

.tweet header .realname{
  font-weight: bold;
}

.tweet header a{
  text-decoration: none;
  color: #657786;
}

.tweet header .time:before {
  content: '\00B7  ';
}

5. Changing the padding, margins and border of the header:

body > header {
  border-bottom: 1px solid #999;
}

body > header h1 {
  margin: 0;
  padding: 1em 0;
}

body > header a {
  color: #48AAE6;
  text-decoration: none;
}

6.

Align the elements in the header:

body > header h1 {
  font-size: 1em;
}

body > header div {
  display: flex;
  justify-content: space-between;
}

body > header a {
  padding: 1em;
}

7. And finally some love for our forms:

#register {
  width: 20em;
  margin: 0 auto;
}

#register form {
  margin: 0;
}

#register input {
  display: block;
  border: 0;
  margin: 1em;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
}

#register input[type=submit] {
  background-color: #1DA1F2;
  color: white;
  border-radius: 2em;
}

In step 8 we will make our code more robust by adding error detection and handling.