How to introduce external CSS style sheets in CI framework?

How to use external CSS styles in the CI framework requires specific code examples

Introduction:
CI (CodeIgniter) is a lightweight PHP development framework. It is widely used to build web applications. When developing web applications, external CSS styles play a vital role, helping us beautify the page and improve the user experience. This article will introduce how to use external CSS styles in the CI framework and provide specific code examples.

1. Create CSS file:
   First, we need to create a CSS file to define the styles we want to apply to the web page. In the CI framework, we can store CSS files in a specified folder, for example, we store them in the "assets/css" folder. Create a CSS file called "styles.css" and place it in this folder.
2. Loading CSS files:
   In the CI framework, we can use code snippets to load CSS files in the view (View) file. In the view file that needs to use CSS styles, use the following code to load the CSS file:

<link rel="stylesheet" href="<?php echo base_url();?>assets/css/styles.css">

In the above code, we use the base_url() function to get the base URL defined in CI, and then pass it URL to reference the CSS file.

In the CI framework, you need to ensure that you have set "base_url", which can be set in the CI configuration file.

3. Apply CSS styles:
   Now that we have successfully loaded the CSS file, we can start applying styles. On the HTML element of the view file, we can use the class or id attribute to select CSS styles.

For example, if we want to add style to a button, we can use the class attribute on the HTML element and define the corresponding style rules in the CSS file. Suppose we have a button element in the view file, we can add the following code:

<button class="btn">Click me</button>

Then, in the CSS file, we can add the following code to define the style of the button:

.btn {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Above In the code, we use the class selector to select the button element with the "btn" class and define some style rules for it. When a user opens a web page that contains the button, the button will appear with a red background, white text, and a rounded border.

By adding more CSS rules, we can define styles for more elements and achieve richer and more attractive page effects.

Summary:
Using external CSS styles in the CI framework is very simple. First, we need to create a CSS file and place it in the specified folder. Then, load the CSS file using the tag in the view file. Finally, we can select the corresponding style by adding class or id attributes to HTML elements and define style rules in the CSS file. In this way, we can easily apply external CSS styles to the web pages of the CI framework to achieve beautiful and attractive user interfaces.

Hopefully the specific code examples provided in this article will help you use external CSS styles in your CI framework. I wish you better results in developing web applications!

The above is the detailed content of How to introduce external CSS style sheets in CI framework?. For more information, please follow other related articles on the PHP Chinese website!