CSS is a style sheet language used to define the appearance and formatting of a document written in a markup language — often HTML. A style in this sense is a set of text-formatting instructions, such as font, color, size, and so on. Because CSS instructions exist separately from HTML code, you can apply the same set of instructions to every page in your website, or to more than one website. Here's a list of common HTML instructions used in conjunction with CSS:
To link within HTML to an external style sheet, use the following structure:
<span class="code"><head></span><span class="code"></span> <span class="code"> </span><span class="code"><link rel=</span><span class="code">"</span><span class="code">stylesheet</span><span class="code">"</span><span class="code"> type=</span><span class="code">"</span><span class="code">text/css</span><span class="code">"</span><span class="code"> href=</span><span class="code">"</span><span class="code">stylesheet.css</span><span class="code">"</span><span class="code"> /></span><span class="code"></span> <span class="code"></head></span><span class="code"></span>
To embed styles within an HTML page:
<span class="code"><style type=</span><span class="code">"</span><span class="code">text/css</span><span class="code">"</span><span class="code">></span><span class="code"></span> <span class="code"> </span><span class="code">styles ...</span><span class="code"></span> <span class="code"></style></span><span class="code"></span>
Using a body style to design the overall page:
<span class="code">body {</span><span class="code"></span> <span class="code"> </span><span class="code">margin:0;</span><span class="code"></span> <span class="code"> </span><span class="code">padding:8px 4px 12px 4px;</span><span class="code"></span> <span class="code"> </span><span class="code">color:#ffbf11;</span><span class="code"></span> <span class="code"> </span><span class="code">background:#000000 url(images/space.gif);</span><span class="code"></span> <span class="code">}</span>To use a class selector in HTML:
<span class="code"><p class=</span><span class="code">"</span><span class="code">caption</span><span class="code">"</span><span class="code">>This is a caption paragraph</p></span>
To use an ID selector in HTML:
<span class="code"><div id=</span><span class="code">"</span><span class="code">sidemenu</span><span class="code">"</span><span class="code">> ...menu links... </div></span><span class="code"></span>
Common type selectors:
<span class="code">body {...}</span> <span class="code">p {...}</span> <span class="code">td {...}</span> <span class="code">ul {...}</span>Common class selectors:
<span class="code">.caption {...}</span> <span class="code">.banner {...}</span> <span class="code">.main {...}</span>Common ID selectors:
<span class="code">#mainParagraph {...}</span> <span class="code">#sidemenu {...}</span> <span class="code">#footer {...}</span>