Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad

Colors and backgrounds  color color  background-color background-color  background-image background-image  background-repeat background-repeat  background-attachment background-attachment  background-position background-position  Background Background The color property describes the foreground color of an element. h1 { color: #ff0000; }

Colors and backgrounds The background-color property describes the background color of elements. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

Colors and backgrounds The CSS property background-image is used to insert a background image. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }

Repeat background image background-repeat: repeat-x The image is repeated horizontally background-repeat: repeat-y The image is repeated vertically background-repeat: repeat The image is repeated both horizontally and vertically background-repeat: no-repeat The image is not repeated

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

background-attachment The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. Background-attachment: scroll The image scrolls with the page - unlocked Background-attachment: fixed The image is locked

background-attachment body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

background-position By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen. There are numerous ways to set the values of background-position. For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right.

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

Fonts  FONT-FAMILY FONT-FAMILY  FONT-STYLE FONT-STYLE  FONT-WEIGHT FONT-WEIGHT  FONT-SIZE FONT-SIZE  FONT FONT

Font family The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found. An example h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

Font style Font weight The property font-style defines the chosen font either in normal, italic or oblique. h2 {font-family: "Times New Roman", serif; font- style: italic;} The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between (in hundreds) to describe the weight of a font. td {font-family: arial, verdana, sans-serif; font- weight: bold;}

Font size The size of a font is set by the property font-size. There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

Font Using the font short hand property it is possible to cover all the different font properties in one single property. p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Using the short hand property, the code can be simplified: p { font: italic bold 30px arial, sans-serif; }

Text CSS gives you to add layout to text. The following properties will be described:  text-align text-align  text-decoration text-decoration  letter-spacing letter-spacing  text-transform text-transform

Text alignment The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Text decoration The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

Letter space The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

Text transformation The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. There are four possible values for text-transform: capitalize Capitalizes the first letter of each word. For example: "john doe" will be "John Doe". uppercase Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". lowercase Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". none No transformations - the text is presented as it appears in the HTML code.

Links A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links. Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link.

Links a {text-decoration:none;} a:link {color: blue;text-decoration:none;} a:visited {color: purple;text-decoration:none;} a:active {background-color: yellow;text- decoration:none;} a:hover {color:red;text-decoration:none;}

Identification of element using id In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id. What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. Chapter 1.1 Chapter 1.2 #c1-2 { color: red; }

Identification of element using class Sometimes you want to apply a special style to a particular element or a particular group of elements. Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this: Grapes for white wine: Riesling Chardonnay Pinot Blanc Grapes for red wine: Cabernet Sauvignon Merlot Pinot Noir

Grapes for white wine: Riesling Chardonnay Pinot Blanc Grapes for red wine: Cabernet Sauvignon Merlot Pinot Noir

a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

Grouping with is used to group one or more block-level elements. Franklin D. Roosevelt Harry S. Truman John F. Kennedy Lyndon B. Johnson Jimmy Carter Bill Clinton Dwight D. Eisenhower Richard Nixon Gerald Ford Ronald Reagan George Bush George W. Bush

#democrats { background:blue; } #republicans { background:red; }

Margin and Padding An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } body { margin: 100px 40px 10px 70px; }

Padding Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. h1 { background: yellow; padding: 20px 20px 20px 80px; }

Borders  border-width border-width  border-color border-color  border-style border-style

Border-width The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.

border-color, border-style The property border-color defines which color the border has.

h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; }

Floating elements An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document.

causas naturales et antecedentes, idciro etiam nostrarum voluntatum... #picture { float:left; width: 100px; }

Positioning of elements With CSS positioning, you can place an element exactly where you want it on your page.

#d1 { left: 350px; bottom: 150px; } #d2 { left: 150px; bottom: 500px; } #d3 { left: 50px; bottom: 700px; }