DCSS

introductie

Joost van Meeteren

Dynamic CSS - Links

Wikipedia - Dynamic Cascading Style Sheets.

Jori-koolstra.nl - Dynamic Cascading Style Sheets, een simpele inleiding (dutch).

Codewalkers.com - Dynamic CSS with PHP.

Dynamic CSS - Introductie

Dynamic Cascading Style Sheets

Dynamic CSS, or DCSS, is an umbrella term for a collection of technologies used together to create dynamic style sheets, by using a combination of any server-sided programming language (such as PHP/ASP/Perl/JSP) and Cascading Style Sheets (CSS). The first idea of DCSS was written in July 2002 by Jori Koolstra, a Dutch programmer.

See Wikipedia - Dynamic Cascading Style Sheets.

Note. All the examples of Dynamic CSS I met so far on the internet use an internal stylesheet ( <style type="text/css"><?php require_once("sheet.dcss.php"); ?></style> ). The results of the PHP process would be shown in the head-section of the webpage.

Here we use an external stylesheet by using <link href="../css3_dcss/stylesheet.php" rel="stylesheet" type="text/css" /> in the head-section of this page. The results of the PHP process are shown in the stylesheet.

Dynamic CSS - Voorbeelden

layout dcss_one

layout dcss_two

layout dcss_three

Note. These three layouts are described right below in "Example stylesheet".

Dynamic CSS - Voorbeeld stylesheet


head-section:

<link href="../css3_dcss/style.php" rel="stylesheet">


In dir ../css3_dcss/:

- style.php
- style.dcss.php
- vars.php


style.php:

<?php
header("content-type: text/css; charset: utf-8");
?>

<?php
require_once("../css3_dcss/stylesheet.dcss.php");
?>


style.dcss.php:

<?php
require_once("../css3_dcss/vars.php");
 
echo "p.dcss_one";
echo " {";
echo " color: $color_one !important;";
echo " font-family_one: $font_family;";
echo " font-size_one: $font_size;";
echo " font-style: $font_style;";
echo " }";

echo "p.dcss_two";
echo " {";
echo " color: $color_two !important;";
echo " font-family_two: $font_family;";
echo " font-size_two: $font_size;";
echo " font-weight: $font_weight;";
echo " }";

echo "p.dcss_three";
echo " {";
echo " color: $color_three !important;";
echo " font-family_three: $font_family;";
echo " font-size_three: $font_size;";
echo " text-decoration: $text_decoration;";
echo " }";
?>


vars.php:

<?php
$color_one = "#ff0000";
$color_two = "#00ff00";
$color_three = "#0000ff";
$font_family_one = "tahoma";
$font_family_two = "courier";
$font_family_three = "arial";
$font_size_one = "18px";
$font_size_two = "14px";
$font_size_three = "10px";
$font_style = "italic";
$font_weight = "bold";
$text_decoration = "underline";
?>

Dynamic CSS - Voorbeeld met layout in DCSS

Een voorbeeld met layout in DCSS: Voorbeeld in DCSS.

Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: maandag 16 september 2024