So you’ve designed some sweet rollovers in Photoshop, and you want to use rollover images in your navigation. You’re committed to the image, so simple a:hover styles aren’t going to work. However, building on concepts we have already learned, we can build kick-ass hovers without having to use complex Javascripts.
Posts Tagged ‘css’
CSS powered image rollovers
Wednesday, October 28th, 2009Posted in Web Design |
The Anatomy (and Rules) of a CSS Rule
Monday, September 14th, 2009There are two distinct elements to a CSS rule: the selector and the declaration.
- The selector describes the element controlled by the rule, which can be an HTML tag, an ID, a class, or basically anything else that can be controlled using cascading style sheets.
- The declaration tells the browser what should happen to the selected element. The declaration always follows the selector, and is surrounded by brackets: { declaration }
For the following example, the body tag is being selected, and the rule is declaring that the background color be black.
body { background-color: #000000; }
Inside the declaration, there are two elements separated by a colon (:)
- the property, in this case background-color
- and the value, in this case #000000, or black
Although Dreamweaver is going to write our rules for us, it is important to understand how the rule is structured, in case you need to be able to read rules designed by someone else later in the semester.
There are also some rules, wait – let’s call them guidelines, to remember when writing CSS rules.
- Try to only use letters and numbers. Keep numbers to a minimum.
- Use lowercase letters, but mimicking “Object Oriented Code” conventions is common. Often, capital letters are used to denote separate words, as in newsBox or leftNavigation
- No spaces allowed. Spaces mean something, so don’t use them simply to separate words.
- No punctuation allowed. You may use an underscore to simulate a space. As you will soon learn, certain punctuation marks and symbols characters have definite meaning in CSS rules.
- Use classes sparingly. Classes should be used for nitpicky rules, or for tweaking existing rules. Don’t clutter up your style sheet with a ton of classes.
- If something doesn’t work, relax. Stop. Take a deep breath. Look at the CSS and document structure again. CSS rules follow pretty strict logical structures. They will do exactly what they are told, but it’s possible that two rules are giving competing instructions. Use the Firefox Web Developer add-on to troubleshoot your CSS.
Posted in Web Design |
Redefining HTML tags with CSS
Monday, September 14th, 2009As we discussed in our first lecture looking at HTML code, all HTML tags have a default set of visual rules defined by the browser. A significant part of Web design is redefining those rules so those HTML tags look good, even damn good, in our sites.
The example we used in class was to look at the common paragraph, or p tag. Paragraphs unless told otherwise, are black, left aligned, 100% wide (as defined by their enclosing element), have a margin in between them, are displayed in Times or Times New Roman, and are 16 pixels (1 em) tall.
It is quite easy to write the selector for an HTML – just write the name of the tag:
p
The above tag will control all paragraphs on the page. To be honest, you will likely find it much more practical to use contextual selectors to redefine most HTML tags.
Posted in Web Design |
CSS divs and IDs
Monday, September 14th, 2009Div tags are the basic page layout element we are going to use to design our Web site. Each div can be given a unique identifying code, so that it can easily be controlled by a CSS rule. When using ID to control divs, you should remember that only one div with a given ID should appear on each page. If you already have a div “#container” on a page, do not add another div with the same ID.
Selectors for divs with an ID are written beginning with a pound sign: #
#container
Once a div has a rule defining it’s size, placement, color, etc, additional layout elements can be placed inside the div – much like a picture or text box in InDesign.
A good rule of thumb when using divs is to minimize the number of divs used on the page. Order the divs in a logical manner (such as header, then navigation, then content, then footer) and then use CSS rules to control their placement and appearance.
Posted in Random Stuff |
Contextual Selectors
Monday, September 14th, 2009Once you have created ID elements on your page, you will probably place additional elements in content inside these IDs. Contextual selectors allow you to control elements inside specific IDs.
Let’s say you defined all p tags to be Arial, size 12, black. However, you have a dark blue div (ID = sidebar) to hold navigation and news on the left side of the page, and the paragraphs inside the news box are showing as black text in a blue box – basically unreadable. You can create a style for the following rule:
#sidebar p
The space between #newsBox and p refers to the fact that the paragraph is inside the newsBox. You essentially read the rule backwards from right to left:
- p controls all paragraphs;
- space means inside of;
- #sidebar refers to the div with ID sidebar
Spaces mean something in CSS rules, so be sure to use them in the proper context. Pun intended.
Posted in Random Stuff |
Need two columns? Float those divs!
Monday, September 14th, 2009Divs want to display “block” style, meaning they want to sit atop one another. If you want them to work as two columns, you need to set them both to float.
What is a float? Well, the easiest analogy is that floated items allow content placed after them in the code to “wrap” around the floated item. If you have used InDesign, you have probably set the “Text Wrap” characteristics for a photo, allowing text to wrap around one side of the photo in question.
Floating is basically the same thing. By floating a div, you force the next div in the code to wrap around the floated div. In order to create two true columns, you must set them both to float.
Float property in Dreamweaver CSS Rule window.
Depending on your layout, you can choose to set them to float to either the left or the right. Web designers will often set them both to float the same direction, to control the space between columns more efficiently.
For an example using the Sequoia exercise, watch the video below:
Posted in Podcast, Web Design |
Link Pseudo-Classes
Sunday, September 13th, 2009There are 4 “states” of links that you need to worry about when creating pseudo-classes: link, active, hover and visited.
That being said, take some time to think about how you actually want your links to behave in a given div before you define the pseudo classes. Do you actually want the links to get darker when visited, or do you want them all to remain the same color? If you are working with your primary navigation, you probably don’t want the links to have a “visited” style.
Because I’m a huge fan of making things simpler, I almost never define all four pseudo-classes.
Writing a pseudo class is easy, you simply add a “colon” and the pseudo class state directly after the “a” tag in a selector. For instance, for links in a content div, I would start with a rule for:
#content a
The above rule will define how all four states behave, because I defined the “a” tag, and did not specify a pseudo-class. If I want a rollover for the link, I can also define
#content a:hover
and change any attributes that change when the mouse hovers over the link. Adding rules for “a:visited” or “a:active” will (respectively) define link states that activate when the browser can see a page in the user’s history, or when the mouse button is down.
Posted in Web Design |
The Box Model
Tuesday, August 18th, 2009It’s essential in CSS design to understand the box model. Basically, the box model defines how margins and padding affect the placement and size of an element on the page.
In short, you can create a space outside the element using margins. With a margin on the top of an element, we can push it down from it’s default position.
Inside the box, padding is used to create space between the edges of the box and the content it holds. Be careful, as horizontal padding actually increases the width of the box. When you define a width, you are actually defining the size of the content within the box – when horizontal padding is added, the overall box size expands, while the set width for content remains the same.
Posted in Web Design |
The Universal Selector
Tuesday, August 18th, 2009The universal selector is a very powerful rule you can create in a cascading style sheet.
Basically, whatever declarations you make in a universal selector are applied to every element of a Web site, unless a more specific rule is written. Therefore, you want to be really careful how you use the universal selector.
From a coding standpoint, it couldn’t be easier to write the rule. Just like when you perform a “wild card” search on a computer, you use an asterisk for the universal selector.
*
That’s it. Just add declarations to that rule, and you’re off.
Now for the fun part. I would recommend only doing the bare minimum with this rule. Pick a font. That’s about it. Any color, size, etc, declarations you make are going to be applied to the entire page.
Posted in Web Design |