uptu web technology unit 2 css
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;
}
Fonts
FONT-FAMILY
FONT-STYLE
FONT-WEIGHT
FONT-SIZE
FONT
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;
}
Borders
border-width
border-color
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, 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;
}