Adding CSS Stylesheets to a Web Page – Using Zend Framework 3

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

6.8. Adding CSS Stylesheets to a Web Page

CSS stylesheets are typically placed to the <head> section of an HTML document, either as a link to an external file (external CSS stylesheet files are usually stored in APP_DIR/public/css directory.)

<link rel="stylesheet" type="text/css" href="/css/style.css">

or as an inline <style> element

<style>
  body {
    padding-top: 60px;
    padding-bottom: 40px;
 }
</style>

To store the CSS rules, external CSS stylesheets are recommended. For example, the base CSS rules provided by Twitter Bootstrap CSS framework are loaded from bootstrap.min.css and bootstrap-theme.min.css files. Custom site-specific CSS rules can be stored in style.css file. Since you need this CSS stylesheets for most of your pages, it is better to link them in the head section of the layout template. But, if a certain CSS stylesheet needs to be loaded for a single page only, you place it on that page's view template.

To add an external CSS stylesheet to a view template, you use the HeadLink view helper:

<?php
$this->headLink()->appendStylesheet('/css/style.css'); 
$this->headLink()->appendStylesheet(
       '//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

In the example code above, we used the appendStylesheet() method of the HeadLink view helper to add an external CSS stylesheet to the head section of the document. The method accepts a path to local CSS file (line 2) or a URL to CSS file located on another server (line 3).

The summary of HeadLink view helper's methods is provided in table 6.2.

Table 6.2. Methods provided by HeadLink view helper

Method name	Description
`appendStylesheet()`	Puts a link to CSS stylesheet file after all others.
`offsetSetStylesheet()`	Inserts a link to CSS stylesheet file in a given list position.
`prependStylesheet()`	Puts a link to external CSS stylesheet file before all others.
`setStylesheet()`	Clears the list and puts the single CSS file instead.

If you want to add an inline <style> element in the head section of the document, you can use the HeadStyle view helper. Its methods are presented in table 6.3 below:

Table 6.3. Methods of the HeadStyle view helper

Method name	Description
`appendStyle()`	Adds a CSS stylesheet inline after all others.
`offsetSetStyle()`	Inserts a CSS stylesheet inline in a given list position.
`prependStyle()`	Puts a CSS stylesheet inline before all others.
`setStyle()`	Clears the list and puts the single CSS stylesheet inline instead.

6.8.1. Example

To demonstrate how to add a CSS stylesheet to your web page, we will take a real-life example. Assume you need to let the user the ability to type a date (in YYYY-MM-DD format) in a text input field. You would like to improve user experience by not just letting him to type the date, but also by selecting it from a pop-up date-picker widget.

To achieve this goal, you can use a third-party library called jQuery UI ¹⁷. To integrate jQuery UI in your page, you need to download two files from the official project page:

jquery-ui.min.js -- the minified version of jQuery UI JavaScript code;
jquery-ui.min.css -- the minified version of jQuery UI theming styles.

¹⁷⁾ jQuery UI provides a set of "user interface interactions, effects, widgets, and themes"; it is based on jQuery library. jQuery UI is analogous to Twitter Bootstrap in the sense that both provide reusable user interface components.

Put the jquery-ui.min.js file to APP_DIR/public/js, and jquery-ui.min.css file to APP_DIR/public/css. Finally, add the datepicker.phtml view template to the application/index/static directory under the module's view directory:

<?php
$this->headTitle('Datepicker');

$this->headScript()->appendFile('/js/jquery-ui.min.js', 'text/javascript'); 
$this->headLink()->appendStylesheet('/css/jquery-ui.min.css'); 
?>

<h1>Datepicker</h1>

<p>
    Click the edit box below to show the datepicker.
</p>

<input type="text" class="datepicker" title="Type here"/>

<script>      
    $(document).ready(function() {
        $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd' });     
    });
</script>

In the example above, we use the HeadScript view helper's appendFile() method (line 4) to add the link to jquery-ui.min.js file to the head section of the document.

In line 5, we used the HeadLink view helper's appendStylesheet() method to add the link to jquery-ui.min.css CSS stylesheet to the head section of the document.

In line 14, we added the text input field which will be used to enter the date.

In line 16-20, we added an inline JavaScript code for binding jQuery event handler to the text input field. When the user clicks the text input field, the datepicker widget will appear allowing to select the date.

To see the result, enter the "http://localhost/datepicker" URL into your browser's navigation bar (see figure 6.8 for example).

Figure 6.8. Datepicker