uptu web technology unit 2 css

Post on 22-Jan-2018

214 Views

Category:

Education

3 Downloads

Preview:

Click to see full reader

TRANSCRIPT

Web Technology(NCS-504)

Prepared ByMr. Abhishek Kesharwani

Assistant Professor,UCER Naini,Allahabad

Colors and backgroundscolor

background-color

background-image

background-repeat

background-attachment

background-position

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 backgroundsThe 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 imagebackground-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-attachmentbody {

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 propertybackground-position allows you to change thisdefault and position the background imageanywhere you like on the screen.

• There are numerous ways to set the values ofbackground-position.

• For example, the value '100px 200px' positions thebackground image 100px from the left side and200px from the top of the browser window.

• The coordinates can be indicated as percentages ofthe 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;

}

Font family• The property font-family is used to set a

prioritized list of fonts to be used to display agiven element or web page. If the first font onthe list is not installed on the computer used toaccess the site, the next font on the list will betried 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 100-900 (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;

}

TextCSS gives you to add layout to text.

The following properties will be described:

text-align

text-decoration

letter-spacing

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 lowercaseregardless 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, itcan be visited or not visited. You can usepseudo-classes to assign different styles tovisited and unvisited links.

• Use a:link and a:visited for unvisited and visitedlinks respectively. Links that are active have thepseudo-class a:active and a:hover is when thecursor 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 isdone by using the attribute id.

• What is special about the attribute id is thatthere can not be two elements in the samedocument with the same id. Each id has to beunique.

<h2 id="c1-1">Chapter 1.1</h2>

<h2 id="c1-2">Chapter 1.2</h2>

#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:

<p>Grapes for white wine:</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul>

<p>Grapes for red wine:</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul>

<p>Grapes for white wine:</p><ul><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ch.htm" class="whitewine">Chardonnay</a></li><li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li></ul>

<p>Grapes for red wine:</p><ul><li><a href="cs.htm" class="redwine">Cabernet

Sauvignon</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li></ul>

a.whitewine {

color: #FFBB00;

}

a.redwine {

color: #800000;

}

Grouping with <div>• <div> is used to group one or more block-level

elements.<div id="democrats"><ul><li>Franklin D. Roosevelt</li><li>Harry S. Truman</li><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li></ul></div>

<div id="republicans"><ul><li>Dwight D. Eisenhower</li><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li></ul></div>

#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 thedistance of the element to other elements butonly defines the inner distance between theborder and the content of the element.

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

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, indicatedin 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.

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

#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;

}

top related