A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::open($save_path, $name) should either be compatible with SessionHandlerInterface::open(string $path, string $name): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 132

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::close() should either be compatible with SessionHandlerInterface::close(): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 294

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::read($session_id) should either be compatible with SessionHandlerInterface::read(string $id): string|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 168

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::write($session_id, $session_data) should either be compatible with SessionHandlerInterface::write(string $id, string $data): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 237

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::destroy($session_id) should either be compatible with SessionHandlerInterface::destroy(string $id): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 317

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: Return type of CI_Session_files_driver::gc($maxlifetime) should either be compatible with SessionHandlerInterface::gc(int $max_lifetime): int|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice

Filename: drivers/Session_files_driver.php

Line Number: 358

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Session cookie parameters cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 314

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 315

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 316

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 317

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Session ini settings cannot be changed after headers have already been sent

Filename: drivers/Session_files_driver.php

Line Number: 108

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Session save handler cannot be changed after headers have already been sent

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_start(): Session cannot be started after headers have already been sent

Filename: Session/Session.php

Line Number: 143

Backtrace:

File: /home/u648970804/domains/tutiongo.com/public_html/application/controllers/Tutorials.php
Line: 7
Function: __construct

File: /home/u648970804/domains/tutiongo.com/public_html/index.php
Line: 315
Function: require_once

How to Add Style Sheets to HTML Pages | Tutiongo
x
Home
html

HTML Styles Element

In this Tutiongo tutorial you will learn how to add style rules to HTML page.


HTML Styles

HTML is a quite limited when it comes to the presentation in a web page. It was originally designed as a simple way of presenting your information. CSS (Cascading Style Sheets) was introduced in December 1996 in the World Wide Web Consortium (W3C) to provide a better way to presentation using HTML elements.

With CSS, it becomes very easy to Design specify the things like, size and typeface for the fonts, colors for the text and backgrounds etc, alignment of the text , images also you can change amount of space between the elements, border, outlines and text decoration for the elements, and lots of other styling properties.


Adding Styles to HTML Elements

Style information can either be attached as a various ways such as separate document or embedded in the HTML Web page. These are the three methods for implementing styling information to an HTML Web pages.

  • Inline styles - If You using the style attribute in the HTML start tag.
  • Internal style - If You using the <style> element in the middle head section of the document.
  • External style sheet — If You using the <link> element, then you have pointing to an external CSS files.

Inline Styles

Inline styles are used to apply the unique style rules to particular element, by putting the CSS rules directly into the start tag like <p style="color:red;"> . It can be attached to an element using the style attribute as well.

The style attribute includes a bunch of CSS property and value pairs. Each property of css: value pair is separated by a semicolon just like (;), just as you would write into an Internal or external style sheet. But it needs to be all in one line i.e. note: no line break after the semicolon.

The following some sample example how to set the font-size and color  of the text:


Inline Styles Example:

<h1 style="color:red; font-size:30px;"> This is a tutiongo paragraph. </p>
<p style="color:green;font-size:18px;">This is a tutiongo paragraph. </p>
<div > This is tutiongo paragraph </div>

Try it Yourself





Using the inline styles considered as a bad practice and it can increase you page loading time. Because style rules are embedded directly inside the html tag in your web page, it causes the presentation to become mixed up with the content of the web page, which makes updating or maintaining a website very very difficult.

If you want to learn about the various CSS properties in depth, please check out our CSS  tutorial .


Internal style

Internal  or embedded style  sheets only affect the web page they are embedded in.

Internal style sheets are defined in the <head> section of an HTML web page or document using the <style> tag. You can add any number of <style> elements inside the <head> section.

The following some sample how style rules are embedded inside a web page.


Internal Styles Example:

<head>
    <style>
        body { background-color: YellowGreen; }
h1 { color: blue; }
        p { color: red; }
    </style>
</head>


Try it Yourself





External Style Sheets

An external style sheet is ideal it used when the style is applied to many pages with one style sheet.

An external style sheet holds many style rules in a separate document that can link from any HTML document on your Website. External style sheets are the most flexible and most use method because with an external style sheet, you can change the look and feel of an entire website by updating just only one file.

You can attach your external style sheets in two ways - importing and linking  :





Inline Styles Example:

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

Try it Yourself