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.
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!
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.
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.
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.
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;
}
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;
}
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;}
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;}
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;}
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;}
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.
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;}
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;}
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).
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 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.
Selecting Elements by ID or Class‘>
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 Part of an Element‘>
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 Elements Based on Attributes‘>
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>
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
This tutorial will teach you how to create a style sheet file, and then apply that style sheet to an individual element, a whole web page, or an entire web site. This tutorial will also guide you to the appropriate tutorials that will show you how to define and format a style sheet.
Creating an External Style Sheet
Linking External Style Sheets
Offering Alternate Style Sheets
Creating an Internal Style Sheet
Importing External Style Sheets
Using Media-Specific Style Sheets
Applying Styles Locally
The Inspiration of Others:CSS
Creating an External Style Sheet
An external style sheet is great for giving a common look amongst the pages of your web site. You can define these styles in a style sheet and then tell each page of your site to consult with this external style sheet to ensure that each page will have the same look.
The first step in creating an external style sheet create a new text document or if you are using a web development software tool like Dreamweaver, open up a new CSS file.
Find all current special offers on Adobe products.
The next step will be to define the style rules for your web pages as described in these tutorials:
Defining Selectors
Formatting with Styles
Layout with Styles
CSS for Handhelds (coming soon)
CSS for Printing (coming soon)
Once you have defined your style rules you can then save your document with the extension .css
Linking External Style Sheets
The simplest way to apply a style sheet’s rules to a web page is to link to the style sheet.
To link an external style sheet first type <link rel=”stylesheet” type=”text/css” where text/css indicates that the style sheet is written in CSS, in the <head> section of your page. Next type href=”url.css” where url.css is the name and location of your style sheet. Finally close the tag with />.
Here is one example:
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />
Now your style sheet is linked to your web page.
Offering Alternative Style Sheets
You can link more than one style sheet and let visitors choose the styles they like best. This allows for a default/base setting style sheet with rules that will stay consistent and then a preferred style rule which is applied regardless of choice and then a alternate style sheet setting which the visitor can choose from that will change over from the preferred style rule.
To offer alternate style sheet first designate the style that should be used as the base, regardless of the visitor’s preferences as described in the heading above, Linking External Style Sheets.
Next you want to designate the preferred style sheet which will contain only the style rules that will be changed by the alternate choice. To do this add title=”preferred.css” where preferred.css is the name of the style sheet rule. Do the same for the alternate style sheet except change “rel=”stylesheet” to “rel=”alternate stylesheet” again adding title=”alternate.css” where alternate.css is the name of the alternate external style sheet. Here is an example.
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="black borders" />
<link rel="alternate stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="no borders" />
The visitor can now select from his/her browser from the view drop down menu which style sheet they would prefer to use.
Creating Internal Style Sheets
Internal Style sheets let you set the styles at the top of the HTML document to which they should be applied. This method is only useful if you do not plan on using the same style sheet more than once.
To create an internal style sheet, in the head section of your HTML document type, <style type=”text/css”> Then define as many style rules as desired as described in Intro to CSS. After all the style rules of been defined close the internal style sheet with </style>. Here is one example.
<style type=”text/css”> img{border:4px solid red;} </style>
It is important to realize that internal style rules will override any external style rules if the style tag comes after the link tag that links the external style sheet to the HTML document.
Importing External Style Sheets
One quick tip on using internal style sheets is to also import an external style sheet into an internal style sheet by typing @import”external.css”; where external.css is the name of your external css, into the style tag. But be sure not to use the import function after any other style rules.
Using Media-Specific Style Sheets
You can designate a style sheet to be used only for a particular output. The three main outputs you may want to consider is screen, print, and handheld.
To designate media-specific style sheets add media=”output” to the opening link style tags, where output is one or more of the previously mentioned outputs. Be sure to separate the values with commas. Not defining a media output will leave the css default output to all.
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
You can apply the output rule with the import rule by adding the output following the url/name of the style sheet being imported like so.
<style>@import “lightbox.css” screen;</style>
Applying Styles Locally
Applying styles locally is an easy, small scale and safe way to apply style rules to your web page. This method is easy for editing however, it does not provide a centralized way of formatting your entire web site.
To apply styles locally type style= within the HTML tag that you want to format, whether it be the HTML tag itself or the img tag, td tag, and so on. Create a style rule without curly brackets or a selector. The selector isn’t necessary since you are placing it directly inside the desired element. To create additional style definitions type a semicolon ; after each definition and repeat. Type the final ” mark to close the style. Your local style should look something like this.
<td style="font-family: HelveticaNeueLT Std; font-size:14px">
It is also important to note that all local style rules will override any external linked or imported style rules.
Training Videos for Web Designers
The Inspiration of Others: CSS
By viewing the source code of a web page you can look and see how others have created their style sheets. This is something I do often to help me create my own style sheets from other style sheets a come across that I feel are very inspiring.
To view other designers’ CSS code first view the page’s source by going to view > page source on your browser. If the CSS is local/internal that you can see the CSS right away. If the CSS is linked externally you can copy the url of the CSS file shown in the link element or the import rule. Once you have copied the address of the style sheet paste this url into your browsers address box and hit enter. If the style sheet address is relative you may have to rebuild the url by combining the page’s url with the style sheets url.
Here is a sample of an HTML e-mail we are putting together for broadcast e-mailing. “Email V2″
Click here for previous tutorial: Intro to CSS
That concludes this tutorial. For a list of other CSS tutorials click HERE.
Is there something wrong with this tutorial? Let me know
**Before attempting CSS I would advise any reader to review and learn some basic HTML which you can find here.**
Constructing a Style Rule
Adding Comments to Style Rules
When Rules Collide
A Property’s Value
CSS Color
CSS (Cascading Style Sheets) helps define the appearance of your web site. It is the next step in web site design where HTML can only give you a basic structure.
A style sheet is a page of code that contains one or more rules that determine how certain elements in your web page should be displayed. CSS works with properties and values to do this and will contain most formatting functions of your web site. CSS also contains dynamic properties which allows items on your web page do appear and disappear and is useful for creating drop down menus and other interactive components.
CSSs are created outside the web page meaning they are a seperate document (.css) that can be used for multiple pages on your website. So lets begin.
Constructing a Style Rule
There are two parts to a style rule, first the selector and second the declaration. The selector will tell which elements are to be affected by the rule and the declaration will specify what should be done.
To construct a style rule first type the selector which could be something like h1, then type a { to open up a declaration and type a property then value like this, {color: blue; (spaces and final semi-colon are optional). If you want you can type more property values following the semi-colon like this, color: blue; background: white; then close the declaration with }. The product should look something like this:
h1 {color: blue; background: white;}
Adding Comments to Style Rules
I would highly recommend adding comments to your style sheet to help keep things organized. It is easy to get confused on what rules are being applied to what elements. To add comments to style rules simply type /* to begin your comment and the type */ to end the comment. The product should look something like this:
/* Color rule for the h1 header element*/
h1 {color: blue; background: white;}
When Rules Collide
In some cases you can include a style right in your HTML code and apply then to any element such as the <p> element by inserting it at the top of your HTML code and well as importing the styles from an external document. Some styles are then inherited from parent element to child element.
A parent to child situation occurs when you have more than one style rule that applies to a given element. CSS uses the principles of cascading to take in characteristics such as inheritance, specificity, and location to determine which style rules will win.
To begin we will first look at inheritance. To describe how inheritance works with CSS the best way will to use an example. If we were to create a style rule with a selector p and we gave the rule a property value of the color red, all p elements will then be red and all decedents of the element will then also be red, such as <em> elements within the p element. There are also properties that will not be inherited and I will be creating a list of CSS properties and values soon to describe them all.
Second is the law of specificity that states, the more specific the rule the stronger the rule is. Example, if the p rule states that all p elements be red but a second rule states that all p elements with a class of bio be blue that the second rule will override the first. Style rules can get more specific with id attributes which is considered the most specific as an id can be used only once.
Third is the law of location of the rule. In the case of competing rules, location could break the tie because rules that appear later in the document will be stronger and will apply to all elements following it. This is especially true when applying style rules directly in your HTML document. If that is not enough you could always add !important at the end of a rule to override the whole system.
A Property’s Value
Each CSS property has differnt rules about what values it can accept. Some properties can accept relative values, percentages, URLs, or colours while others can only accept a list of pre-defined values. These values will be discussed in later tutorials but for now I will describe the basics of these systems here.
Inherit
You can use the inherit value for any child property you want to have the exact same property as the parent
Predefined Values
Most CSS properties have a few predefined values that can be used. For example, the display property can be set to block, inline, list-item, or none. Also, these values do not need to and must not be enclosed in quotation marks.
Lengths and Percentages
Many CSS properties such as font-size take a length or percentage value. All length values must contain a quantity and unit like 3em or 10px, the only exception being 0. Some length types are relative to the other values such as em which would mean “twice the font-size”. Pixels are relative to the resolution of the monitor. Of course their are also absolute values such as, inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc). It is advised that absolute values are used only when the size of the output is known.
Bare Numbers
A very few CSS properties accept a value in the form of a number without a unit. The most common being line-height and z-index, but are typically not well supported.
URLs
Some CSS properties allow you to specify the URL of another file. In this case the style rule will contain url(file.ext) where file.ext is the path and name of the desired document. The product should look like this:
background: url(http://www.alphaorganicmedia.com/images/logo.jpg)
Quotation around the file name could be used but are not necessary.
CSS Colours
There are several ways to specify colours for CSS properties. The first we are pretty familiar with which are the 16 predefined colours but these colours are usually not enough.
Instead you can construct your own colours by specifying the amount of red, green, and blue (rgb). To do this you could specify the rgb values with percentages or numerical values (1-255)l of which can be determined by finding out what a taking a percentage of red, green, or blue and finding out what numerical value it is from 255. For example 35% of 255 is 89 so your property should look something like this:
rgb(35%, 0%, 50%)
or
rgb(89, 0, 127)
The best way however, would be to convert these values into hexadecimal format and add # in front and the result should look like #59007F. I won’t get into specifics of hexadecimal because actually I don’t know much about it except that 59 is the hexadecimal equivalent to 89, 00 is the hexadecimal equivalent to 0, and 7F is the hexadecimal equivalent to 127. And if you have three pairs such as #ff3344 you can abbreviate it into #f34. Instead I just open up Photoshop to find the colours I want and copy the hexadecimal value of that colour into my CSS value.
Training Videos for Web Designers
Click here for next tutorial: Working with Style Sheets
That concludes this tutorial. For a list of other CSS tutorials click HERE.
Is there something wrong with this tutorial? Let me know
