CASCADING STYLESHEETS

Size: px

Start display at page:

Download "CASCADING STYLESHEETS"

Harriet Adams
6 years ago
Views:

1 CASCADING STYLESHEETS Cascading StyleSheets (CSS) has been mainly created because HTML is just not the right tool for precision and flexibility. HTML is not a very effective for designing web pages. Most of the time, we use convoluted table tags and invisible spacer GIFs to push and place things around on page. The code becomes too complicated and the GIFs too numerous. CSS offers 1. More precise control over layout 2. The possibility of updating numerous pages just by changing one document 3. Compatibility across browsers and platforms 4. Less code, smaller pages and faster downloads 5. The separation of form and structure 6. Fancying of pages in your favourite way 1. Inline stylesheets This is done by adding styles right in the middle of the HTML tag anywhere in the HTML file. Example: This is Cueboy s Den! 2. Embedded stylesheets The stylesheet is embedded in the <HEAD> section of the HTML file. Example <HTML> <HEAD> <style type= text/css >  </HEAD> <BODY> have you ever heard about the Mayan civilization? </BODY> </HTML> 3. Linked stylesheets The objective is to point multiple HTML documents to one central stylesheets document. The styles are stored in a file named mystyle.css (for example). The link is made in the <HEAD> section of the HTML file as in the following example: <link rel=stylesheet href= mystyle.css type= text/css > The obvious advantage is that one can update the format of several documents just by changing the mystyle.css file. The mystyle.css file will consist of style codes only (no <HTML>, <HEAD> or <BODY> tags). 1

2 Example H1 {font-size: 12pt; text-align: justify} table {background : red; vertical-align: bottom} 4. Imported stylesheets Unlike linking, we can combine importing with other methods. As usual, the code is inserted in the <HEAD> section of the HTML file. Example <style type= text/css > url(company.css); h1 {color:orange} --> </style> Note The h1 stylesheet overrides statement if the latter already contains another style for <H1> tags. Order of priority 1. Inline 2. Embedded 3. Linked 4. Imported 5. Default browser Comments are bracketed between /* and */. Example p {font-family: Courier} /* all paragraphs will be in Courier font */ Note The  are used to hide the stylesheet contents from older browsers since they display the stylesheets codes on the HTML page even though there is the type= text/css statement! Last statement rule p {color:green} p {color:red} The color of the text will be red in this case because it is the last statement (order) given. Group selectors h2, p, table {text-align: left} /* separated by commas) */ Inheritance 2

3 b {font-family: Arial} hey there! Do you support Man. Utd? tag inherits the style of the tag since no style is defined for it and, on top of that, it is found inside the tag. Contextual selectors If you want only the bold text to be red only when it is found in the tag, then simply write p b (color: red} Note Any text found between tags but not inside tags would not be displayed in red. You can try it! Classes You can define your own classes (which will adopt a given style): p.cueboy {font-family: Arial; font-size: 10pt; color: teal} which you can use it as print these pool rules! Better: classes don t even have to be attached to any particular tags! With.cueboy {color:teal} we can use any tag to call the class: Hi there, baby! <td class=cueboy>hello sweetheart!</td> CSS properties 3

4 font-family h2 {font-family: Arial, Helvetica, sans-serif} It is a good idea to use a generic font name as the last on your list, i.e, any one from {serif, sans serif, cursive, fantasy, monospace}. The browser default fonts for these would probably be {Times, Arial or Helvetica, Comic Sans, Ransom, Courier} respectively. font-size p {font-size: 16pt} There are three basic ways of specifying the size of the text {points, ems, pixels, in, cm, mm, pc (picas), ex (x-height) and other units}, keywords {xx-small, x-small, small, medium, large, x-large, xxlarge} and percentage values. p {font-size: 12pt} b {font-size: 300%} means make all text within three times as large. There also exist two relative keywords {smaller, larger} that tell the browser to adjust the size of the current text down or up one level on the keyword scale (x-large=24 points in IE). font-weight p {font-weight: bold} p {font-weight: 200} A whole new range of boldness becomes possible unlike the inflexibility of HTML. Normal text has a numerical value of 400 whilst 900 is the maximum boldness available for any font. Relative boldness values {bolder, lighter} can also be used: P {font-weight: 450} div {font-weight: bolder} means make all <div> text within bolder. font-style p {font-style: italic} There are three possible styles {italic, normal, oblique}. The oblique option is restricted to fonts whose italic are defined as oblique. font-variant h2 {font-variant: small-caps} This is a simple one since neither Netscape Communicator nor Internet Explorer currently supports it. text-transform td {text-transform: uppercase} This property controls capitalization with four possible values {uppercase, lowercase, capitalize, none}. None is just normal without any changes whereas capitalize sets the first character of every word to uppercase form: Welcome To My Website! text-decoration 4

5 a:visited {text-decoration: none} a:active {text-decoration: none} a:link {text-decoration: none} Text-decoration has five values {underline, overline, line-through, blink, none} of which only four are supported by NC (does not support overline) and IE (does not support blink). You can create links that are not underlined by adding the following two lines to the example above: font li {font: 12pt/16pt Courier} This is like shorthand for a few of the other properties. It s a way of assigning font-size, line-height and font-family. word-spacing letter-spacing line-height spacing between two words (any unit mentioned before} spacing between two letters (any unit mentioned before} vertical spacing between two lines (any unit mentioned before} This is also possible: b {font-size:12pt; line-height: 2} This has the effect of doubling the size of the number so that, in the above example, the line-height is 24 points. We can also use non-integers (e.g 3.1). Overlapping is a result of using incorrect line-height values. text-align vertical-align text-indent float clear {left, center, right, justify} {top, bottom, text-top, text-bottom, baseline, middle, sub, super} indentation Wraps text around element (table, image) Stops wrapping MARGIN BORDER PADDING TEXT border-width, border-color, etc, border {any units mentioned before} border {thin, medium, thick} border-width {border-top-width, border-bottom-width, border-left-width, border-right-width} border-color {red blue yellow green (starts on top and moves clockwise)} border-style {solid, double, dotted, dashed, groove, ridge, inset, outset} margin-top, margin-left, etc, 5

6 padding-top, padding-right, etc, color background-color applies to text only can also take on the value transparent Colors can be expressed in terms of their names (provided they are defined, e.g teal) hexadecimal codes (# for teal) or red-green-blue combination (e.g RGB(0, 128, 128)). background-image table {background-image: URL( mahima.jpg )} background-repeat tiling of image {repeat, no-repeat, repeat-x, repeat-y, none} A value of none overrides any inherited value (from the <BODY> tag, for example) background-attachment This is all about deciding whether a background image will stay fixed or will scroll together with the scrollbar. There are two values {fixed, scroll}. Note that fixing the background can also be achieved by using the simple HTML code <BODY bgproperties=fixed>. background-position This is to position the starting position of a background image. Values: {top, bottom, left, right, center} p {background-position: center bottom} p {background-position: 70px 10px} p {background-position: 75% 50%} (x, y) co-ordinates, starting from top left corner of browser window starts 75% of the way towards the right edge, and 25% of the way towards the left edge of the browser window Note Resizing the browser window will automatically change the background placement accordingly. background defines background color, image, tiling method, scrolling versus fixed status and position. (Note that there are only spaces separating the various values.) p {background: url(aishwarya.jpg) # repeat-y top right} position {absolute, relative} p {position: absolute} p {position: relative} absolute positioning is independent of any other object on the page it s as if the element does not know anything about what else lies on the page. However, it does inherit other properties. top relative positioning is relative to the element s natural position in the document s flow. Interruption of relative positioning brings the document s flow back to normal but can cause some overlapping problems. starting point from top of browser window 6

7 left starting point from left of browser window width height defines width of element. Percentage values refer to the parent s width (by default, the width of the browser window). defines the height of the element (not supported by NC). Percentage values refer to the parent s height (by default, the height of the browser window). div {position: relative; left: 300px; top: 0px; width: 150px; height: 250px} overflow visibility clip if the contents of a box/table is bigger than its height/width, we can control the overflow of the contents by using the values {auto, scroll, visible, hidden}. Visible is self-explanatory whereas hidden will clip off any overflowing (what goes over the line) content. Auto is similar to hidden except that a scrollbar will appear now. Scroll will always display a scrollbar whether the contents overflow or not. {visible, hidden, inherit} The exciting part! You can make elements invisible on your page. Its application is in dhtml where we use layers for pulldown menus. Inherit means that the element will inherit its visibility from its parent element. When an element is hidden, it takes the same amount of room in the browser but you just don t see it. If you wrap text around an invisible image, the text will appear to wrap around an empty space. (NC does not support visibility). Clipping controls exactly which parts of an element to display and which parts to hide. h2 {clip: rect(10px 200px 100px 40px)} rectangle is the only shape supported so far so that everything within the clipping region will be visible. To explain briefly, the top left corner of the clipping region is situated at 10px from the top and 40px from the left of the parent s top left corner (or browser window, by default). The region has a width of 200px and a height of 100px. Simplified version: clip: rect(left, width, height, top) z-index z-index specifies which layer should appear on top when there are layers overlapping. The higher the z-index value, the more on top the layer is. div {position: absolute; top:10px; left: 40px; z-index:3} p {position: absolute; top:40px; left: 80px; z-index:5} cursor changes your cursor when rolling over an element with the default value being the usual arrow. Other values are {crosshair, text, wait, help, move, n-resize, neresize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, auto, default} p {cursor: hand} Hope you have understood that you can make a word look like a link by underlining it and rolling over it with a hand cursor ;-) Embedded fonts you are also allowed to embed fonts just like {font-family: Cueboy; src: url(fonts/cueboy.eot); h3 {font-family: Cueboy, Times, serif} media types sometimes you want one style for your web page and another for the printed version (mainly used in CSS2). 7

8 @media screen { body {background: black; color: white} p {font-family: Verdana, sans serif} print { body {background: white; color: black} p {font-family: Times, serif} } The other types are {handheld (PalmPilots), projection (projectors and transparencies), tv, tty (teletypes or terminals), aural (speech synthesizers), braille, embossed, all} page break For example, you can always force a page break after a block of that has class= dcdm as follows: p.dcdm {page-break-after: always} You have page-break-before as well and both these properties have values {always, auto}. table layout This is completely new stuff! When a browser has to display a table, it has to look at its contents before rendering it. If you set the table layout to a fixed width, for example, the table contents are displayed more quickly. Make sure you put the widths for the <TD> in the first row. <table style= table-layout: fixed width= 600 > <tr><td width=150>abc</td> <td width=250>def</td> <td width=200>ghi</td> </tr> direction some languages are written from right to left (e.g., Arabic, Hebrew, Urdu). With direction, you can control which way the text runs. The values are {rtl ltr, inherit} (rtl = right to left). h3 {direction: rtl} You can use Notepad to edit your HTML and CSS codes by right clicking on your HTML page and selecting View Source. Some very good HTML editors are Textpad and CuteHTML, which are freely downloadable from the Net. Phew! That s enough for now, folks! Start walking before you can run! With practice, you should be able to mix all these properties and finally create attractive webpages without making use of flashy software (u no what I mean) and pages that load very quickly. Don t forget to have a glimpse at, and maybe start learning, Javascript and dhtml whenever you have some free time. With the introduction of CSS2 and CSS3, there are so many new features to be discovered! If you are interested in advanced CSS properties, please visit the following websites, famous for their tutorials: Compliments! Raj. Visit my homepage at 8

Appendix D CSS Properties and Values

HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by