WebRef.eu  - Internet Marketing and Online Business Resources  

Home / Site Map | TwitterTwitter | Contact

Google
 

CSS How To Guide

We've made a few how to guides for CSS.

CSS Basics

Where to Specify Your CSS Styles
A guide to the three techniques; using an external css style sheet, inline style sheet or inline style.

How to apply CSS to an Element, Class or id

How to apply a CSS Style to an HTML tag that is within a particular class

Set Page Background Colour

body {
background-color: #d7f9f7;
}

How to Centre a Div on a Page

New CSS Stylesheet Template

How to Reference an External CSS Stylesheet from a Web Page

Set a Background Image with CSS

body {
      background-image: url('images/name of-background-image.jpg');
}

Or for a div, e.g. box1:

#box1 {
      background-image: url('images/name-of-background-image.jpg');
}

Note, when background images have been added to divs, they are not printed. 

See Example 2.

Make Images Responsive with CSS

Use the following class:

<style>

.ImageIsResponsive {
/*To centre image within div and make it responsive*/
/*max-width means will expand to its full size but no more*/
max-width: 90%;
height: auto;
/* To centre images within div column */
display: block;
margin: auto;
}

</style>

and apply it to your image as follows:

<img class="ImageIsResponsive" src="images/your-image.jpg">

Note, if you use:

max-width: 100%;
height: auto;

The image will never scale up larger than its original size, but will scale down if it has to. To allow the image to scale larger than its original size, use:

width: 100%;
height: auto;

The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:

@media \0screen {
  img {
       width: auto; /* for ie 8 */
  }
}

Styles for the Span Tag and Highlighting Text Using the Span Tag

HTML:

<span="MyTextHighlighter">highlight this text please.</span>

CSS:

.MyTextHighlighter {
background-color: #FFFF99;
/* You can set padding on a span to bring the text away from the edge of the background. This makes your text appear to be on a banner. */
padding-left: 8px;
padding-right: 8px;
}

Example of Complex CSS Syntax

Here we have a surrounding div called PageNumbers, within which is an unordered list that displays page numbers. We want to be able to highlight the li that contains the current page number.

This is the HTML (some output by PHP):

<div id="PageNumbers">

<ul>

<?php
// List all the page numbers with a link to that page number.

for($i=1;$i<=$total;$i++)
{
if($i==$PageId) { echo "<li class='CurrentPage'>".$i."</li>"; }

else { echo "<li><a href='?PageId=".$i."'>".$i."</a></li>"; }
}
?>
</ul>

</div> <!-- close PageNumbers -->

This is the CSS that needs to be used to identify this specific li:

/* To highlight current page number in bright orange */
#PageNumbers ul li.CurrentPage {
background: #FF9900;
}

Difference Between CSS Visibility Property and Display Property

CSS visibility property - determines visibility of an element, but still takes up space.

CSS display property - determines whether an element is displayed or not.  If not displayed, it doesn't take up space. 

Display Property

display: block;

Displays an element as a block-level element.

A block-level element occupies the entire width available to it. This means it stretches out to the full width of its parent element (container).

Examples of block-level elements are:

<div>
<p>
<h1>
<form>

See also: Block-level Elements explained by w3schools

display: inline-block;

Makes a block-level element display in a line, i.e. on the same line, instead of as blocks, where each element would display on a new line.

See Also: inline-block explained at w3schools |inline-block at Learn CSS Layout

This is an easy way to create a grid of boxes that wraps nicely. Apply this CSS:

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

display: flex;

This relates to the flexbox, which was a new layout mode in CSS3. A flexbox ensures that elements behave predictably when the page must accommodate different screen sizes. See:

CSS3 Flexbox at w3schools

Flexbox Support by Browsers at caniuse.com

CSS for Lists

To switch off bullet points and make the list display inline, use the following:

list-style-type: none;
display: inline;

Here's a full worked example. Note we are specifying a style for a particular div, in this case the navigation div:

HTML Code:

<div id="navcontainer">

<div id="navigation">

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="site-map.php">Site Map</a></li>
</ul>
<br class="clear"/> <!-- allows navigation div to expand to exact height necessary -->

</div><!-- close navigation -->

</div><!-- close navcontainer -->

CSS code:

/* start navigation css */

/* navcontainer goes around navigation menu */
#navcontainer {
background-color: #CCFFCC;
}

#navigation {
margin:0px auto;
background-color: #CCFFCC;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #003300; /* Menu item text colour */
text-decoration: none;
border-right: 1px solid #FFFFFF;
}

#navigation li a:hover { background: #33CC33; }

/* end navigation css */

CSS for Tables

See CSS tables from w3schools.

 

Flexbox

A Complete Guide to Flexbox by Chris Coyier at CSS-Tricks

 





Low Prices UK Shopping

Compare Prices
at LowPrices.co.uk


Home / Site Map | TwitterTwitter | Contact

All Content ©2016 WebRef.eu