CSS Notes

For more thorough information here’s the official CSS reference. This official guide is also good.

I like this one too because it lets you play with values and see how they affect things.

CSS browser support table

Deploying CSS

You can do things like this where ever a bit of CSS is needed:

<p style="font-size:20px;">Text in a font size of 20 pixels.</p>

Or you can make a style section in the <head> like this:

<html>
<head>
<title>Chris X Edwards - xed.ch</title>
<style type="text/css">
.css-class{ color:red; }
#css-id{ color:blue; }
</style>
</head>
<body>
<p class="css-class">Tomato</p>
<p id="css-id">Blueberry</p>
</body>
</html>

See the section on "ID Selectors" for a discussion of when to use class selectors and when to use IDs.

Note	In general it’s polite XML syntax to put quotes around all attribute values. This is not the case in CSS. If you put things like `blue` in quotes like `.css-class{ color:"blue" }` then this style will most likely not work!

To save space in your document and to standardize and centralize your style definitions it’s usually not a bad idea to put the style sheet information in its own file and source it from your HTML like this:

<link rel="stylesheet" href="http://xed.ch/xed.css" type="text/css">

Testing CSS

Sometimes you might like to have the ability to switch styles quickly, perhaps you’d like a day and night them that’s selectable on the web page. This little bit of JavaScript switcheroo can make that happen.

<script>
    function chstyle(cssfile) {
        var l= document.getElementsByTagName('link');
        l[0].href= cssfile;
    }
</script>


<button onclick="chstyle('')">Hipster Zero</button>
<button onclick="chstyle('style.css')">Hipster Style</button>
<button onclick="chstyle('brewpub.css')">Hipster Brewpub</button>
<button onclick="chstyle('cafe.css')">Hipster Cafe</button>
<button onclick="chstyle('fixie.css')">Hipster Fixie</button>
<button onclick="chstyle('beard.css')">Hipster Beard</button>

Obviously you need to have all the files mentioned ready to go.

Pure CSS can do some surprisingly complex stuff!

This is done entirely with internal CSS and no JS.

Read the source to see how this is done.

CSS Syntax Structure

First interesting thing to note is that comments are done with the old C syntax and look like this:

/* This is a comment. */

Besides comments, CSS is formed by "rules" which have the format:

Selector{Declaration_1;...;Declaration_N;}

Note that the final semi-colon is optional but it seems to be regarded as good form.

"Selector" is usually the HTML tag to apply this rule to but it can be other things as shown below.

The Declaration is a "Property:Value" pair. This makes the CSS a list of rules that looks like these examples:

    a{text-decoration:underline;color:#006ac8;}
    p{margin:0 0 1.5em;}
    h1,h2{font-weight:normal;color:#cecece;}

It’s normal to define properties for styling various normal HTML tags, but it is also common to want to differentiate between two different types, from your perspective, of the same tag. For example, perhaps you sometimes want paragraphs to have a gray background and sometimes you want them to have a white background. To the HTML they are both paragraphs with the <p> tag but you know there is something else that should be specified. Here is how to do that:

    <style>
        p.red{background-color:#ff0000;}
        p.gray{background-color:#cecece;}
         .blue{background-color:#0000ff;}
    </style>

    <p class="red">This is a paragraph with a white background.</p>
    <p class="gray">This is a paragraph with a gray background.</p>
    <b class="blue">This bold sentence will be blue.</b>

As you can see with the blue example, any tag can pick up the properties of a selector that starts with just a dot.

ID Selectors

It is also possible to use the id attribute of tags to specify CSS rules. For example:

<style>
    #specialoffer{color:red;}
</style>

<p id="specialoffer">This should be red!</p>

Generally the idea is that if the style is to be applied to one specific element then it should get an id but if there are many such elements, it should get a class. ID selectors should be reserved for things like serial numbers which are absolutely unique. A good thing to keep in mind about id attributes is that browsers will search pages for them if given a URL that looks for them. For example http://xed.ch/help/gentoo.html#2 looks for the section (defined in the table of contents) labeled with the ID "2" in this document. Use ID selectors in those kinds of situations.

<div> Tags

Sometimes you want to style a portion of the document but it has no specific classic HTML tags associated with it. Using paragraph tags is common but if your styled section does not resemble a paragraph and conflicts with a paragraph’s natural rendering, you can use basically a "do nothing" tag. This is <div>Does nothing special.</div>.

Styling Links

Links have some special properties which can be styled. The syntax looks like this:

a:visited{underline;color:#0000c8;}
a:hover{color:#cc0000;}
a:active{color:#cccc00;}

Nested Selectors

Sometimes you’ll come across (or require) a syntax like this:

a img{border:none;} /* Images which are links. */

The following example explains how this works:

p{color:black;}
.edited{color:red}
.edited p{color:yellow}

The idea here is that while you may have a generally applicable style for <p> tags, you might want another style rule to take precedence. Here the edited class is applied first and if the tag is edited it is checked to see if it is a <p> tag and colored yellow. If it was a <p> tag without the edited class, then it would be colored black.

Media Types

Media queries are a mechanism which allows the web page (sort of) to "ask" the impending browser what sort of thing it is. It’s like a musician who has been requested to play a gig asking the requester, Ok, so what kind of venue is it? This allows the musician to make special accommodations which may be appropriate for a small club or a giant arena. The way it works in real life is that you set up different CSS effects in different categories depending on what sort of display facilities are available.

Media queries can check the width and height of the browser or device allowing correct layout for portrait or landscape; phones are constantly switching and apparently good implementations constantly adjust to match the correct media query section. Also the resolution can be queried presumably allowing somewhat accurate length scaling.

Although you might find a lot of chatter about how media types help with braille and other technologies for the blind, I couldn’t find any examples of it in use for that purpose. The real use which is massively deployed is to allow tablets and "smart" "phones" to receive optimized rendering instructions. This is often called "responsive web design" or "fluid layout".

Media query syntax uses @media and looks like this:

@media screen and (max-width: 1200px) {
    body{width:1000px; margin:0 auto;}
    #someid{width:700px;}
    .someclass{width:280px;}
}

Other media types (than the typical screen) include 3d-glasses, print (a printer), aural, handheld, projection, tty, and the all-encompassing all.

Some other conditions include:

(height:480dpi)
(min-resolution:90dpi)
(min-width:500px)
(device-width:600px) /* Could, but doesn't necessarily, have. */
(orientation:portrait)
(monochrome)
(min-color:8) /* 8 bit color device (or more) */
(device-aspect-ratio: 1280/720)

You can also bring in CSS from somewhere else depending on the media queries. This syntax starts with a @import.

You can also just embed the media queries and import the correct CSS:

<link rel="stylesheet" media="screen and (color)"
      rel="stylesheet" href="example.css" />

Here’s a full example.

A Media Query Sample With Left Side Menu

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        li.xedmenu{color:#ce0000;font-size:.75em}
        body {padding-left:0em}
        ul.xedmenu{background-color:#cecece;
                   position:relative;
                   top:0em;width:12em;
                   padding-top:1em;
                   padding-bottom:1.5em;
                   margin-top:0em
        }
        @media screen and (min-width:600px) {
            body{padding-left:16em}
            ul.xedmenu{background-color:#cecece;
                       position:absolute;
                       top:2em;left:1em;
                       width:12em;
                       padding-top:1em;
                       padding-bottom:1.5em;
                       margin-top:5em
            }
        }
    </style>

</head>
    <body>
        <ul class="xedmenu">
            <li>Item #1</li>
            <li>Item #2</li>
            <li>Item #3</li>
        </ul>
        <h1>Menu With Media Query Example</h1>
        <p>
            This test shows media queries being used in a simple but
            effective way. There is a simple menu on the left of the page
            if the display is larger than 600 pixels wide. If not, the
            display is placed at the top of the page.
        </p>
    </body>
</html>

Responsive Images

Here’s an article on responsive images and the tricky things about them. This basically has to do with selecting the optimal sized image to give the user as much information as they might wish but minimize upload times.

Attribute Selectors

You can also style things based on their attributes. The syntax uses brackets.

[src=xedlogo.png]{border:1;}

Here’s an example:

<style>
    [src="http://xed.ch/xedlogo.gif"]{border:10px solid blue}
</style>
<img src="http://xed.ch/xedlogo.gif"/>

In theory, any tag with an attribute that defines src as this gif will get a blue border.

Tiling

Annoyingly a browser is one of the better ways to see images tiled. If you’re a tessellation artist or are working on seamless textures (Gimp → Filters → Map → Tile Seamless…) and want to see what your image looks like tiled, the following little HTML/CSS will do the job while demonstrating how to put backgrounds on HTML elements. To use this effectively, just symlink your test image to ./test.jpg.

<html> <body>
<style type="text/css">
.testtilingzone {
  background: url(./test.jpg);
  background-repeat: repeat; /*repeat,round,space,repeat-x,repeat-y,no-repeat*/
  min-width: 1200px;
  min-height: 700px;
}
body { margin: 0; display: grid; place-items: center; }
</style>
<h2>Original test.jpg</h2>
<img src="./test.jpg">
<h2>Tiled test.jpg</h2>
<div class="testtilingzone"> </div>
</body> </html>

Gradient

Here’s an interesting excerpt from a page at this website which shows how to use gradients on mostly nothing to get the effect that I did back in 1999 with 6x1 pixel gifs. I’m not sure this CSS is actually smaller (!), but the request transaction (or lack thereof) surely is.

.myitems::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3rem;
  bottom: 3.6rem;
  width: 5px;
  border-radius: 5px;
  background:
  linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
  box-shadow: -10px 0 20px 3px #000;
}

Key Press

The MC Wiki has a very smart looking style for a key press button look.

element {
    background-color: #f8f9fa;
    color: #222;
    font-size: 80%;
    font-family: inherit;
    font-weight: bold;
    border: 1px solid #c8ccd1;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
    padding: 0.1em 0.4em;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
}

This is with a reduced (80%) bold (700) font.

For Shift, Control, Alt keys they use "⇧ Shift", "Ctrl", "Alt" respectively.

Useful Properties

background-color: Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).
background-image: Value can be url(http://xed.ch/cssnotes/example.jpg).
background-repeat: If none then don’t tile background images.
border: Describes the border of an element that can have them. Values are something like 5px dashed #cecece or 1em solid blue.
border-width: Same as border but individually.
border-style: Same as border but individually.
border-color: Same as border but individually.
clear: Clear sides of an element of floating elements. An example of floating is when text wraps around an image. Can be used to turn off floating elements completely. Values can be both, left, or right.
color: Main color of elements. For example font colors. Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).
display: A value of none hides the item. A value of inline puts the item in with no line breaks, for example, an emoticon image in some text. A value of block puts line breaks before and after the item.
font-family: Main category of font. The five CSS generic fonts are serif, sans-serif, monospace, cursive and fantasy.
font-weight: Basically normal or bold. Anything else will probably not work for many people.
font-size: Values can be things like 24px, 50%, or 1.5em.
font-style: Basically italic or oblique or normal.
font-variant: Basically smallcaps or normal.
float: Causes element to float left or right. Or none to prevent floating.
height: Height of an element firmly set at a value. Can be auto (the default), a value in px, cm, em, etc, a percent 50%, or inherit to use an inherited value.
max-height: Constrain an element to be no higher than this value.
min-height: Constrain an element to be no shorter than this value.
letter-spacing: Puts the specified amount of space (.2em, 3px) between each l e t t e r. Looks quite silly usually.
line-height: A value of 100% is normal line spacing where 200% is double spaced and 50% is an unreadable compressed mess.
margin: How close the text is to other elements or borders it is adjacent to. Can be in px, em etc. Note that margin-right, margin-left, margin-top, margin-bottom set just that margin. And you can set all four of those with a margin value of something like 10px 20px 30px 40px which will give the top, right, bottom, left 10, 20, 30, 40 pixels of margin respectively.
padding: Just like margin with all its variants. It is specifying distance from the text to the edge of the text’s element. Margin is concerned more with this element’s position relative to the next element.
position: Values can be relative or absolute. Then use the attributes, top, bottom, left, and right. This allows an element to be placed very specifically in a certain spot. Better be sure the user has a pixel in the specified place!
text-align: Values are left, center, right, and (full) justify and orient text blocks accordingly.
text-decoration: Values can be none, underline, overline, line-through, blink, or inherit.
width: Same as height. Also there is max-width and min-width. Specifically img{max-width:100%;height:auto} looks useful if you want to waste bandwidth with image data that people never see.
word-spacing: Space between words. Like letter-spacing but less silly.
z-index: A quasi layer concept. With this value, you can prioritize which elements are drawn and which are obscured when they occupy the same space. A value of 1 will be under an element with a value of 2.