Programming and Web Design

Posts

Showing posts with the label CSS

CSS: Different versions with variations

CSS 1: The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes The W3C no longer maintains the CSS 1 Recommendation.

CSS Vertical Menu

Css Vertical Menu can be build using following code : Vertical Menu #1 Code <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Css Simple Menu</title> <style type=”text/css”> #vmenu{ margin:0px; padding:0px; }

CSS Multilevel menu (Horizontal Multilevel Menu)

To create a multilevel menu in CSS, one should use the nesting of unordered list. The below given is the simple multi- level menu.

Css Simple Menu

Simple one level menu can be created using unordered list with the help of CSS properties. Below given is a very simple examples:

CSS List

CSS allows you to customize the lists that can be made with HTML to the extent that even images can be used as bullet points for unordered lists. CSS List Style Type If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. Unordered list styles: square, circle, disc (default), and none Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none Code:

CSS Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element. The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

Css Layers(z-index)

It refers to apply the z-index property to elements that overlap with each other. The z-index property when used in conjuction with the position property, enable you to specify which element should appear on top in the event of an overlap.

Overflow property

To control the overflow of the fixed box.There are four types of overflow property and they are: visible(default), hidden, scroll and auto. visible overflow: If you don’t set the overflow property at all the default is visible. For eg: .box{ overflow:visible; height:20px; }

Css Positions

You can put any HTML element at wherever position in the page or absolute based on its parent element. Relative Positioning: It changes the position of the HTML element relative to where it normally appears For example: <div style=”position:relative;left:80px; top:2px; background-color:yellow;”> This div has relative positioning </div>

Css cursors

This allows the type of cursor that should be displayed to the user.

Css Dimensions

The following are the Css dimensions used. height: sets the height of an element max-height: sets the maximum height of an element max-width: sets the maximum width of an element min-height: sets the minimum height min-width: set the minimum width width: sets width line-height: set the height of a line of text

Css Outlines

An outline is a line that is drawn around elements, outside the border edge, to make the element “standout”; The outline properties specifies the style, color and width of an outline. outline outline-color outline-style outline-width

CSS Border

Css allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element. Setting Borders on all sides. border-width border-style border-color

CSS Float

The css float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to. float:left; float: right;

Div and span

Div: Div <div> tag is that it divides the HTML document into sections. Proper usage of the <div> tag is fundamental to good HTML coding, the <div> tag is one of the most powerful tools available to a web developer. Span: Span <span> is in-line level elements, they only span across small amounts of content, typically words or phrases. For example: a <span> tag might be used to make a word red in color or to give it an underline.

An Introduction to CSS

The CSS is an abbreviation of Cascading Style Sheet. The style-sheet is used to make web pages. It is used to make a table-less design. The file extension of the css file is .css. There are three ways of inserting style-sheet. i. External style-sheet ii. Internal style-sheet iii. Inline style-sheet