Css Tutorial
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 4,129
- Pages: 21
•
Introduction
•
CSS Syntax
•
CSS Selectors
•
Where to Place It
•
CSS Text
•
CSS Colors
•
CSS Font
•
CSS Border
•
CSS Margin
•
CSS Links
•
CSS Layers
•
CSS List
•
CSS Cursors
CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.
How it works: A
style is a definition of fonts, colors, etc.
Each style has a unique name: a The
selector.
selectors and their styles are defined in one place.
In your HTML contents you simply refer to the
selectors whenever you want to activate a certain style.
For example: Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.
Compare the following examples of a simple table: Classic HTML
With CSS (assuming that a selector called subtext is defined)
While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML.
With CSS, you will be able to: define the look of your pages in one place rather than repeating yourself over and over again throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!)
easily change the look of your pages even after they're created. Since the styles are defined in one place you can change
the look of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!)
define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML.
position the content of your pages with pixel precision. redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS.
define customized styles for links - such as getting rid of the underline. define layers that can be positioned on top of each other (often used for menus that pop up). Your pages will load faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.
The one disadvantage is:
these will only work on version 4 browsers or newer. However, more than 95% of all browsers live up to that.
Syntax: The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value} The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"} Note: If you wish to specify more than one property, you must separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red} To make the style definitions more readable, you can describe one property on each line, like this:
p { text-align: center; color: black; font-family: arial }
Grouping: You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be green:
h1,h2,h3,h4,h5,h6 { color: green }
Class Selector: With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right} p.center {text-align: center} You have to use the class attribute in your HTML document:
This paragraph will be right-aligned.
This paragraph will be center-aligned.
Note: Only one class attribute can be specified per HTML element! The example below is wrong:This is a paragraph.
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:.center {text-align: center} In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
This heading will be center-aligned
This paragraph will also be center-aligned.
Do NOT start a class name with a number! It will not work in Mozilla/Firefox.id Selector: With the id selector you can define the same style for different HTML elements. The style rule below will match any element that has an id attribute with a value of "green":
#green {color: green} The rule above will match both the h1 and the p element:
Some text
Some text
The style rule below will match a p element that has an id with a value of "para1":p#para1
{ text-align: center; color: red }
The style rule below will match any p element that has an id attribute with a value of "green":
p#green {color: green} The rule above will not match an h1 element:
Some text
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.CSS Comments: You can insert comments into CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
Selectors are the names that you give to your different styles. In the style definition you define how each selector should work (font, color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles. For example: <style type="text/css"> B.headline {color:red; fontsize:22px; font family:arial; textdecoration:underline} This is normal bold
In this case B.headline is the selector. The above example would result in this output:
This is normal bold
This is headline style bold There are three types of selectors: HTML selectors Used to define styles associated to HTML tags. (A way to redefine the look of tags)
Class selectors Used to define styles that can be used without redefining plain HTML tags.
ID selectors Used to define styles relating to objects with a unique ID (most often layers)
The general syntax for an HTML selector is: HTML selectors {Property:Value;}
For example: <style type="text/css"> B {fontfamily:arial; fontsize:14px; color:red} This is a customized headline style bold
HTML selectors are used when you want to redefine the general look for an entire HTML tag. The general syntax for a Class selector is: .ClassSelector {Property:Value;}
For example:
<style type="text/css"> .headline {fontfamily:arial; fontsize:14px; color:red}
Class selectors are used when you want to define a style that does not redefine an HTML tag entirely. When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline").
SPAN and DIV as carriers
Two tags are particularly useful in combination with class selectors: <SPAN> and
or
| THIS IS LAYER 1 POSITIONED AT 100,100 |
POSITIONED AT 140,140
ID selectors are used when you want to define a style relating to an object with a unique ID. This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID. Grouped Selector
Most often selectors will share some of the same styles, for example, being based on the same font. In these cases, rather than defining the font for each and every selector, one by one, you can group them, and thus assign the font to all the selectors at once.
Look at this example, made without grouping: .headlines{ fontfamily:arial; color:black; background:yellow; fontsize:14pt; } .sublines { fontfamily:arial; color:black; background:yellow; fontsize:12pt; } .infotext { fontfamily:arial; color:black; background:yellow; fontsize:10pt; }
As you can see, the only style that varies is the font-size. In the next example we have grouped the selectors, and defined the common styles at once.
.headlines, .sublines, .infotext { fontfamily:arial; color:black; background:yellow; } .headlines {fontsize:14pt;} .sublines {fontsize:12pt;} .infotext {fontsize: 10pt;}
Less to type, easier to change and guaranteed to be the same for all styles. CSS can be added to your pages at 3 different levels. It is possible to create CSS styles that only work for the single tag it is defined for. Single tag CSS is used when the style is used in a single place on the entire site. Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page.
If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site.
The following Sections will explain each of these techniques.... Single Tags / Inline Style Sheet
CSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags. Look at this example: It is
You should limit your use of single tag CSS. If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS. For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used.
Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place.
Single Pages / Internal Style Sheet
CSS can be defined for entire pages by simply adding a style definition to the head section. Look at this example:
The example is really simple,
and doesn't even look good,
but it shows the technique.
The styles even work on tables.
In the above example, although we used the sublines style twice, we only had to define it once: in the section. By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made.
This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well. Since the styles are only defined in one place, the page size will be smaller, and thus faster to load. There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites.
Entire Sites / External Style Sheet
CSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site.
Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site. When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages.
This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made.
Look at this example: File: example.html
The example is really simple,
and doesn't even look good,
but it shows the technique.
The styles even work on tables.
The above example is the exact same as we used for CSS defined for entire pages, with one important exception: There is no style definition on the page. Instead we added a reference to an external style sheet:
This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in the html document.
So in order to complete our example we need to have a file called whatever.css that looks like this: File: whatever.css .headlines, .sublines, infotext {fontface:arial; color:black; background:yellow; fontweight:bold;} .headlines {fontsize:14pt;} .sublines {fontsize:12pt;} .infotext {fontsize: 10pt;}
Now if you just add the line
Imagine the power and flexibility this gives you to make changes to the layout even after the site is done. But also realize how using an external style sheet will guarantee that all pages are following the same thread. There won't be single pages that you forgot to update when you decided to change the style for your headers.
At this point of the tutorial you should know: 1: how to define styles for tags, classes and objects with ID's. 2: how to group styles and make them context dependent 3: how to add styles to single tags, single pages and entire sites
All we need now is a walkthrough of the various style attributes that can be assigned. We will divide them into three categories: 1: Inline attributes. (Works on tags like: <SPAN>, and ). 2: Block attributes. (Works on block tags:
). 3: Link attributes. (Works on links and use a special syntax).
CSS has several options for defining the styles of text. These options can entirely replace the tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.
FONT PROPERTIES Property font family
Values
NS IE Example fontfamily:arial
font name 4+ 4+ fontfamily:arial, generic font 4+ 4+ helvetica
fontstyle normal
italic oblique font variant font weight
fontsize
4+ 4+ fontstyle:normal 4+ 4+ fontstyle:italic 4+ fontstyle:oblique 4+ fontvariant:normal 4+ fontvariant:smallcaps
normal small-caps normal bold bolder lighter 100-900
4+ 4+ 4W 4W 4+
4+ 4+ 4+ 4+ 4+
fontweight:normal fontweight:bold fontweight:bolder fontweight:lighter fontweight:250
normal length length absolute absolute absolute absolute absolute absolute absolute relative relative percentage
4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+
4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+
fontsize:normal fontsize:14px fontsize:14pt fontsize:xxsmall fontsize:xsmall fontsize:small fontsize:medium fontsize:large fontsize:xlarge fontsize:xxlarge fontsize:smaller fontsize:larger fontsize:75%
4P:problems, 4M:Mac only, 4W:Windows only
ASSIGNING ALL FONT ATTRIBUTES AT ONCE An example of a typical font definition would be: B {fontfamily:arial, helvetica; fontsize:12px; fontweight:bold;}
But since all font attributes can actually be expressed with the font property we could actually write it this way: B {font:arial, helvetica 12px bold}
The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc.
TEXT PROPERTIES Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.
Property
Values
NS IE Example
lineheight
normal number length percentage
4W 4+ 4+ 4+
4+ 4P 4+ 4P
lineheight:normal lineheight:1.5 lineheight:22px lineheight:150%
textdecoration none
4+ 4M text-decoration:none underline 4+ 4+ text-decoration:underline 4W text-decoration:overline overline line-through 4+ 4+ text-decoration:line-through text-decoration:blink blink 4+
texttransform
none capitalize uppercase lowercase
4+ 4+ 4+ 4+
4W 4W 4W 4W
text-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase
textalign
left right center justify
4+ 4+ 4+ 4+
4+ 4+ 4+ 4W
textalign:left textalign:right textalign:center textalign:justify
textindent
length 4+ 4+ textindent:20px; percentage 4+ 4+ textindent:10%
whitespace
normal pre
4P:problems, 4M:Mac only, 4W:Windows only
4+ 4+
whitespace:normal whitespace:pre
Note:
lineheight : When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines.
texttransform : Capitalize sets the first letter of each word in uppercase. Uppercase forces all letters to uppercase. Lowercase forces all letters to lowercase.
textindent : Use this to indent the first word of a paragraph.
whitespace : If white-space is set to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the <pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag instead.
The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these aren't supported by today's browsers.
COLORS As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.
The color is not part of the font collection in CSS - rather it has its own definition. If you want to add a color to the text in the above example you'd do it this way: B {font:arial, helvetica 12px bold; color:red}
CSS has several options for defining colors of both text and background areas on your pages. These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML.
For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table.
Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and every table cell. With CSS you can simply refer to a certain class in your
COLOR PROPERTIES Property color backgroundcolor backgroundimage
backgroundrepeat
backgroundattachment
backgroundposition
background
Values
4P:problems, 4M:Mac only, 4W:Windows only
Setting colors Basically you have three color options with CSS: 1: Setting the foreground color for contents 2: Setting the background color for an area 3: Setting a background image to fill out an area
In the next section we will list the different properties that let you do that.
NS 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+
IE 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+
In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900). With CSS you have these options: Common name You can define colors with the use of common names, by simply enter the name of the desired color. For example: .myclass {color:red; background-color:blue;}
Hexadecimal value You can define colors with the use of hexadecimal values, similar to how it's done in plain HTML. For example: .myclass {color:#000000; background-color:#FFCC00;}
RGB value You can define colors with the use of RGB values, by simply entering the values for amounts of Red, Green and Blue. For example: .myclass {color:rgb(255,255,204); backgroundcolor:rgb(51,51,102);}
You can also define RGB colors using percentage values for the amounts of Red, Green and Blue: For example: .myclass {color:rgb(100%,100%,81%); backgroundcolor:rgb(81%,18%,100%);}
Setting background colors Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the
BODY selector: BODY {backgroundcolor:#FF6666;}
Setting a background image CSS lets you set a background image for both the page and single elements on the page.
In addition, CSS offers several positioning methods for background images. You can define the background image for the page like this: BODY {backgroundimage:url(myimage.gif);}
You can control the repetition of the image with the backgroundrepeat property. backgroundrepeat:repeat Tiles the image until the entire page is filled, just like an ordinary background image in plain HTML.
backgroundrepeat:repeatx Repeats the image horizontally - but not vertically.
backgroundrepeat:repeaty Repeats the image vertically - but not horizontally.
backgroundrepeat:norepeat Does not tile the image at all.
Positioning a background Background positioning is done by entering a value for the left position and top position separated by a space.
In this example the image is positioned 75 pixels from the upper left corner of the page: BODY {backgroundimage:url(myimage.gif); backgroundposition: 75px 75px;}
Note: Background positioning is not supported by Netscape 4 browsers.
Fixing a background You can fixate an image at a certain position so that it doesn't move when scrolling occurs.
BODY {backgroundimage:url(myimage.gif); backgroundattachment: fixed;}
Note: Background fixation is not supported by Netscape 4 browsers.
Setting multiple background values Rather than defining each
background property with its own property you can assign them all with the use of the
background property.
Look at this example: BODY {background:green url(myimage.gif) repeaty fixed 75px 75px;}
The CSS font properties allow you to change the font family, boldness, size, and the style of a text. Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property
Description
Values
IE
F
N
W3C
font
A shorthand property for setting all of the properties for a font in one declaration
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
4
1
4
1
font-family
A prioritized list of font family names family-name and/or generic family names for an generic-family element
3
1
4
1
font-size
Sets the size of a font
3
1
4
1
xx-small x-small small medium large x-large xx-large smaller larger
length % font-size-adjust
Specifies an aspect value for an element that will preserve the xheight of the first-choice font
none number
-
-
-
2
font-stretch
Condenses or expands the current font-family
normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
-
-
-
2
font-style
Sets the style of the font
normal italic oblique
4
1
4
1
font-variant
Displays text in a small-caps font or a normal font
normal small-caps
4
1
6
1
font-weight
Sets the weight of a font
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
4
1
4
1
Related Documents
Css Tutorial
July 2020 3
Css Tutorial
June 2020 9
Css Tutorial
October 2019 11
Css Tutorial
November 2019 23
Tutorial Css
May 2020 6