1. Learn
  2. Programming
  3. CSS Introduction

CSS Introduction

Submitted by Evan Boldt on Sat, 03/23/2013 - 21:56
Topics
Web
Programming
GUI
Introduction

Introduction

htmlTagName, #idname, .classname {
   stylename: stylevalue;
   color: black;
   font-size: 12px;
   background-color: #ddd;
}

CSS stands for Cascading Style Sheet. In HTML, you use it to apply a certain look to specific elements in the page. CSS makes it easy to give every page on your website a unified appearance. The format is extremely straightforward, but to be effective you need to know how to specify which element you want styled, find current styling information in a webpage, and you must be aware of all of the styles that can be applied to an element. The general form of a style in a CSS file is like the example shown to the right.

Specifiers

Specifiers tell the browser which elements to apply the style to.

  • tags like <body>, <p>, <div>, and <span> are specified with just the text
  • an ID in html is declared in the element like <div id="rightSidebar">, and specified in CSS like #rightSidebar
  • a class in html is declared in the element like <div class="gallery">, and specified in CSS like .gallery

Specifiers may be chained in special ways to select more elements or narrow in on an element

  • Multiple specifiers can use the same style by seperating the specifiers with comments
    • #sidebar, .gallery {...} applies the style within the brackets to both the sidebar ID and gallery class.
  • You can drill down to an class by seperating specifiers with a space
    • #sidebar h3 {...} applies the style within the brackets to only h3 elements within the sidebar element

Styling

Color

There are several ways to pick a color. The numerical methods all are in the order of "red, green, blue", with low numbers being darker and higher numbers being lighter.

CSS Color Examples
Name3 digit hex6 digit hexRGBRGB+Alpha Transparency
black #000 #000000 rgb(0,0,0) rgba(0,0,0,1.0)
white #FFF #FFFFFF rgb(255,255,255) rgba(255,255,255,1.0)
red #F00 #FF0000 rgb(255,0,0) rgba(255,0,0,1.0)
green #0F0 #00FF00 rgb(0,255,0) rgba(255,0,0,1.0)
blue #00F #0000FF rgb(0,0,255) rgba(0,0,0,1.0)
grey innaccurate #808080 rgb(129,129,129) rgba(129,129,129,1.0)
transparent N/P N/P N/P rgba(0,0,0,0)
N/P N/P N/P N/P rgba(0,0,0,0.5)

Styles List

Here are some sample styles applied to a div tag with the text "demo" inside of it.

Style NameDescriptionSample UsageSample Result
color The color of the font color: #090;
DEMO TEXT
font-size The size of the font, usually in px or em font-size: 14px;
DEMO TEXT
font-style Italicizes text font-style: italics;
DEMO TEXT
font-weight Controls the "boldness" of text font-weight: bold;
DEMO TEXT
text-decoration Underline, or overline, and strikethrough to text text-decoration:
underline;
DEMO TEXT
text-align The horizontal positioning of text text-align: center;
DEMO TEXT
vertical-align The vertical positioning of text vertical-align: middle;
DEMO TEXT
font-family Name of font. Use web-safe fonts! font-family: Serif;
DEMO TEXT
line-height Spaces text lines. 2em is 'double spaced' line-height: 2em;
DEMO TEXT
height
width		 Controls the height/width of block elements width: 40px;
DEMO TEXT
background-color The background color of the box background-color: #fff;
DEMO TEXT
background Takes all background related styles
Can do color, image, image position, repeats		 background: #fff
url() no-repeat
right 50%;
DEMO TEXT
border A line around the box border: 1px solid #090;
DEMO TEXT
border-radius Rounds the edges of the box border-radius: 8px;
DEMO TEXT
margin Adds spacing to the outside of the box margin: 5px;
DEMO TEXT
padding Adds spacing to the inside of the box padding: 5px;
DEMO TEXT
float Pushes to side and surroundings wrap around it float: right;
DEMO TEXT
display inline: on same line as text like a span or img
block: use width and obey margins like div
inline-block: inline but can width and margin
none: not shown at all		 display:inline;
DEMO TEXT
position static: the normal way of position
absolute: put at coordinates on screen
relative: like absolute, but zero'd at static
fixed: like absolute, but moves with scrolls
note: nonstatic needs top, left, right, or bottom		 position: relative;
left: 10px;
DEMO TEXT
z-index Larger values are higher when overlapping z-index: 10;  
text-shadow adds a drop shadow to text. multiples by comma
text-shadow: right down size color		 text-shadow:
-1px 0 0 #fff;
DEMO TEXT
box-shadow Adds drop shadow to the box.
Similar parameters to text-shadow
Shadows can be inset (inside the box).		 box-shadow:
inset 0 0 2px #fff,
0 0 4px #000;
DEMO TEXT

Other Style Information

As a general rule, you can use a shorthand to differentiate the different directions of a style either in the order or top, right, bottom, left or in the order top+bottom and left+right. It follows a clockwise rule, and saves a lot of typing particularly on the margin and padding styles. For example:

Direction Notations
Seperated4 direction shorthand2 direction Shorthand
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
 
padding: 8px 5px 8px 5px;
 
padding: 8px 5px;

Gradients can be made with this very simple generator.

The safe choices for fonts are really limited. With modern browsers, you can attach font files to pages. This process is made extremely easy with the Google Web Font API.

Development

As a general rule, you will want to have a local instance of the website you are developing for. If not, you can always test the css in-browser in chrome easily through menu > tools > developer tools. The magnifying glass in the bottom left will let you select an element visually on the screen. Then, the information on what styles are active and overridden is in the right column, and the tag's place in html is shown in the left. You can actually double click on just about anything in there and modify the contents of the page or the style information.

Disqus