How do you make an online poker website look good, functional and is easy to maintain? With CSS of course! You can re-create elements from your graphic design using a mixture of CSS and HTML, reducing the weight (load time) of your web page and adding clean sharp aesthetics.
Allowing CSS to control the way text is displayed and formatted is extremely beneficial for a content based website as the CSS rules keep things consistent throughout the website. Since CSS rules are re-useable, maintaining a large poker site is a matter of copy and pasting text into a text editor, publish and voila! Less fiddling and more time to play online poker!
So what can this CSS do?, well click here! The HTML code hasn't changed, we've just told the browser to load in this external CSS file which tells the browser, make this plain HTML look pretty!
Lets start off with some simple elementary CSS!
This CSS tutorial aims not to show you everything there is to know about CSS, instead it aims to help you understand and learn how to create some nice CSS styled web page effects.
CSS Code is simply a set of written instructions that tells web browsers (like Firefox and Internet Explorer) how to display content on a page.
CSS can help you:
The sister language to CSS is HTML: code that tells the web browser what is actually on the page
CSS allows the web developer to separate the content they produce from the physical layout of the page. Keeping presentation seperate from html makes the content more accessible to a wider variety of devices, allows the developer to easily make site-wide changes by editing a single file, allows for a faster download due to smaller file sizes and allows your code to be cleaner and easier to read.
A key step towards accessibility is the separation of content (usually words) from its presentation (colour, typeface, size, layout etc). Effective use of cascading style sheets (CSS) goes a long way toward this goal. With their capability to define different behaviours when accessed via a browser, a text-to-speech reader, a PDA or a printer, there's really no excuse not to use CSS in the 21st century.
This helps a document to 'transform gracefully' across access media; they can always be accessed despite disabilities, difficult work environments, and technological barriers. The same techniques have also been used to display poker tournaments and the game guide such as Texas Holdem and Omaha Poker pages.
Before embarking on this tutorial, it is good to have an understanding of CSS and its syntax. The following will give you a basic understanding of CSS and how it is written.
CSS syntax is made up of three different parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
body {color: black}
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like this:
p {
text-align: center;
color: black;
font-family: arial
}
Note: Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p {
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
Good HTML/CSS skills can open up many design options along with an easy to maintain website.
To reduce the clutter on a busy website, Carbonpoker.com neatly hides content until the user requests for more information.
For example:
Look Here!
Boo!
Hello World, now you see me!
This method is javascript free, and relies on CSS and HTML, keeping things neat and simple.
So how does this work? Much the same way as how a hyperlink is underlined, but instead of just an underline, we use Eric Meyer's method of displaying a hidden span layer with the a:hover pseudo class.
The basic structure of the HTML code looks like this:
<a href="#" class="active-area"> Look Here! <span class="content"> <!-- Add any content you like in here --> <h3> Boo!</h3> Hello World, now you see me! <!-- END Content --> </span> </a>
Now we format it using CSS:
we want the content component hidden by default, until a user mouse-overs the active area, to do that we declare:
a.active-area span {
display: none;
}
This simply means don't display the span tag whose parent is an anchor with the class active-area.
Show the layer,
a.active-area:hover span{
display: block;
}
This rule overrides the previous and says display the span tag whose parent is an anchor which currently has a mouse over (pseudo class) belonging to our class called active-area.
These 2 CSS rules are the main mechanisms in controlling the hiding/showing of the layer.
Getting it to work with IE6:
a.active-area:hover {
visibility: inherit;
}
This fixes a known bug with IE6 when using this method to display hover layers. This extra line has no ill effects on other browsers.
We can add more CSS rules to this basic structure to polish off the final look and feel of our page. Lets do cool stuff!
Now that we have the basic template to work with, we can dress it up with CSS creating
cool web2 styles!
Boo!
Hello World, now you see me!
You can even load another webpage inside via iframe, for example loading up an information page that has
tournament information.
Example 2 code:
#example2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
background: url(http://www.carbonpoker.com/images/css_tutorial/example1.png) repeat-x;
background-color:#356AA0;
border: 1px solid #5A6C7F;
border-bottom: 20px solid #2c3946;
}
#example2 h3 {
font-size: 50px;
text-decoration: overline underline;
background: url(http://www.carbonpoker.com/images/css_tutorial/example1.png) repeat-x;
width: 115px;
margin: 5px;
padding: 5px;
}
<a href="#" class="active-area"> cool web2 styles!
<span class="content" id="example1">
<!-- Add any content you like in here -->
<h3> Boo!</h3>
Hello World, now you see me!
<!-- END Content -->
</span>
</a>
Example 3 code:
#example3 {
background-color:#fff;
border: 1px solid #2c3946;
border-bottom: 20px solid #2c3946;
}
< a href="/tournaments/12978119-1s.html" class="active-area"> tournament information.
< span class="content" id="example2">
< !-- Add any content you like in here -->
< iframe src="/tournaments/12978119-1s.html" frameborder="0" width="400" height="200"> < /iframe>
< !-- END Content -->
< /span>
< /a>
This method does have its limitations, for example having anchor links inside your content spans or block elements, like forms. They will still work in most browsers however, should you care about having W3C compliant HTML code you, try something different!
Carbonpoker.com's approach to forms was to use the Div containter method, the only negative effect is that it won't work on IE6 browsers without adding some javascript that teaches IE6 to use the #DivID:hover.
#divWrap{
position: relative;
width: 200px;
}
#divWrap:hover #divFloatBox {
display: block;
}
#divBoxWrap{
position: relative;
padding-bottom: 0px;
}
#divOver {
position: relative;
font-weight: bold;
display: block;
}
#divFloatBox {
display: none;
position: absolute;
padding: 10px;
float: left;
left: 0px;
top: 17px;
border: 1px solid #282828;
color: #FFFFFF;
font-size: 12px;
background: url(http://www.carbonpoker.com/images/css_tutorial/example1.png) repeat-x;
}
<div id="divWrap">
<div id="divOver">Carbon Example</div>
<div id="divFloatBox">
Boo! I'm a div layer!
<span style="font-style: italic; font-weight:bold;">Containing useful poker tournament times</span>
</div><!-- end divFloatBox -->
</div><!-- end divWrap -->
Go ahead and play with the DIV code, you will find that the possibilities are endless! Remember to
As time permits, I will add more CSS tutorials and HTML articles to this webpage.
Mike Chau
make CSS your friend!