http___www.izrada-webstranica.com_css.html_1.xml
1.1 2.1 3.1 4.1 4.2 4.3 5.1 5.2 6.1 7.1 7.2 7.3 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9 8.10 8.11 8.12 8.13 8.14 8.15 8.16 8.17 8.18 8.19 8.20 8.21 8.22 8.23 8.24 8.25 8.26 8.27 8.28 8.29 8.30 8.31 8.32 8.33 8.34 8.35 8.36 8.37 9.1 9.2 9.3 9.4 11.1 11.2 11.3 11.4 12.1 13.1 13.2 13.3 14.1 15.1 15.2 15.3 15.4 15.5 15.6 15.7 15.8 15.9 15.10 15.11 15.12 16.1 17.1 17.2 17.3 17.4 17.5 17.6 18.1 19.1 19.2 19.3 19.4 20.1 21.1 21.2 21.3 21.4 22.1 23.1 24.1 25.1 25.2 25.3 26.1 26.2 26.3 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 34.2 34.3 34.4 35.1 35.2 35.3 35.4 35.5 36.1 37.1 38.1 39.1 39.2 39.3 40.1
Creating a CSS Template Difficulty: Easy Description: Create a valid XHTML and CSS template with the help of this tutorial. CSS, an acronym meaning Cascading Style Sheets, is a style sheet language used to style documents written in various computer languages such as HTML, XUL, etc. As a designer, we have been offered a new way of modifying the presentation of our pages, without the use of tables, and it's time that all begin to convert to this manner of styling web pages. In this tutorial, I'll explain how to code a layout with the use of valid CSS and no, I'm not talking about those boring colourless plain 'ol pages that make drying paint look interesting, but a simplistic, stylish template which can be the stepping stone for much more advanced designs. In this tutorial, we will be coding a free layout, which is currently offered on Gamexe.net, known as CoolBlue. You can view a demo of the final outcome by clicking on the thumbnail bellow: Getting started Before we dive into the css, you'll have to save the following .zip to your computer and extract it: CSS_template.zip The zip contains all the images necessary for the template we'll be coding, as well as an index.html file which is all set for us to style. So, now that you've extracted the zip, let's take a look at the index.html file in the folder. The html file should contain the following code: CoolBlue CSS template by Gamexe.net                     Home   Forum   TopSite           News and Updates     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque molestie urna. Nunc porta, metus sit amet ultricies fringilla, augue elit luctus orci, vitae vulputate tellus turpis sed mi. Nunc quam est, ultrices vel, lacinia ut, placerat vitae, turpis. Nulla nonummy, dolor varius ullamcorper blandit, sem orci mattis metus, placerat viverra nisi mi quis ipsum. Aenean nec nulla at elit vestibulum aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur iaculis facilisis massa. Phasellus euismod, pede et molestie egestas, ligula augue commodo erat, at tincidunt nulla pede in lectus. Sed lectus. Quisque accumsan venenatis felis. Integer commodo pretium nunc. Maecenas condimentum leo vitae lectus. Donec lacus ante, eleifend in, molestie ac, congue in, turpis. Maecenas luctus suscipit risus. Duis id felis in metus iaculis malesuada. Aliquam erat volutpat. Pellentesque tincidunt. Sed posuere, odio eget sollicitudin bibendum, lorem felis volutpat nunc, at fringilla nunc lacus eleifend lorem. Vivamus euismod nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum bibendum massa. Cras luctus nibh non urna. Nulla facilisi. Nunc faucibus. Aliquam placerat felis at lacus. Posted by Daniel St. Jules on Feb 10, 03:39 AM     Curabitur eros. Proin ligula nibh, sodales eu, lacinia a, viverra eget, lacus. Aliquam varius hendrerit sem. Sed posuere facilisis mi. Vestibulum luctus odio sed mi. Integer consectetuer elit at nisl. Nullam convallis mollis lectus. Mauris accumsan elementum eros. Duis eleifend tempor turpis. Integer erat justo, adipiscing id, vehicula eu, imperdiet at, augue. Quisque in nisi vitae nisi porta viverra. Posted by Daniel St. Jules on Feb 8, 03:39 AM                       Gamexe.net       News     Staff     Apply for Staff     Affiliate     Link to Us       Gaming       Reviews     GCN             CoolBlue template by Daniel St. Jules of  Gamexe.net I'll give a quick run through the code. The first line declares the DOCTYPE for the file, specifying that it's XHTML transitional 1.0 and should thus use the appropriate syntax. After that, there's the head section of the document, in which the title, language, type, author, and style sheet are specified within. The one line that is very important in that block of code is as it specifies the location of the CSS style sheet that will be used to style the page. After the head section, the body is opened, and all the content can be found there. Among the content, you'll find various divs such as the container, wrapper, nav, menu, all of which will be styled with the help of CSS. If you have a fair amount of knowledge of CSS and HTML, you should be ok, if not, then continue reading as things will become clearer. CSS - making it all look good Create a new file in the CSS_template folder and name it CoolBlue.css, while remembering that file names are often case sensitive. Open up CoolBlue.css with your favourite text editor, mine being Notepad++, which can be found at http://notepad-plus.sourceforge.net/. Now, copy and paste the following code into the blank CSS file: /*--------------------------*/ /* GENERAL STYLES */ /*--------------------------*/ html,body { margin:0; padding:0; } body { color: #6B6B6B; font-size: 10pt; font-family: Verdana, Arial; background: #E6EDF4 url('bg.gif') top repeat-x; } a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; } a:hover { text-decoration: underline; color : #4F4F4F; } img { border: 0px; margin: 0px; } input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; } p { text-indent: 20pt; } form { padding: 0px; margin: 0px; } Above is the first part of our CSS file. The first thing you should note is the syntax/formatting used. Between multiple selectors of a rule, a comma should be present, an example being "html, body". After the selectors is a curly brace {, and a rule is closed with a second curly brace }. In between the curly braces you can find a series of declarations followed by semi-colons. The declarations themselves are composed of a property (ex: text-indent) and a value (ex: 20pt) which are separated by a colon. You can also note the spacing used. When dealing with a fairly lengthy rule, such as the body one, I like to place each tabbed declaration, as well as the ending closing curly brace, on its own line. I also use spaces between most values and properties as to keep the code nice and clean. This is the basic formatting used when I code my CSS files. It's fairly simple, although it might be a bit overwhelming at first, don't worry. So now onto explaining the different rules presented above. html,body { margin:0; padding:0; } body { color: #6B6B6B; font-size: 10pt; font-family: Verdana, Arial; background: #E6EDF4 url('bg.gif') top repeat-x; } Ok, the first rule consists of declarations for the html and body tags. They simply declare that there will be no padding, spacing between the border and content of an object, and margin, which consists of the spacing outside of the border. The color declaration within the body rule specifies the default colour of the text used in the document, and the value of the property can be either a hex (ex: #FFFFFF) or word (ex: white). The font-size should be straight forward enough, and it can be measured in px, pt, em, etc. The font-family property will set the default font used for text, and more than one font can be specified as a value in the odd chance of a font not being installed on a visitor's computer. The background property then specifies a background colour for the page (ex: #E6EDF4), a background image, the position of the image and whether or not the background image should repeat; in this case, the background image will repeat horizontally. a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; } a:hover { text-decoration: underline; color : #4F4F4F; } The next two rules specify the style of links in the page. In the rules, different pseudo-classes are implemented as to specify the look of the links while in different states. :link specifies the style while in the default state, :active while it's clicked, :visisted after it's been clicked and :hover while the cursor is over the link. The properties used are text-decoration, one which can have a value of none, underline, overline, line-through or blink and the color property, which will specify the colour of the text. img { border: 0px; margin: 0px; } input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; } p { text-indent: 20pt; } form { padding: 0px; margin: 0px; } The three rules posted above then specify the style of all img, input, p and form tags. For the img rule, we've specified that they should never have a border, even if used within a hyperlink, and this will apply to ALL img tags. (ex:  ) The input rule then specifies the style of all input tags and you can guess what the p and form rule does. The properties in all of these declarations should be fairly self-explanatory. Now copy and paste the following code and add it in the CSS file, after the form rule: /*--------------*/ /* LAYOUT */ /*------------*/ #header { height: 81px; min-width: 753px; overflow: hidden; margin: 0; text-align: center; } #container { margin: 0px 58px 0px 58px; min-width: 631px; } #wrapper { float: right; width: 100%; margin-left: -160px; margin-bottom: 26px; } #content { margin: 10px 0px 0px 160px; padding: 3px 0px 0px 10px; background: #E6EDF4 url('content_bg.gif') top repeat-x; } #menu { float: left; margin: 10px 0px 10px 0px; width: 150px; background: url('menu_bg.gif') repeat-y; border: #758697 1px solid; border-width: 0px 1px 1px 1px; padding: 0px 0px 10px 0px; text-align: left; } #footer { clear: both; width: 100%; border-top: #ADADAD 1px dashed; text-align: center; padding: 3px; font-size: 8pt; } #menucontainer ul { margin: 0px 0px 0px 10px; padding: 0; list-style-type: none; } #menucontainer a { display: block; width: 127px; padding: 0px; margin: 0px; background: url('arrow.gif') 0 .4em no-repeat; padding-left: 6px; } #nav { height: 15px; width: 100%; text-align: center; min-width: 753px; } #nav a { margin: 0px 30px 30px 0px; color: #3A3F45; } strong { padding-left: 10px; } There are quite a few rules in this chunk of code, so I'll just list some of them. #header: This div, located at the top of the page, has a height of 81px, and its contents are aligned in the center. The min-width property works in most modern browsers and specifies the minimum width, which will prevent the layout from breaking due to a window size being too small. The overflow: hidden will make the contents of the div automatically disappear if they do not fit inside the container as to prevent the layout from breaking. #container: Has a min-width as to, once again, prevent the layout from breaking due to reducing the size of the window. The margin property then specifies the top, right, bottom and left margins. This will center the container. #wrapper: Positions the content area in the container by using the float property and giving it a left margin. #content: Also contributes to the positioning of the content area with the use of margins and uses a background which repeats horizontally. #menu: Specifies the position, dimensions and style of the left menu while giving it a background image. #footer: Consists of some basic styling of the footer div and gives it a dashed border. #nav: Simply specifies the dimensions of the top navigational area and centers its contents as well. Next, add the following code to the CSS file after the "strong" rule. /*---------------------------*/ /* CONTENT STYLES */ /*---------------------------*/ /* search */ .submit { background: #6D92B6 url('submitbg.gif') repeat-x; margin-left: 10px; border: 1px solid #787878; } #searchfield { margin: 0px 0px 3px 10px; background: #F2F2F2 url('inputbg.gif') repeat-x; border: #B9B9B9 solid 1px; width: 130px; } /* news */ .news{ width: 80%; padding: 10px 10px 20px 10px; background-color: #C3CBD4; } .news2{ margin-bottom: 2em; font-size: 11px; color: #898989; width: 300px; border: #9CA5AE dashed 1px; text-align: center; position: relative; top: -13px; left: 10px; background-color: #E4EAF1; padding: 3px; } No new properties are introduced in the search styles, although a couple new ones can be found in the .news2 rule. The position property enables users to position an element in either an absolute manner, specifying its exact coordinates on the page, or relative based on its default location. We use the value "relative" in this case, and then use the top and left properties to specify its relative location. Because top has a negative value, the element will be located above its usual position, thus allowing it to overlap the .news div. Now that you have all the CSS necessary for the template, simply save the file with the name CoolBlue.css to the folder in which the index.html file is located and open the html file in one of your browsers. You've just made a valid CSS and XHTML layout! Now, try experimenting by using different values, changing the images/backgrounds, adding new elements, etc. Remember, this is just the basic idea for a layout, so customization is recommended. Also, as reference, here's the full CSS of the template: /*--------------------------*/ /* GENERAL STYLES */ /*--------------------------*/ html,body { margin:0; padding:0; } body { color: #6B6B6B; font-size: 10pt; font-family: Verdana, Arial; background: #E6EDF4 url('bg.gif') top repeat-x; } a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; } a:hover { text-decoration: underline; color : #4F4F4F; } img { border: 0px; margin: 0px; } input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; } p { text-indent: 20pt; } form { padding: 0px; margin: 0px; } /*--------------*/ /* LAYOUT */ /*------------*/ #header { height: 81px; min-width: 753px; overflow: hidden; margin: 0; text-align: center; } #container { margin: 0px 58px 0px 58px; min-width: 631px; } #wrapper { float: right; width: 100%; margin-left: -160px; margin-bottom: 26px; } #content { margin: 10px 0px 0px 160px; padding: 3px 0px 0px 10px; background: #E6EDF4 url('content_bg.gif') top repeat-x; } #menu { float: left; margin: 10px 0px 10px 0px; width: 150px; background: url('menu_bg.gif') repeat-y; border: #758697 1px solid; border-width: 0px 1px 1px 1px; padding: 0px 0px 10px 0px; text-align: left; } #footer { clear: both; width: 100%; border-top: #ADADAD 1px dashed; text-align: center; padding: 3px; font-size: 8pt; } #menucontainer ul { margin: 0px 0px 0px 10px; padding: 0; list-style-type: none; } #menucontainer a { display: block; width: 127px; padding: 0px; margin: 0px; background: url('arrow.gif') 0 .4em no-repeat; padding-left: 6px; } #nav { height: 15px; width: 100%; text-align: center; min-width: 753px; } #nav a { margin: 0px 30px 30px 0px; color: #3A3F45; } strong { padding-left: 10px; } /*---------------------------*/ /* CONTENT STYLES */ /*---------------------------*/ /* search */ .submit { background: #6D92B6 url('submitbg.gif') repeat-x; margin-left: 10px; border: 1px solid #787878; } #searchfield { margin: 0px 0px 3px 10px; background: #F2F2F2 url('inputbg.gif') repeat-x; border: #B9B9B9 solid 1px; width: 130px; } /* news */ .news{ width: 80%; padding: 10px 10px 20px 10px; background-color: #C3CBD4; } .news2{ margin-bottom: 2em; font-size: 11px; color: #898989; width: 300px; border: #9CA5AE dashed 1px; text-align: center; position: relative; top: -13px; left: 10px; background-color: #E4EAF1; padding: 3px; } And the following is a link to download this template as well as other free templates made by Gamexe.net: http://www.gamexe.net/templates/index.php Well, I hope this has helped. This was a rather basic explanation of using CSS, so there's a lot more to be learned. If ever you need help, feel free to post on the forums as many members would be happy to assist. Happy Designing.
1.1 2.1 3.1 3.2 5.1 7.1 7.2 11.1 11.2 14.1 17.1 17.2 20.1 21.1 24.1 24.2 24.3 24.4 25.1 25.2 28.1 29.1 32.1 33.1 36.1 37.1 37.2 42.1 46.1 47.1 50.1 55.1 59.1 60.1 63.1 64.1 69.1 70.1 73.1 73.2 74.1 75.1 76.1 76.2 76.3 76.4 81.1 84.1 85.1 86.1 88.1 89.1 90.1 95.1 96.1 99.1 100.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 111.1 111.2 112.1 113.1 114.1 115.1 115.2 117.1 118.1 119.1 120.1 121.1 122.1 123.1 126.1 129.1 129.2 129.3 129.4 129.5 131.1 132.1 133.1 134.1 135.1 136.1 137.1 140.1 142.1 143.1 146.1 146.2 146.3 146.4 148.1 149.1 150.1 151.1 152.1 153.1 154.1 157.1 159.1 160.1 166.1 166.2 168.1 169.1 170.1 171.1 172.1 173.1 174.1 177.1 179.1 180.1 185.1 186.1 188.1 189.1 191.1 192.1 193.1 196.1 197.1 198.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 203.2 203.3 203.4 203.5 204.1 205.1 205.2 205.3 205.4
Što je CSS? CSS je skraćenica za Cascading Style Sheets, to je stilski jezik koji se koristi za definiranje izgleda Web stranice i pozicioniranje njezinih elemenata dok se HTML koristi za kreiranje strukture Web stranice. CSS se može pisati unutar samog HTML dokumenta ili se može pozvati vanjski CSS dokument koji će sadržavati CSS kod. Zbog jednostavnosti, količine dokumenata i činjenice da je ovo tutorijal za početnike mi ćemo CSS pisati unutar HTML dokumenta iako se inače za naprednije korisnike preporučuje da se piše u zasebnom dokumentu. Ovdje se piše sav CSS kod Kada bismo CSS-om htjeli tekst naslova (heading 1) obojati u crnu boju i definirati veličinu fonta od 14 pixela to bismo napravili na sljedeći način. Prvo definiramo koji element (selektor) ćemo stilizirati: Nakon toga definiramo područje unutar kojega ćemo pisati stilove za taj element. Stilovi se pišu unutar najobičnijih vitičastih zagrada: tu ćemo pisati stilove za h1 Unutar vitičastih zagrada napisati ćemo da želimo da font bude crne boje i veličine 14 px. Za one koji neznaju što je px, to je mjerna jedinica koja se koristi prilikom izrade Web stranica, 1 pixel = 0.26 mm to znači da 14 pixela = 3.70 mm.: color: black; font-size: 14px; Na predhodnom primjeru vidi se da se CSS stilovi se sastoje od 2 djela, svojstvo i vrijednost. Svako svojstvo ima neku vrijednost npr. u našem primjeru svojstvo color ima vrijednost black, a svojstvo font-size ima vrijednost 14px. Nakon svojstva piše se dvotočka koja odvaja svojstvo i njegovu vrijednost (color: black) a nakon vrijednosti piše se točka zarez (color: black;). Točka zarez daje nam do znanja da tu svojstvo sa svojom vrijednosti završava. Sada ćemo na isti način stilizirati heading 2 naslov. Njega ćemo samo za primjer obojati bjelom bojom i odrediti veličinu fonta 12 pixela: color: black; font-size: 14px; color: white; font-size: 12px; CSS u HTML dokumentu CSS style tagovi se pišu u headeru HTML dokumenta. Kreirat ćemo jedan prazan HTML dokument, ako neznate kako provjerite prvi dio našeg tutorijala u kojemu je sve objašnjeno: izrada Web stranica Naslov Naslov Podnslov Praznome HTML dokumentu dodat ćemo h1 i h2 naslove te njihove CSS stilove koje smo prethodno napisali da vam prikažemo kako CSS izgleda u svom prirodnom okruženju. Naslov color: black; font-size: 14px; color: white; font-size: 12px; Naslov Podnslov Sada su oba dva naslova stilizirana CSS-om. Mi smo u primjeru koristili samo dva svojstva boju (color) i veličinu fonta (font-size), ali CSS im mnogo više svojstava kojima se može stilizirati cijela Web stranica a ne samo njen tekst. Neka CSS svojstva koje se najčešće koriste i neke njihove vrijednosti: HTML klase Naš HTML kod moramo pripremiti da bi što lakše unutar njega mogli integrirati CSS stilove. Pripremu HTML-a ćemo izvršiti tako da ćemo svim HTML tagovima dodjelit određene klase. HTML klase koriste se da bi se uz pomoć njih HTML elementimd dodijelio nekakav stil. U nastavku ćemo prikazati primjer kako se dodjeljuju HTML klase i kako se definiraju njihovi stilovi: Naslov .glavni-naslov{ color: black; font-size: 14px; .podnaslov{ color: white; font-size: 12px; Naslov Podnslov Stiliziranje Web stranice CSS-om Nakon završetka prvog djela tutoriala izrada web stranica, krećemo na drugi dio u kojemu ćemo stilizirati HTML strukturu Web stranice. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; - Kao što se   tag odnosi samo na paragraph, tagovi body i html odnose se na cijelo Web sjedište. Unutar ova dva taga unjet ćemo svojstva I njihove vrijednosti koje će se odnositi na cijlo Web sjedište - Svaki preglednik (browser) Web stranicama dodaje razmak na rubovima kojega smo uklonili postavljanjem vrijednosti margin i padding na nulu. - Definirali smo font koji će se koristiti na cijeloj Web stranici. - Boja pozadine koje će se koristiti na cijeloj Web stranici. - Pošto se naša Web stranica prilagođava veličini različitih ekrana postavili smo njenu minimalnu širinu. Širinu smo ograničili jer ispod te širine naša Web stranice nebi dobro izgledala. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; Kao što znamo linkovi se pišu na sljedeći način  link . Kada u CSS-u navedemo svojstvo a znači da ćemo njime stilizirati sve linkove. Sada smo sve linkove obojali navedenom bojom. Ovaj kod #e4f5fd; zove se RGB kod, pojednostavljeno to znači da svaka boja koja postoji ima svoj kod, npr. crna boja je #000000; bijela boja je #FFFFFF; crvena boja je #FF0000; itd. RGB kodove svih postojećih boja možete saznati na sljedećoj Web stranici: RGB Color Codes Chart. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; hover označava stanje kada netko pokazivačem miša pređe preko određenoga elementa (eng. hover = hrv. lebdjeti). a:hover označava stanje kada netko pokazivačem pređe preko nekoga linka. Znači kada netko pređe mišem preko linka ukloniti će se njegovo podcrtavanje. To je standardni efekt koji se koristi zbog bolje preglednosti. Evo primjer kako to funkcionira, pređite mišem preko ovoga linka: primjer hover efekta body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; Ovo vrijedi za sve paragrafe na Web stranici. Ovim stilom definirali smo boju teksta koji se javlja u paragrafima body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; .menu{ height:50px; margin:0px auto; position:relative; color:black; box-shadow:0px 0px 5px 5px #3d78b3; background-color:#3d78b3; Redom ćemo objasniti što smo sada stilizirali u menu klasi. - height:50px; Odredili smo visinu ovog područja - width:100%; Odredili smo širinu područja - margin:0px auto; Vrijednost margine smo definirali na ovaj način nebili centrirali cjeli menu na sredinu ekrana. Prva vrijednost se odnosi na vertikalnu marginu, druga na hosrizontalnu. Postavljanjem horizontalne margina na vrijednost auto centrirali smo taj element na sredinu. - position:relative; Relativno pozicioniranje na Web stranici - z-index:9999; Elementi koji imaju z-index vrijednot npr. 15, prikazivat će is ispod elemenata sa z-index vrijednosti od npr. 16. Postavljanjem z-index vrijednosti na 9999 očito je da želimo da se ovaj element pokazuje iznad svih ostalih. - color:black; Boja teksta unutar ovog elemenata biti će crna - box-shadow:0px 0px 5px 5px #3d78b3; Ovo svojstvo definira sjenu elementa. Svojstvo ima 5 vrijednosti, prve četri su u pixelima a jedna je boja. Prva vrijednost označava vertikalno pozicioniranje sjene, druga horizontalno. Treća vrijednost označava koliko će sjena biti raširena. Četvrta vrijednost označava količinu zamagljenosti sjene a zadnja vrijednost je boja sjene. - background-color:#3d78b3; Definirali smo boju pozadine. Dali smo vam neke osnovne primjere CSS stiliziranja da bi shvatili na koji način funkcioniraju i kako ih se treba koristiti u kombinaciji sa HTML strukturom stranice. Sada ostaje na vama da samostalno eksperimentirate i dizajnirate CSS prema vašim željama i potrebama. Da biste nastavili svoju CSS edukaciju predlažemo jedan od najboljih resursa za učenje, gdje uz praktične primjere možete i samostalno isprobavati vlastite CSS kodove: CSS Tutorial. Sretno :)