10 Resources for When You Need Help with CSS

http://vandelaydesign.com/blog/css/resources-for-help/

Stack Overflow

Stack Overflow is sort of a combination of social media and a forum. It is a niche specific site focused on programming and development (CSS is just one of the topics being discussed). The purpose of Stack Overflow is to ask and provide answers to questions for programmers. Anyone can post a question (you don’t even have to create an account) and then other members will be able to provide answers to your questions. Other users can then vote up or down on the various answers so it’s easy for everyone to identify the best ones.

CSS-Discuss.org

CSS-Discuss is a large and very active mailing list for CSS-related issues. You can either join the list to post and answer questions, you can browse through the archives in search of a particular issue, or you can browse through the wiki and get involved there if you have something to contribute.

CSS Cheat Sheet

The CSS Cheat Sheet is a great reference to have on hand in anticipation of those times when a little extra help might be needed. It is a one-page PDF document that includes all selectors and properties.

CSS Shorthand Cheat Sheet

If you’re looking for help in reducing the size and optimizing your css files, the CSS Shorthand Cheat Sheet is an excellent resource. With this one-page PDF document you’ll be able to create more efficient CSS code with shorthand techniques.

Web Developer Add-On

Chris Pedrick’s Web Developer add-on provides a great deal of functionality for your development in general, and CSS is just one of the specific aspects. Using the toolbar, you can do such things as identify all the styles that affect an element, view the CSS source code, see the sizes of block elements, and disable CSS to see how your pages degrade.

Firebug

Firebug is another add-on that puts a great deal of CSS information and resources at your fingertips. With firebug you can edit, debug and monitor CSS, in addition to HTML and JavaScript in any webpage. For anyone working with CSS, Firebug is a great tool to quickly edit and test your code, particularly when you’re experimenting and you need to see how your changes will impact the site.

CSS-Tricks

CSS-Tricks is a popular blog, which many Vandelay Design readers probably subscribe to. At CSS-Tricks Chris Coyier publishes articles and tutorials that cover all kinds of aspects of CSS. The archives contain plenty of posts that will be helpful to anyone looking to learn more about CSS. In addition to Chris’s articles, CSS-Tricks also includes a forum that is pretty active where you can get help.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Noupe published a post earlier this year with 50 examples of things you can do with CSS. If you’re looking for some new ideas this is a great resource, and if you’re looking for help on a specific issue, there may be a resource here that is just what you need. Included in the post is help for styling lists, working with forms, footers, image replacement, image sprites, other image techniques, text and link effects, navigation, galleries, drop caps, rounded corners, blockquotes, and more.

CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices

This is another helpful post from Noupe that focuses on one of the most common problem areas for working with CSS, layouts. If you’re experiencing issues getting a layout to work the way you want it to, most likely there is something here that is just what you need.

Top Reasons Your CSS Columns are Messed Up

Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used.

CSS positioning

http://www.alistapart.com/articles/css-positioning-101/

http://www.w3schools.com/css/css_positioning.asp

https://developer.mozilla.org/en-US/docs/CSS/position

Relative positioning
To position an element relatively 20px from the top and left of its normal position, the following CSS is used.

#two { position: relative; top: 20px; left: 20px; }

Note how the other elements are displayed as if "Two" were in its normal position and taking up space.

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document.  In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.  The absolutely positioned element is positioned relative to nearest positioned ancestor.  If a positioned ancestor doesn't exist, the initial container is used.
In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:

#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.  This is often used to create a floating element that stays in the same position even after scrolling the page.  In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:

#one { position: fixed; top: 80px; left: 20px }

When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:




http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

CSS "active" Selector

<div id="centeredmenu">

<ui>
<li><a href="menu1.html" class="active">menu1</a></li>
<li><a href="menu2.html">menu2</a></li>
<li><a href="menu3.html">menu3</a></li>
<li><a href="menu4.html">menu4</a></li>
</ui>
 </div>

-------

CSS

#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000; /* change Hover Color? #6CF */
   font-weight:bold;
}



CSS "active" Selector
http://www.w3schools.com/cssref/sel_active.asp

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

CSS Menus

http://www.cssplay.co.uk/

Menu one

A simple change of border style on :hover.

Menu two
A border style to look like a button.

Menu three
A neon glow menu.

Menu four
A right border change on :hover.

Menu five
Text movement on :hover.

Menu six
Border art to indicate the link on :hover.

Menu seven
Additional link text on :hover.

Menu nine
A shadow added on :hover.

Menu ten
Indented text on :hover.



-------------------------------------------------------------------------------------------------------

CSS Menu Maker

http://cssmenumaker.com/

understanding CSS

Internal & External CSS

INTERNAL css

<!DOCTYPE html>

<head>

<title>using INTERNAL css</title>

<style type="text/css">

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

}

</style>

</head>

<body>

</body>

</html>

EXTERNAL css

<!DOCTYPE html>

<head>

<title>using EXTERNAL css</title>

<link href="css/style.css" type="text/css" rel="stylesheet"/>

</head>

<body>

</body>

</html>

-------

style.css

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

}

Web Font Choice

Web Font Choice {html&css: p. 277~278} 
https://typekit.com
www.fontex.org
www.fontsquirrel.com
www.openfontlibrary.org
------------------------------------
Google Web Fonts: www.google.com/webfonts
Google Developer: https://developers.google.com/webfonts/docs/getting_started

A Designer's guide to Webfonts:
http://www.fontshop.com/education/pdf/webfonts.pdf
------------------------------------

> Example
Textbook: Chap.12 (p.277)

CSS:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive.eot');}
  
 h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}

HTML:

 <h1>Briards</h1>

  <p>The brie is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
  <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep.</p>