Composers Friend
This winter season we launched Alpha Organic Interactive, a games and application division of our little Toronto based company.
Today I am pleased to announce the release of “Composers Friend”, a flash based strategy shooter. I hope you will enjoy this first release. We have plans to launch a new game every month as well we are working with some iphone application concepts for later this year.
Alpha Organic V. 1.0
This is really exciting for us.
We just launched V.1.0 of our website. http://www.alphaorganicmedia.com/v1/html/
Layout With Styles
Note: Please check out other CSS tutorials here if you are new to CSS programming.
- Structuring Your Pages
The Box Model
Changing the Background
Setting the Height or Width for an Element
Setting the Margins and Padding Around an Element
Offsetting Elements In the Natural Flow
Affixing an Element to the Browser Window
Making Elements Float
Controlling Where Elements Float
Positioning ELements in 3D
Setting the Border
Changing the Cursor
Determining Where Overflow Should Go
Aligning Elements Vertically
There are pretty much two ways to layout your webpage, CSS and Tables. In this tutorial we will be learning how to layout a webpage with styles (CSS). A great thing about CSS is that you can create styles that will allow your web page to expand and contract with the size of the browser that is displaying it. This makes your webpage more liquid. CSS will also allow you to apply the exact same style to other webpages in order for you webpages to be more consistent with each other. Nowadays, most browsers will support CSS so I would highly recommend using it.
Structuring Your Pages
If you are using CSS it is because you want to separate the formatting and styling rules from the content of your page. This makes you page look cleaner and frees it other directives that may make your page look more rigid and less flexible.
To structure your page:
Divide logical sections of your page into div elements. A div should look something like this..
<div id="banner">
Make sure you put your div elements in an order that would be most useful to a user who will not be using CSS in there browser. What I mean by this is make sure your page content is in a logical order i.e. title at the top and content under. Also be sure to comment your code!
The Box Model
It is important to note that CSS will treat every element in your page as if it were enclosed in an invisible box. The space surrounding that area (padding), the outside edge (border) and the invisible space around the border (margin). CSS will also allow you to determine the position of each element’s box as fixed or relative to your browser and if some parts are to overlap you can tell CSS which order they should with th z-index.
Changing the Background
When referring to and applying a background in CSS you are actually describing the background of a particular element rather than the entire page.
To use background images type: background-image: then type url(image.gif) where image.gif is the location of the image. Alternatively you can type none for no background image.
To repeat a background image type background-repeat: direction where direction is either repeat (x and y), repeat-x (horizontally), repeat -y (vertically).
You can also control if the background image will scroll with the browser or stay fixed by typing background-attachment: then fixed or scroll.
To specify the positional of the background image type background-position: x y where x and y can be a percentage or an absolute distance.
You can also us left, center or right for x and top center or bottom for y.
To change the background color you can type background-color: color where color is either transparent, color (i.e. red), or a RGB or HEX color code.
The result should be something like this:
#paragraph {background-image: url(http://images4.wikia.nocookie.net/uncyclopedia/images/c/c9/Noodledoodle_bg3.jpg); background-repeat: repeat-x; background-position: center;}
You may also choose just to type background: and specify any of the previous mentioned background properties.
Setting the Height or Width for an Element
This one is pie. To set the height or width for an element type width: w where w is the width of an elements content area and type height: h where h is the height of the elements content area in percentage or absolute values.
#paragraph {width: 75%; height: 200px;}
Note: auto will be used if no width or height is set. Play around with this setting. In block level elements these values can be much different. This will take a bit of trial and error to learn completely.
Setting the Margins and Padding Around an Element
A great thing about CSS is that you can set the margins around any element. The margin is the space between one element and the next in addition to any padding around the element.
To set the element’s margins type margin: x where x is the amount of space you want to surround your element. X can be expressed as a length, a percentage of the width or auto. This is applied to all four sides of the element. You can type i.e. margin-left: x to apply the margin to the one side. This equally applies to right, top and bottom.
The same rules apply to adding padding around an element. The difference is instead of the word margin you will use the word padding.
#sidebar {
margin-top: 10px;
padding top: 1px;
}
Offsetting Elements in the Natural Flow
In addition to having a natural location on your page, a position function in CSS will allow you to move an element relative to this location without affecting any of the surrounding elements.
To offset elements within the natural flow type position: relative. If you like you can also type top, right, bottom, or left. next type :v where v is the desired distance that you want to offset. V values can be an absolute or percentage as well as relative.
.tophead {
position: relative; top: 2.2em;
}
Affixing an Element to the Browser Window
I am sure you have experienced before when browsing other websites, elements that seem to stay fixed on the screen, even when scrolling up and down side to side. But be careful when doing this and make sure your fixed element has a suitable purpose. Some developers do this as a marketing technique but only serves to annoy the user.
To affix an element to the browser window type position: fixed; and if desired you can type top, right, bottom, or left after the semicolon followed by :v where v is the desired distance you want to offset the element.
#sidebar {position: fixed;}
Making Elements Float
With CSS you can make elements in other elements. To make this more clear, which ever element you choose to float the rest of the content will flow to the opposite end.
To wrap text around elements type float: position where position is right or left.
#nav {float: right;}
Controlling Where Elements Float
In order to prevent floating elements from floating next to an element you don’t want it to you can use the clear function.
To do this type clear: then type left to keep elements from floating to the left of the element or right for the same effect on the opposite side. Alternatively you can type both or none.
.par1 {clear: right;}
Positioning Elements in 3D
If you find your elements overlapping because of relative and absolute position you can always choose which element should appear on top.
To position elements in 3D type z-index: n where n is a number that indicates the elements level by number (highest number appearing on top).
#buttons {positions: relative; z-index: 2;}
Setting the Border
You can create a border around an elements and apply a thickness, style and colour to it. Also, if you have specified any padding the border will enclose the content and the padding.
To define the border style type border-style: type where type is either dotted, dashed, solid, double, groove, ridge, inset, or outset.
To set the width of the border type border-width: n where n is the units of thickness.
To set the border colour type border-color: color where color is a colour name or rgb.
You can also type border and -top, -right, -left, -bottom followed -property where property is style, width, or color.
.par1 {border-style: solid;}
Play around with this one, lots of options available.
Changing the Cursor
For the most part your browser takes care of the cursor shape. With CSS you can specify cursor shapes more specifically, i.e. making a hand appear on top of links.
To change the cursor type cursor: then type pointer for a hand, default for the arrow, crosshair for a + shape, move for a + shape with arrows, wait for a sand timer, help for a pointer with a question mark, text for the same pointer you would get in a word program, and progress which is a pointer with a sand timer.
Alternatively you can type auto to get what cursor typically appears and that situation.
a:hover {cursor: wait;}
Determining Where Overflow Should Go
Sometimes elements can get out of hand simply because the box containing them is not large enough or positioning was set absolute. For example you may only want to show one line of images instead of four, so you want to hide the other three. Well there is a solution for that.
To determine where the overflow should go type overflow: then type visible to expand the elements box so everything fits. Or type hidden to hide any contents that appear outside the box. Or type scroll to always add scroll bars to the element so that the visitor can access the overflow if they want. Auto will let you bring up scroll bars only when needed.
p.samples {height: 20px; overflow: scroll;}
Aligning Elements Vertically
This is just a list of aligning techniques using the vertical-align: function.
Basline aligns the elements baseline with the parent’s baseline.
Middle aligns the middle of the element with the middle of the parent.
Sub positions the element as a subscript of the parent.
Super positions the element as a superscript of the parent.
Text-top aligns the top of the element with the top of the parent.
Text-bottom aligns the bottom of the element with the bottom of the parent.
Top aligns the top of the elemenet with the top of the tallest element.
Bottom aligns the top of the element with the bottom of the lowest element.
That concludes this tutorial. Thanks to “HTML, XHTML, & CSS” by Elizabeth Castro for the reference.
For previous tutorial “Format with Style” click here. For next tutorial “Dynamic Effects with Styles” click here (coming soon).
Love Life. Love Learning
I purchased James Bach’s book, “Secrets of a Buccaneer Scholar”, after reading a review from popular blog Gizmodo.
What was so enticing about this book is that James, a high school dropout, became the youngest boss at Apple Computers. I wanted to know how he did it? What was going through his mind? What insane logic could have possibly pushed him into dropping out of high school? And how did he become so successful without any formal academic background?
I later asked myself, “could I have done the same?” This is what I learned…
If you are like me and you dislike/disagree with the school system but are afraid to leave or you think there isn’t any other option. Or if you are told (or you think) you have “attention deficit disorder” (ADD) and this “inhibits” your learning, then this is a perfect read for you.
Through a series of life events, interesting family dynamics, role models and a passion to learn, James discovered ways to inspire himself to learn. As well, throughout his life, James mastered and recorded his “techniques” of learning and describes them thoroughly to the reader. I use the word “techniques” loosely because James’ techniques are really reasons on why you shouldn’t feel guilty for doing the things academics would typically describe as harmful to learning. For example, James explains to the reader how procrastination can in fact be beneficial to the learning experience. The greatest lessons I took from this book is that you have to listen to your mind and not wrestle with it.
James is a story teller and thats why reading “Secrets of a Buccaneer Scholar” is so enjoyable. From beginning to end I found it easy to relate to my own personal experiences with James’. I now understand what it mean to be a Buccaneer Scholar.
Next Series
We are nearing the end of the basic HTML and CSS tutorials. So, instead of moving on to a different topic I have decided to give you the reader, a choice.
And remember, we are always looking for authors to write their own tutorials!
Cheers,
Adrian.
Formatting with Styles
CSS is a much more powerful tool than HTML when it comes to formatting. This tutorial will be looking mostly at formatting text but it doesn’t mean they only work with text. Later tutorials like “Layout with Styles” will continue with more CSS formatting options. To be honest, this tutorial is best for reference, you will be using a lot of these format styles so often they will become second nature.
Here is a list of the topics we will be covering in this tutorial:
Choosing a Font Family
Specifying Alternate Fonts
Creating Italics
Applying Bold Formatting
Setting the Font Size
Setting the Line Height
Setting All Font Values at Once
Setting the Color
Changing the Text’s Background
Controlling Spacing
Adding Indents
Setting White Space Properties
Aligning Text
Changing the Text Case
Using Small Caps
Decorating Text
Find all current special offers on Adobe products.
Choosing a Font Family
The first thing you may want to do when creating your Web Site is to choose the font that you will be using for your body and headlines.
To set the font family type font-family: name, where name is your first choice of font. Here is an example
h1, h2 {font-family: "Helvetica";}
p {font-family: "Arial";}
Specifying Alternate Fonts
There will be some users that cannot view your Web Site with the fonts you have specified so, you may want to provide an alternate font to display your content. You may want to choose a font that is installed with most operating systems like Arial Black or sans-serif.
To specify an alternate font, after typing the font-family: name as described above, type , name2 where name2 is your second font choice. Separate each choice with a comma nd a space like so:
h1, h2 {font-family: "Helvetica", Arial Black;}
p {font-family: "Arial" sans-serif;}
Creating Italics
There are various reasons you may want to include italics in your text. So to create italics first type font-style: followed by italic or oblique. To remove italics type font-style: normal.
h1, h2 {font-family: "Helvetica", Arial Black;}
p {font-family: "Arial" sans-serif;}
.emph {font-style: italic;}
The .emph in this code is referring to the class which would be included within the body of the text like so:
<p>This is the body of the text and <span class= "emph">this is the section I want to emphasize.</span>So cool right?</p>
Applying Bold Formatting
Bold formatting is probably the most common and effective way to make text stand out. To apply bold formatting first type font-weight: followed by bold. You can also type bolder or lighter to use a value relative to the current weight. Try also using multiples of 100 up to 900, 100 being light and 900 bold.
Remember you can also remove bold formatting by typing font-weight: normal.
h1, h2 {font-family: “Helvetica”, Arial Black; font-weight:bold;}
There are generally two ways to set the font size with CSS. The first method would be to give a specific font size like so:
h2 {font-size: 16px;}
In this first method you can also choose to write, but not limited to 1em which would be the same as 16px or use the following keywords: xx-small, x-small, small, medium, large, x-large, and xxlarge.
The second way to set fond size is to set a size that depends on the parent element’s size like so:
h2 {font-size: 1.52em;}
You can also choose to use a percentage like 152%. Relative keywords like larger and smaller will also work in for this case.
Setting the Line Height
Setting the line height is almost the same as setting the line spacing in MS Word. This is a good technique to help make your text more legible on the end users monitor.
To set the line height type line-height: then type n where n is the number that will be multiplied by the element’s font size. An alternative to this is typing p% where p% is a percentage of the font size. OR type a, where a is an absolute value in pixels.
h2 {line-height: 1.5;}
Setting All Font Values at Once
Here is a useful tip to set the font style, weight, variant, size, line height, and family all at one.
First type font:
If desired type normal, oblique, or italic to set the style. (see creating italics)
If desired type normal, bold, bolder, lighter, or a multiple of 100 (up to 900) to set font weight. (see applying bold formatting)
If desired, type normal or small-caps to remove or set small caps. (see using small caps)
Next type the font size. (see setting the font size)
If desired type /line-height, where line-height is the amount of space between lines. (see setting the line height)
Type a space followed by the desired font family or families, in order of preference. (see choosing font family)
Just remember that you can do each of these properties separately and if you decide to put them together that you can omit the the style, font weight, and caps properties. However, the size and family properties must always be explicitly specified (size than family) and the line height, which is also optional, must come after the size and the slash.
Setting the Colour
This is how you would change the color of specific elements on your web page using CSS.
First type color: followed by the color name (see Style Sheet Building Blocks)
h2 {color: #000000;}
It’s pie.
Changing the Text’s Background
When using the background style format you are not changing the background of your Web Page, but you are changing the background of the specified element. In other words you can select what parts of your document you want to highlight with background color.
To change the text’s background color first type background: followed by transparent or color where color is the name of hex color (see Style Sheet Building Blocks).
h2 {background: #90210;}
You can also use a image as the background by specifying an image url rather than a color or transparent like so, url(image.gif). You may also choose to type repeat to tile the image like you would on your desktop wallpaper or type repeat-x (for horizontal tiling) or repeat-y (for vertical tiling). Alternately you can type no-repeat to not tile the image.
If desired, type fixed or scroll to determine whether the background should scroll with the canvas.
One more addition you can have to your style is adding x y to set the position of the background image, where x and y can be expressed as a percentage or an absolute. By default x and y would be the top-left position by you can use values of left, center, and right for x and top, center, or bottom for y.
My way of doing it:
h2
{background: url(http://www.alphaorganicmedia.com/logo.jpg);
background-attachment: fixed;
background-position: center;
}
Controlling Spacing
You can add or reduce space between words, otherwise knows as tracking by typing word-spacing: length, where length is a number with units as in 0.3em or 3px.
p {word-spacing: 0.4em;}
You can add or reduce space between letters, otherwise known as kerning by typing letter-spacing: length, where length is a number with units as 0.3em or 3px.
p {letter-spacing: 0.5px;}
To go back to default use the value normal or 0.
Adding Indents
Adding indents will create a space that will precede the first line of a paragraph. To do this type text-indent: length, where length is a number with units as in 2.1em or 10px
p {text-indent: 1.5em;}
Setting White Space Properties
By default, multiple spaces and returns in the HTML script are either displayed as a single space or ignored completely. If yo want the browser to display those extra spaces use the white-space property.
To set up this property first type white-space: followed by pre to have all white space appear or nowrap to treat all spaces as non-breaking. To go back to default use normal.
p {white-space: pre;}
Aligning Text
You may like to align certain text elements to the left, right, center, or justify.
To align text first type text-align: then type left, right, center, or justify to align the text to your liking.
p {text-align: justify;}
Changing the Text Case
This format property is great for taking an element and capitalizing the first character of each word, transforming all the characters to upper case, or transforming all the characters to lower case.
To do this first type text-transform:
Next type capitalize to put the first character of each word in uppercase.
Or type uppercase to change all the characters to uppercase.
Or type lowercase to change all the characters to lowercase.
Type none to return to default.
p {text-transform: capitalize;}
Using Small Caps
Some fonts have a small caps variant that includes a smaller version of the same characters.
To apply this property type font-variant: followed by small-caps.
To remove this property type font-variant: followed by none.
p {font-variant: small-caps;}
Decorating Text
With style sheets you can apply underlines, overlining, lines through the text, and blinking text.
To decorate text first type text-decoration:
Next use the corresponding properties to apply to your selected element, underline, overline, line-through, or blink.
To remove text decorations type none.
p {text-decoration: blink;}
Is there something wrong with this tutorial? Let me know
Training Videos for Web Designers
That concludes this tutorial. For a list of other CSS tutorials click HERE.
For previous tutorial “Defining Selectors” click here. For next tutorial “Layout with Styles” (coming soon)
Defining Selectors
Defining selectors is the next step before you can go on to create the declarations in CSS with actual properties and values. This tutorial will be going over the most simple and relatively obvious examples in defining selectors.
Constructing Selectors
Selecting Elements by Name
Selecting Elements by ID or Class
Selecting Elements by Context
Selecting Part of an Element
Selecting Link Elements Based on Their State
Selecting Elements Based on Attributes
Specify Groups of Elements
Combining Selectors
Find all current special offers on Adobe products.
Constructing Selectors
The selector determines which elements a style rule is applied to. An example of this is if you wanted to format all p elements you would need to create a selector that identifies just the p elements while leaving the other elements alone. If you want to format the first p in each division with a special indent, you’ll need to create a more complicated selector that identifies only those p elements that is the first element in their division.
A selector can define up to five different criteria for choosing elements that should be formatted:
- The type or name of the element.
h1 {color: red;}
name of desired element
- The context in which the element is found.
h1 em {color: red;}
context
- The class or id of an element.
em.music {color: red;}
name of desired element.class
div#music {color: red;}
name of desired element#id
- The pseudo-class of an element or a pseudo-element itslef. (this will be explained more later)
a:link {color: red;}
name:pseudo-class
- Whether or not an element has certain attributes.
a[name] (color: red;)
name[attribute]
Selectors can include any combination of these five criteria in order to pinpoint the desired elements.
Selecting Elements by Name
The most common way of selecting which elements to format is by name. Here is an example of a script with three headers: (for the purpose of this tutorial and a just a matter of laziness I will be copying a section of our information e-mail package)
<h2>Music Production</h2>
<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>
<h2>Audio/Video</h2>
<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>
<h2>Interactive Media, Web, & Design</h2>
<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>
After adding “h2 {color: red;}" (h2 being the selector) to the CSS: Sample
Selecting Elements by ID or Class
If you have labeled elements with an id or class you can use that criteria in a selector to apply formatting to only those elements.
To select elements to format based on their id:
1. Type #
2. With no intervening space, immediately type id, where id uniquely identifies the element to which you would like to apply the styles.
Here is an example of what this would look like in code:
<div id="music">
<h2>Music Production</h2>
<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>
<h2>Audio/Video</h2>
<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>
<h2>Interactive Media, Web, & Design</h2>
<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>
After adding div#music {color: red;}to the CSS the result should look something like this: Sample
To select elements to format based on their class:
1. Type . (a period)
2. With no intervening space, immediately type label, where label identifies the class to which you would like to apply the styles.
An example of this would be adding em.music {color: red;} to the css identifying all em (italic) elements in the music div (class).
Training Videos for Web Designers
Selecting Elements by Context
In CSS you can pinpoint elements depending on their ancestors, their parent, or their siblings.
An ancestor is any element that contains the desired element (the descendant), regardless of the number of generations that separate them. In other words any generation (or div) following the identified ancestor with the desired element (the descendant) will be affected until that ancestor generation is closed, unlike the previous example.
To select elements to format based on their ancestors:
1. Type ancestor, where ancestor is the name of the element that contains the element you wish to format.
2. Type a space.
3. If necessary, repeat steps 1-2 for each successive generation of ancestors.
4. Type the descendant, where descendant is the name of the element you wish to format.
Here is an example:
<div id="music">
<h2>Music Production</h2>
<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>
<div id="av">
<h2>Audio/Video</h2>
<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>
</div>
<div id="interactive">
<h2>Interactive Media, Web, & Design</h2>
<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>
</div>
</div>
If we add div#music p {color: red;} this would be the result: Sample
If you do not want the formatting to apply to the child generations you can simply add > before the element to ensure only the child elements of the parent. In this case music becomes the parent and p becomes the child, div#music >p {color: red;}
The result: Sample
Sometimes it is useful to be able to slect only the first child of an element. To to this type :first-child following the parent element.
div#music p:first-child {color: red;}
The result should look like: (and I have added another p element for the purpose of this section) Sample
To select an adjacent sibling (a element following the first with the same parent) add a + after the child plus a tag ,where tag is the name of the element you wish to format like so, div#music p+p {color: red;}
The result should be: Sample
Online Tutorials: Web Design, Photoshop, …
Selecting Part of an Element
Sometimes it may come in handy to select only the first letter or first lone of an element and apply formatting to that.
To select first line of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-line like so:
p:first-child
To select the first letter of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-letter like so:
p:first-letter
Selecting Link Elements Based on Their Style
With CSS you can apply formatting to links based on their current state. That is, whether they have been visited or not, or whether the visitor is hovering their cursor on top of the link and more.
To select elements to format based on their state:
1. Type a
2. type : (colon)
3. Type link to change the appearance of links that have not yet been or currently are not being clicked or pointed at. Or..
- type visited to change links that visitor has already clicked.
- type focus if the link is selected via the keyboard and is ready to be activated.
- type hover to change the appearance of links when cursor is hovering over them.
- type active to change the appearance of links when clicked.
Here are the examples in same order:
a:link {color: red;}
a:visited {color: blue;}
a:focus {color: pink;}
a:hover {color: purple;}
a:active {color: yellow;}
Selecting Elements Based on Attributes
With CSS you can also apply formatting to those elements that have a given attribute or attribute value.
1. To select element, where element is the selector for the element whose attributes are in question. (i.e. div).
div
2. Type [attribute, where attribute is the name of the attribute that an element must have to be selected. (i.e. class)
div[class
3. At this point you can choose to type ="value", if you want to specify the value that the attribute must have for its element to be selected. (i.e. music)
An alternative would be to type ~="value", to specify a value that the attribute can contain for its element to be selected. Or type | (the pipe symbol) ="value" to specify that the attributes value in order for its element to be selected. But for the purpose of this tutorial we will stick to the more simple value.
div[class="music"
4. Close with ].
div[class="music"],{color: red;}
The code and the result should be.
<div id="music">
<h2>Music Production</h2>
<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>
<div id="av">
<h2>Audio/Video</h2>
<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>
</div>
<div id="interactive">
<h2>Interactive Media, Web, & Design</h2>
<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>
</div>
</div>
Specifying Groups of Elements
As a web developer you will most likely want to apply the same style rules to more than one element. So, instead of reiterating all the same styles for different selectors you can group your selectors together.
To apply styles to groups of elements
1. Type selector1, where selector1 is the name of the first element that should be effected by the style rule.
2. Type a , (comma).
3. Type selector 2, where selctor2 is the next element that should be affected by the style rule.
4. Repeat until you have typed all the selectors you want and then type your style rule.
The result should look like this:
h1, h2 {color:red;}
With this code:
<div id="music">
<h1>Music Production</h1>
<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>
<div id="av">
<h2>Audio/Video</h2>
<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>
</div>
The result should be: Sample
Combining Selectors
Finally, in CSS you can combine any of the techniques that I’ve explained in order to pinpoint the elements that you’re interested in formatting.
To combine selectors:
1. Define the context of the desired element. (see Selecting Elements by Context)
div.music
2. Next, spell out the element’s name or use the wild card character (see Selecting Elements by Name)
div.music p
3. Then, specify the class or id or the desired element(s). (see Selecting Elements by ID or Class)
div music p em:
4. Next, specify the psuedo-class or psuedo-element. (see Selecting Part of an Element and Selecting Links Elements Based on Their State)
div music p em:first-letter
5. Finally, specify which attributes and values must be present for the element ot be selected. (see Selecting Elements Based on Attributes)
div music p em:first-letter {color: red;}
The Best Deals on all of your Electronic Needs from TheNerds.net!
That concludes this tutorial. For a list of all CSS tutorials click here.
For previous tutorial “Working with Style Sheets” click here. For next tutorial “Formatting with Styles” click here
Is there something wrong with this tutorial? Let me know
Triple Boot Macbook
BEFORE STARTING, READ THESE THREE ITEMS:
- at many reboot steps, you need to hold down the c key to give you your boot options of hdd’s or dvd’s
- to work out a few driver issues in Windows (for older versions of OSX), use boot camp (free from apple) to create the windows drivers cd but DO NOT use it to partition your drive or any of that other jazz. Just make the cd which you’ll need later. If you have a later version of OSX all the drivers should be on your OSX install disk which you can put in after booting into your new OS.
Find all current special offers on Adobe products.
Lets begin!
1. Make sure you have OSX installed on your macbook. I should not have to tell you this.
2. Run the following diskutil resizeVolume command (with a leading sudo command) in the osx terminal (according to your hard drive size) which resizes your osx partition and adds 2 others with the windows partition last (osx: hfs linux: linux windows: ms-dos fat32…will be converted at Windows install) So, run it like the following (except you’ll need to split up the sizes according to “YOUR” hard drive… and don’t go over):
(before running this command, check the list of partitions.
disk0s2 is most likely the main partition name. To find out type: ‘diskutil list’ and verify the name as well as the fact that there should be one EFI partition (disk0s1) and then your OS X partition(disk0s2)
(after it does its thing… run “diskutil list” again to verify that it worked right)
- Download Gparted from this link http://gparted.sourceforge.net/download.php and burn the image to disk. If the link is expired just Google Gparted and download the image from another site. (If you are unsure how to burn an image to disk you are probably not ready for this tutorial, but check if I have made a tutorial on burning images to disk.)
- Boot into Gparted by holding down the c key on your keyboard when starting up. Follow the onscreen instructions.
- Once you are in the GUI (graphical user interface) of Gparted you can now see all your HDD’s and partitions. Now you can resize your OSX partition and create new ones. Resize your OSX partition to your liking and create an NTFS partition at the end on the HDD and a ext2 partition in the middle. (Windows can only be booted from the last partition.)
3. (while pressing c) Reboot with the Windows DVD in the drive. Install windows on the correct partition(should be sda4 or hda4) Don’t worry if Windows doesn’t finish all the way or won’t boot all the way yet. Just get as far as you can in the installation and then go to the next step. Preferably you get a chance to boot into Windows to make sure it is working.
4. (while pressing c) Reboot and install Linux OS from the dvd of your choice. Make sure it’s also installed on the right partition and during installation, install the grub bootloader when it asks. Make sure grub is installed on the linux partition and NOT the base of the hdd (for example: sda3 instead of sda)
6. Don’t worry about any problems with Fedora not working perfectly either because Windows and Linux OS most definitely won’t work or boot yet due to a range of problems between file systems, boot loaders, operating-system greediness and so on…(Unless you have installed rEFIt already which is how I did it, but other suggest to do it later. I don’t see the harm in installing it earlier in lets say step 0. This way you will have the choice of booting into Windows right away to see if it works otherwise…)
7. Boot into OS X and download a program called rEFIt and extract the files to the root directory in OSX (for example: Macintosh HD, just put the “extracted” files right in there and then…
8. The new version of rEFIt will install itself (reboot after install and see if you get the boot menu) otherwise…open up the terminal (still in osx) and cd into /efi/refit directory and then run ./enable.sh, it will ask for your password and bam, you have the refit boot screen loader for your mac making it possible to see all your installed partitions at startup (by pressing the alt/option key and selecting the rEFIt logo) and OS’s (even though they’re not all working yet)
If you can not boot into any operating system yet from rEFIt: (or if you can at least boot into Linux OS skip to 19)
9. (while pressing c) Boot into the Linux OS DVD and run the command “linux rescue” Get to the prompt (skipping the disk check and the ethernet setup)
10. Once at the prompt, chroot to /mnt/sysimage
11. cd into /boot/grub and type: cp grub.conf grub.conf.backup(for a backup) and then type: nano grub.conf
12. In nano, add the following at the bottom(and don’t save just yet):
title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1
(this is where the magic occurs allowing grub to point to the windows MBR on boot… but we’re not done)
13. Make a few other minor changes to what was there already in the file – just make sure your grub.conf file matches this and you should be ok:
# grub.conf generated by anaconda
#
# Note that you do not have to rerun grub after making changes to this file
# NOTICE: You have a /boot partition. This means that
# all kernel and initrd paths are relative to /boot/, eg.
# root (hd0,2)
# kernel /vmlinuz-version ro root=/dev/VolGroup00/LogVol00
# initrd /initrd-version.img
#boot=/dev/sda3
default=0
timeout=50
color white/blue
foreground ffffff
background 0639a1
splashimage=(hd0,2)/grub/splash.xpm.gz
#hiddenmenu
title Linux OS
root (hd0,2)
kernel /vmlinuz-2.6.18-1.2798.fc6 ro root=/dev/VolGroup00/LogVol00 rhgb quiet
initrd /initrd-2.6.18-1.2798.fc6.img
title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1
14. Ctrl-x and confirm with ” y ” to overwrite the existing file
15. Go back to root ( cd / ) and type: fdisk /dev/sda (that’s a space after fdisk)
16. Enter option: ” t ” … and then partition number ” 4 ” (the windows partition number) and then the id number ” 7 ” (which changes the Windows partition to an HPFS/NTFS partition id) Then type ” w ” to write the changes to the drive – This will save you from a windows booting error when the filesystem ID’s clash -
17. Type exit twice to reboot
18. (while pressing c) Reboot and DO NOT ENTER THE rEFIt MENU and then… eject the linux OS dvd and insert the windows dvd.
This is all I had to do to make it work:
19. Boot into the windows dvd and after choosing the language, click on “repair” instead of install and just follow each step. It will automatically find a windows startup problem and fix it automatically (if it doesn’t detect the OS or the problem the 1st time, reboot and do it again…it didn’t detect the problem the first time on mine…if it does on yours…kudos!)
20. After windows is repaired and the computer restarts, take out the DVD, select the rEFIt menu, and if you did everything correctly (and in the right order)…choose any OS and VOILA! You should have a triplebooting machine!!!
For older OSX versions:
~ And now, for those windows drivers from the cd you made. This can be a little tricky but pretty necessary if you want Windows to be totally functional with your mac. First, put in the drivers cd and start the installation. It will then begin to install all the necessary files and drivers into a directory but then… the installation will fail (at least it did on mine several times) So what you must do is snatch the folder full of drivers before it quits. Luckily, Windows stops at the end of the drivers installation and asks for some kind of verification on something. That is the window of time to go to Program Files (assuming you know where that is) and then copy and paste the “macintosh drivers” folder that it installed to your desktop. After the verify window is closed, it fails and rips back all those files, but if you did it fast enough, then you’ll have a copy on your desktop. Then you simply go into the Device Manager and update any drivers you want in there. I also looked through the whole folder and installed anything that looked necessary (if it wasn’t compatible then it wouldn’t let me). Sometimes it would say, “do you want Windows to re-install that software with the recommended settings” and i’d just say yes and let it do its thing. But, it’s your computer and you can do it any way you please.
Training Videos for Web Designers
Other things worth mentioning:
- Linux OS will automatically install everything pretty nicely except for your wireless adapter, ACPI (sleep mode), and other little things, use the updater or other resources online to fix Linux OS the way you want them.
Many thanks to: http://tripleboot.is2.byuh.edu/
Is there something wrong with this tutorial? Let me know
How to Restore MBR in Windows 7
I have decided to post this tutorial because I have an itch to constantly change the partitions on my hard drive and installing new and different operating systems. So if you are like me you will want to know how to restore the MBR or Master Boot Record.
Lets begin!
The MBR holds information regarding the number of partitions in the hard disk, starting point of the OS and so on to help the processor to start correctly each time it is turned on. This makes sure that the processor always starts processing from the correct fixed position. Thus it helps in bootstrapping the system. Restoring the MBR will help you in booting to Windows 7 if you have been dual booting with Linux, or if you are like me triple booting or quad booting with plenty of other OS’s and want to remove it now.
To accomplish this follow these steps.
1 ) Insert Windows 7 DVD and boot to it
2 ) Select the desired language in the first boot screen and click Next button
3 ) Select the option “Use recovery tools that can help fix problems…..” option and click Next button
4 ) In the System Recovery Options window click Command Prompt link
5 ) You will be in the prompt X:\Sources>. Type D: and press Enter
6 ) Type DIR and press Enter key
7 ) See if there is a directory named boot
8 ) If the boot is not present then switch to E: drive and repeat steps 6 and 7 above for E: until you find the boot directory. Repeat this step for other letters of your drive until you find boot directory.
9 ) Once boot directory is found type CD boot and press Enter key
10 ) You will be switched to boot directory i.e. E:\boot>, for example.
11 ) Type bootsect /nt60 SYS and press Enter key
12 ) Wait till the process is successful
13 ) Type exit and press Enter key
14 ) Now click Shut Down button in the System Recovery Options window
15 ) Restart your system to Windows
It is important to note that this technique is similar for fixing the MBR is all windows systems using the windows install or recovery disk.
Many thanks to: http://www.itechtalk.com/thread6519.html
Is there something wrong with this tutorial? Let me know
Foundations of Programming with C: Lesson 1
Welcome to programming with C. This tutorial is the first of many to come in C programming and is important to learn for the foundations of other programming languages, mostly for the syntax and logic of programming with computer languages.
Before we begin lets talk about what tools we will need a compiler. You can Google c compiler to find any but I recommend Borland C++ compiler. Be sure to read the instructions on how to use this program as I will not be referring to any specific program how how to compile and execute.
Lets begin.
Lesson 1: First C Program
Usually when using a compiler program and opening a new C file you will be given:
# include <stdio.h>
main()
{
printf("Hello, world\n");
}
This is a C program that displays one line. “Hello, world!”
The first line in this program is #include <stdio.h> is the code that will tell the following function where to find the library of all the definitions the program will be asking for. This declaration is important because without it your program will not function.
The next section main() declares where the main part of the program begins. (note the main is spelled all in lower case, all programs written in c are case sensitive.)
Next lets look at the printf(“Hello, world\n”); line. Here we learn that in proper C syntax you typically end a statement with a semi-colon (;), in contrast to the English language where you would end a sentence with a period(.). This particular statement is a printf statement, which in C means that something is to be displayed. In other words printf is telling your computer to create an output on to your screen or “print” on to your screen. It is unsure to what the meaning of the f at the end of the statement means. Some speculate that it means you have some control over the format of what gets displayed where others say it is there just to make the program look more intimidating!.
The bracket after the printf contains the data that is to be displayed. In this case the data is contained within double quotation marks (“), which is used to tell the C compiler that what is between the quotes is not C, but a bunch of characters to be displayed, or a character string.
The \n at the end of the character string is an technique for including special characters that are not part of the output. These special techniques always begin with a backwards slash (\) and are followed by one or more characters. In this case, the special character \n is called the newline character and causes the display to advance to the beginning of the next line.
Here is a list of some other commonly used characters:
\a – beep (a stands for “alarm”)
\b – backspace
\f – form feed (usually only affects printer output)
\t – go to the next tab stop (usually every 8 columns)
\\ – output backslash
Why don’t you try out these other special characters and also adding a second printf function that will display “This program was made by yourname”. Keep trying until it works out.
Click here for sample executable
Click here for source code
Click here for next lesson: Input, Output, and Variables (coming soon)
Is there something wrong with this tutorial? Let me know
