JSFiddle - React, Tailwind, and code Playground

by Misko Y

HTML

<link rel="stylesheet" href="http://www.fil.bg.ac.rs/misko/flf/iw/primeri/html-primeri/css/primeri.css">
<link rel="stylesheet" href="http://www.fil.bg.ac.rs/misko/flf/iw/primeri/html-primeri/css/primeri2.css">
<!DOCTYPE html>
<html lang='sr'>
	<head>
	<meta charset='utf-8'/>
	<meta name='author' content='Милош Утвић' />
	<meta name='description' content='Начини повезивања CSS-а и HTML-а' />
	<meta name='keywords' content='Дигитални текст 2, пример, линијски CSS, унутрашњи CSS, спољашњи CSS' />
	<title>Начини повезивања CSS-а и HTML-а</title>
    <link rel='stylesheet' type='text/css' href='http://informatika.fil.bg.ac.rs/misko/flf/iw/primeri/html-primeri/css/primeri.css'/>
    <!--
     <style>
	 /*
	   ко је јачи, линијски или унутрашњи CSS?
	  */
	 p#linijskiUnutrasnji { color: blue;}

	 /*
	   ко је јачи ако се прво примени спољашњи CSS, па онда унутрашњи CSS?
	  */
	 p#spoljasnjiUnutrasnji { color: blue;}

	 /*
	   ко је јачи ако се прво примени унутрашњи CSS, па онда спољашњи CSS?
	  */
	 p#unutrasnjiSpoljasnji { color: blue;}



	 </style>
   -->
    <link rel='stylesheet' type='text/css' href='http://informatika.fil.bg.ac.rs/misko/flf/iw/primeri/html-primeri/css/primeri2.css'/>
	</head>
	<body>
		<h2>Начини повезивања CSS-а и HTML-а</h2>
		
		<p>До сада смо имали прилике да упознамо нека од основних својстава, класе, псеудокласе и псеудоелементе у CSS-у. Видели само да CSS ослобађа HTML потребе да се бави визуелним изгледом (стилом, форматирањем) и омогућава да се HTML користи искључиво за опис структуре документа. Тиме посао почетног форматирања није олакшан, штавише решење је сложеније од оног које нуди HTML: треба научити другачију синтаксу коју користи CSS у односу на HTML, повезати их итд. Међутим, на дуже стазе, кад се узме у обзир да постоји тенденција да се визуелни изглед документа с времена на време мења, показује се да вреди уложити почетни труд у CSS како би касније одржавање презентације (промена форматирања, односно изгледа презентације)...

CSS

/*  СПОЉАШЊИ CSS  primer.css */
/* украсни део је изостављен, видети датотеку */
/*
	   ко је јачи, линијски или унутрашњи CSS
 */
p#linijskiSpoljasnji { color: red;}
p#spoljasnjiUnutrasnji { color: red;}



/*  УНУТРАШЊИ CSS  */
/*
ко је јачи, линијски или унутрашњи CSS?
*/
p#linijskiUnutrasnji { color: blue;}

/*
ко је јачи ако се прво примени спољашњи CSS, па онда унутрашњи CSS?
*/
p#spoljasnjiUnutrasnji { color: blue;}

/*
ко је јачи ако се прво примени унутрашњи CSS, па онда спољашњи CSS?
*/
p#unutrasnjiSpoljasnji { color: blue;}


/*  СПОЉАШЊИ CSS  primer2.css */

/*
	   ко је јачи, линијски или унутрашњи CSS?
 */
p#linijskiSpoljasnji { color: red;}
p#unutrasnjiSpoljasnji { color: red;}