Cascading Style Sheets

Cascading Style Sheets (CSS) is the language for defining the styles of web pages. It is possible to change color, font, and so on using CSS. While the HTML describes the structure of a web page, CSS describes what the page will look like on various devices and screen types.

Nowadays, it is very common to use a CSS framework because it contains some presets to make the web pages compatible across browsers, and offers a number of tools, such as a grid system, to make the creation of page layout easier and to implement responsiveness.

One such framework is Bootstrap, and using it is as simple as including the generated and minified CSS file in the HTML document:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

Including the CSS file in the original HTML document will make the browser render the page a bit differently:

Figure 1.8: Rendering the web page

As you can see, the font is different, but no other major changes are visible. This is because the CSS rules from the linked file do not match any of the elements to decorate. The Bootstrap documentation (https://packt.live/2N1LHJU) shows what it is capable of. Usually, the class attributes are used to match the target HTML elements. Therefore, by simply adding class="btn btn-primary" to the submit input, we will get the button formatted according to the defined style:

Figure 1.9: Adding CSS to a button

We didn't need to define a single CSS rule. The button was rendered according to the already-defined rules from the Bootstrap framework. If we inspect the submitted input styles in Developer Tools (Chrome), we will see the following cascade that is applied to the HTML element:

Figure 1.10: Inspecting the submit input styles in Developer Tools

Of course, we can create an additional CSS file and link it to the HTML document, overwriting some of the Bootstrap declarations.

Exercise 1.5: Creating a Login Form Page Using Bootstrap

You are required to create a simple login page using the Bootstrap framework. Follow these steps:

Create a file called login-form.html.
Declare the document type as HTML5 and open the root HTML element:
```
<!DOCTYPE html>
<html lang="en">
```

Add the head block containing the page title, the link to the Bootstrap CSS framework, and the meta tag required by the CSS framework:

<head>
    <title>Login form</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/      bootstrap.min.css" rel="stylesheet">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no"       name="viewport">
</head>

Open the body element and add the container div, aligning the contents to the center:
```
<body>
<div class="container d-flex justify-content-center">
```

Open the form element and add the form title – an H1 centered text heading:

    <form method="post">
        <div class="text-center mt-4">
            <h1 class="h3 mb-3 font-weight-normal">Authenticate</h1>
        </div>

Add the first form label and input group for the username:

        <div class="form-label-group mb-3">
            <label for="inputUser">Username</label>
            <input class="form-control" id="inputUser" name="username"               placeholder="Username" type="text">
        </div>

Add the password-related label and input tags:

        <div class="form-label-group mb-3">
            <label for="inputPassword">Password</label>
            <input class="form-control" id="inputPassword" name="password"                placeholder="Password" type="password">
        </div>

Add the button that will submit the form:

        <button class="btn btn-lg btn-primary btn-block"           type="submit">Login</button>

Close all opened tags.
Note
The final file can be referred at https://packt.live/2MBLNZx.
Open the file in the browser. The expected output is as follows:

Figure 1.11: The login page

The form is rendered using the default styles of Bootstrap, which are far richer than the browser's defaults.

In this exercise, you rendered an HTML page, including some of the most widely used HTML elements, such as the form element, and you used the Bootstrap CSS file:

<h1>Hello <?php echo $name; ?></h1>

In this case, the Packt string is stored in the $name variable, and the output Hello Packt will be printed in heading 1 (in the biggest font size).

Note

The file extension will be .php.

This is possible because PHP scans the script file and will only run the code between the opening tag (<?php or <?=) and the closing tag (?>) when the closing tag is present, replacing it with the code output, if any.

Exercise 1.6: Printing PHP Code Output between HTML Tags

In this exercise, we will use the built-in server to print Hello Packt using the companyName=Packt query string. Follow these steps:

Reopen the hello.php file using your favorite code editor.

Replace the code with the following code and save the file:

<h1><?php echo "Hello ". $_GET['companyName'];?>!</h1>
<hr>

Now, open the browser and enter the following in the address bar and hit Enter:
```
http://localhost:8085/hello.php?companyName=Packt
```
You will see the following output on your screen:

Figure 1.12: Printing output to the browser

As we can see, PHP has such a degree of flexibility that it allows us to use parts of PHP code inside other types of content.

Let's now have a look at other predefined variables available in PHP.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

The PHP Workshop

By : Martinez, Busuioc, Carr, Gray, Joshi, McCollum, McLeod, Tonu

The PHP Workshop

By: Martinez, Busuioc, Carr, Gray, Joshi, McCollum, McLeod, Tonu

Overview of this book

Cascading Style Sheets

Exercise 1.5: Creating a Login Form Page Using Bootstrap

Exercise 1.6: Printing PHP Code Output between HTML Tags

The PHP Workshop

By : Martinez, Busuioc, Carr, Gray, Joshi, McCollum, McLeod, Tonu

The PHP Workshop

By: Martinez, Busuioc, Carr, Gray, Joshi, McCollum, McLeod, Tonu

Overview of this book

Cascading Style Sheets

Exercise 1.5: Creating a Login Form Page Using Bootstrap

Exercise 1.6: Printing PHP Code Output between HTML Tags

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access