This document discusses Cascading Style Sheets (CSS) and its core concepts. It covers the different ways to insert CSS styles (external, internal, inline stylesheets), CSS selectors (type, class, ID selectors), the cascade and inheritance of styles, and some common text properties like color, decoration, and formatting. CSS is used to separate document structure and presentation to make websites easier to maintain and style consistently.
A standards-based method for controlling the look and feel of XML content.
Comprised of Rules to control elements in the document.
Designed to separate formatting from the content while being flexible and scalable
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
A standards-based method for controlling the look and feel of XML content.
Comprised of Rules to control elements in the document.
Designed to separate formatting from the content while being flexible and scalable
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
This tutorial covers all the basics of CSS. This is a quick guide to CSS.Anyone having understanding of HTML can easily learn CSS in 10 minutes with this video tutorial. It covers all the basics of Style Sheets in Web designing.
For more detail you can also visit our Tech Blogs at https://msatechnosoft.in/blog/tech-blogs
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
This tutorial covers all the basics of CSS. This is a quick guide to CSS.Anyone having understanding of HTML can easily learn CSS in 10 minutes with this video tutorial. It covers all the basics of Style Sheets in Web designing.
For more detail you can also visit our Tech Blogs at https://msatechnosoft.in/blog/tech-blogs
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
Courier management system project report.pdfKamal Acharya
It is now-a-days very important for the people to send or receive articles like imported furniture, electronic items, gifts, business goods and the like. People depend vastly on different transport systems which mostly use the manual way of receiving and delivering the articles. There is no way to track the articles till they are received and there is no way to let the customer know what happened in transit, once he booked some articles. In such a situation, we need a system which completely computerizes the cargo activities including time to time tracking of the articles sent. This need is fulfilled by Courier Management System software which is online software for the cargo management people that enables them to receive the goods from a source and send them to a required destination and track their status from time to time.
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSEDuvanRamosGarzon1
AIRCRAFT GENERAL
The Single Aisle is the most advanced family aircraft in service today, with fly-by-wire flight controls.
The A318, A319, A320 and A321 are twin-engine subsonic medium range aircraft.
The family offers a choice of engines
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Dr.Costas Sachpazis
Terzaghi's soil bearing capacity theory, developed by Karl Terzaghi, is a fundamental principle in geotechnical engineering used to determine the bearing capacity of shallow foundations. This theory provides a method to calculate the ultimate bearing capacity of soil, which is the maximum load per unit area that the soil can support without undergoing shear failure. The Calculation HTML Code included.
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
NO1 Uk best vashikaran specialist in delhi vashikaran baba near me online vas...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
Vaccine management system project report documentation..pdfKamal Acharya
The Division of Vaccine and Immunization is facing increasing difficulty monitoring vaccines and other commodities distribution once they have been distributed from the national stores. With the introduction of new vaccines, more challenges have been anticipated with this additions posing serious threat to the already over strained vaccine supply chain system in Kenya.
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
Saudi Arabia stands as a titan in the global energy landscape, renowned for its abundant oil and gas resources. It's the largest exporter of petroleum and holds some of the world's most significant reserves. Let's delve into the top 10 oil and gas projects shaping Saudi Arabia's energy future in 2024.
Cosmetic shop management system project report.pdfKamal Acharya
Buying new cosmetic products is difficult. It can even be scary for those who have sensitive skin and are prone to skin trouble. The information needed to alleviate this problem is on the back of each product, but it's thought to interpret those ingredient lists unless you have a background in chemistry.
Instead of buying and hoping for the best, we can use data science to help us predict which products may be good fits for us. It includes various function programs to do the above mentioned tasks.
Data file handling has been effectively used in the program.
The automated cosmetic shop management system should deal with the automation of general workflow and administration process of the shop. The main processes of the system focus on customer's request where the system is able to search the most appropriate products and deliver it to the customers. It should help the employees to quickly identify the list of cosmetic product that have reached the minimum quantity and also keep a track of expired date for each cosmetic product. It should help the employees to find the rack number in which the product is placed.It is also Faster and more efficient way.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
Water scarcity is the lack of fresh water resources to meet the standard water demand. There are two type of water scarcity. One is physical. The other is economic water scarcity.
3. 1.0 Introduction to Cascading Style
Sheets
• What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a
problem
• CSS can save a lot of work
• External Style Sheets are stored in CSS files
4. • CSS Solved a Big Problem
• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large web sites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
• In HTML 4.0, all formatting could be removed from the HTML document,
and stored in a separate CSS file.
• All browsers support CSS today.
• The key property of style sheet technology is that it can be used to
separate the presentation of information from the information content
and semantic tagging.
• Style sheets gives all the elements on a page a consistent appearance
5. 2.0 CSS Core Syntax
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
CSS Comments
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
6. CSS Example
• A CSS declaration always ends with a
semicolon, and declaration groups are
surrounded by curly braces:
• p {color:red;text-align:center;}
• To make the CSS code more readable, you can
put one declaration on each line.
• In the following example all <p> elements will
be center-aligned, with a red text color:
9. 3.0 Cascading Style Sheet Features
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
10. External Style Sheet
• An external style sheet is ideal when the style is applied to
many pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css“
title=“style1”/>
</head>
• An external style sheet can be written in any text editor.
• The file should not contain any html tags.
• Your style sheet should be saved with a .css extension.
11. • An example of a style sheet file is shown
below:
• hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
• Do not add a space between the property
value and the unit (such as margin-left: 20 px).
The correct way is: margin-left:20px
12. Internal Style Sheet
• Internal Style Sheet
An internal style sheet should be used when a single document has a
unique style.
You define internal styles in the head section of an HTML page, by using the
<style> tag, like this:
<head>
<style>
h1 {color:blue;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
13. Inline Styles
An inline style may be used to apply a unique style
for a single element.
• An inline style loses many of the advantages of
style sheets by mixing content with presentation.
Use this method sparingly!
• To use inline styles you use the style attribute in
the relevant tag.
• The style attribute can contain any CSS property.
• The example shows how to change the color and
the left margin of a paragraph:
• <p style="color:blue;margin-left:20px">This is a
paragraph.</p>
14. Multiple Style Sheets
• If some properties have been defined for the same selector in different style sheets, the
value will be inherited from the more specific style sheet.
• For example, assume that an external style sheet has the following properties for the <h1>
element:
• h1 {
color: navy;
margin-left: 20px;
}
• then, assume that an internal style sheet also has the following property for the <h1>
element:
• h1 {
color: orange;
}
• If the page with the internal style sheet also links to the external style sheet the properties
for the <h1> element will be:
• color: orange;
margin-left: 20px;
• The left margin is inherited from the external style sheet and the color is replaced by the
internal style sheet.
•
15. Cascading order
• Browser default
• External and internal style sheets (in the head section)
• Inline style (inside an HTML element)
• So, an inline style (inside an HTML element) has the
highest priority, which means that it will override a
style defined inside the <head> tag, or in an external
style sheet, or in a browser (a default value).
• If the link to the external style sheet is placed below
the internal style sheet in HTML <head>, the external
style sheet will override the internal style sheet!
16. External style sheet types
Style sheets can be associated with documents using a list of link
elements in the head.
There are three different relationships external style sheets can have
with the document: persistent, preferred, and alternate.
Persistent
• These style sheets are always enabled (they are always “on”) and
are combined with the active style sheet.
• They can be used for shared rules common to every style sheet.
• To make a style sheet persistent, the rel attribute is set to
“stylesheet” and no title attribute is set.
• To make the style sheet paul.css persistent, the following link
element would be included in the head:
• <link rel="stylesheet" type="text/css" href="paul.css" />
17. Preferred
• These style sheets are enabled by default (they are “on” when the page is loaded).
• They can then be disabled if the user selects an alternate style sheet.
• To make a style sheet preferred, the rel attribute is set to “stylesheet” and the
style sheet is named with the title attribute.
• Several preferred style sheets can be grouped together by giving them identical
title attributes.
• These grouped style sheets are then all enabled and disabled together.
• If more than one group of preferred style sheets are declared, the first group takes
precedence.
• To make paul.css preferred, a title attribute is added, giving the default style a
name.
• <link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />
18. Alternate(user selection)
• These style sheets can be selected by the visitor as alternatives to the preferred
style sheet.
• This allows the visitor to personalize a site and choose his or her favorite scheme.
They can also be used for accessibility.
• To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet”
and the style sheet is named with a title attribute.
• As with preferred sheets, these style sheets can also be grouped together by giving
them identical title attributes.
• Using the previous example again; to make paul.css into an alternate style sheet,
the keyword “alternate” is added to the rel attribute.
• <link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />
• Note that these relationships only apply to external style sheets which are
included using the link element.
19. External Style Sheet-Media Attribute
<link rel=“stylesheet” type=“text/css”
href=“style1.css” media=“screen,tv,projection”/>
Possible values for media attribute
Value Media type
All All types
Aural Speech synthesizer
Braille Device generating braille characters
Handheld Handheld device such as cellphone or PDA
Print Printer
Projection Projector
Screen Computer monitor
Tv television
20. 4.0 Selector Strings
• Type Selector
• Universal Selector
• ID Selector
• Class Selector
– Pseudo classes
• Descendant Selector
22. Universal Selector
• The * selector selects all elements.
• The * selector can also select all elements inside another element
<html>
<head>
<style>
*
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My best friend is Mickey.</p>
</body>
</html>
24. ID Selector
• The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
25. Class Selector
• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a ".“
• <html>
• <head>
• <style>
• .center
• {
• text-align:center;
• }
• </style>
• </head>
• <body>
• <h1 class="center">Center-aligned heading</h1>
• <p class="center">Center-aligned paragraph.</p>
• </body>
• </html>
26. Pseudo classes
• CSS pseudo-classes are used to add special
effects to some selectors.
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {property:value;}
• CSS classes can also be used with pseudo-
classes:
• selector.class:pseudo-class {property:value;}
27. <html>
<head>
<style>
a:link {color:red;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */
</style>
</head>
<body> <p><b><a href="default.asp" target="_blank">This is a
link</a></b></p> <p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
order to be effective.</p>
</body>
</html>
28. Descendant Selector
A selector may be specialised so that it holds
only within the content of certain element
types.
Ul span {font-variant:small-caps}
The above statement says that the text within
a span element that is in turn part of the
content of an unordered or bulleted list
should be displayed in small-cap font form.
29. Descendant Selector
Class selector can also be included in the
ancestor list.
.special span
Would apply to any span element within the
content of any element belonging to the class
special.
Ul ol li {letter-spacing:1cm}
Applies only to an li element within ol element
that is within a ul element.
30. At-Rules
The @import at-rule is a mechanism for
importing one style sheet into another. It
should be followed by a URI value and a
semicolon, but it’s possible to use a string
value instead of the URI value.
@import url(“ a.css”);
The @import rules in a style sheet must precede
all rule sets
31. 5.0 Style Inheritance
*while cascading is based on the structure of
style sheets,inheritance is based on the tree
structure of the document itself
*An element inherits a value for one of its
properties by checking to see if its parent
element in the document has a value for that
property and if so,inheriting the parents value.
*The parent may in turn inherits a property
value from its parent and so on.
32. Few points about inheritance
• The height property of an element is not inherited from it
parent
• The value contained in a style declaration for a property is
known as the specified value for the property.This property
can be either relative or absolute.An absolute value is a
value that can be understood without the need for any
context such as the value 2cm.A relative value on the other
hand cannot be understood without knowing some
context.for example the property declaration font-
size:larger uses the relative value larger to set the size of
the font of an element.
• CSS2 recommendantion allows every style property to be
given the value inherit,whether or not the property is
inherited normally.
33. 6.0 Text Properties
1)Text Color
• The color property is used to set the color of
the text.
• With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
34. Text Color-Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined
in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
35. Text Color contd…
Colors in CSS can be specified by the following methods:
Hexadecimal colors
RGB colors
Hexadecimal Colors
• Hexadecimal color values are supported in all major browsers.
• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 0 and FF.
• For example, the #0000ff value is rendered as blue, because the blue component is set to its
highest value (ff) and the others are set to 0.
RGB Colors
• RGB color values are supported in all major browsers.
• An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue)
defines the intensity of the color and can be an integer between 0 and 255 or a percentage value
(from 0% to 100%).
• For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its
highest value (255) and the others are set to 0.
• Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).
36. Formats for specifying numeric color
values
Format Example
Functional,integer
arguments
Rgb(255,170,0)
Functional,percentage
arguments
Rgb(100%,66.7%,0%)
Hexadecimal #ffaa00
Abbreviated hexadecimal #fa0
Divide
170/255
37. Color names and RGB Values
Color Name RGB Value
Black #000000
Gray #808080
Silver #c0c0c0
White #ffffff
Red #ff0000
Lime #00ff00
Blue #0000ff
Yellow #fffff00
Maroon #800000
Green #008000
Acqua #00ffff
38. 2.Text Formatting
Primary CSS text properties
property
Text-decoration
Letter-spacing
Word -spacing
Text-transform
Text-indent
Text-align
White-space
39. Text-decoration
The text-decoration property specifies the
decoration added to text.
• Property Values
• none -Defines a normal text.
• Underline- Defines a line below the text
• overline -Defines a line above the text
• line-through - Defines a line through the text
• Blink - Defines a blinking text
40. Text decoration-example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
41. Letter-spacing
• The letter-spacing property increases or
decreases the space between characters in a
text.
• Property Values
• Normal - No extra space between characters.
This is default
• length -Defines an extra space between
characters (negative values indicate space to
be removed)
42. Word-spacing
The word-spacing property increases or
decreases the white space between words.
• Property Values
• normal -Defines normal space between
words .
• length - Defines an extra space between
words in px, pt, cm, em, etc.
• Negative values indicate space to be removed
43. Text-transform
The text-transform property controls the
capitalization of text.
Property Values
• none - No capitalization. The text renders as it is.
This is default
• Capitalize- Transforms the first character of each
word to uppercase
• uppercase -Transforms all characters to
uppercase
• lowercase -Transforms all characters to lowercase
44. Text-indent
The text-indent property specifies the
indentation of the first line in a text-block.
• Property Values
• length Defines a fixed indentation in px, pt,
cm, em, for box width etc.
• % Defines the indentation in % of the width of
the parent element
45. Text indent-Example
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</body>
</html>
46. Text-align
The text-align property specifies the horizontal
alignment of text in an element.
• Property Values
left- Aligns the text to the left
right -Aligns the text to the right
center- Centers the text
justify - Stretches the lines so that each line has
equal width (like in newspapers and magazines)
47. White-space
The white-space property specifies how white-space inside an
element is handled.
• Property Values
• normal - Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary. This is default
• Nowrap - Sequences of whitespace will collapse into a
single whitespace. Text will never wrap to the next line. The
text continues on the same line until a <br /> tag is
encountered
• pre - Whitespace is preserved by the browser. Text will only
wrap on line breaks Acts like the <pre> tag in HTML
48. Text Properties
• Css defines a direction property which specifies the
direction in which the text is written.
• Ltr indicate left to right language and rtl indicates right
to left.
Font Families
A font family is a collection of related fonts,and a font is a
mapping from a character to a visual representation of
the character(glyph).Each glyph is drawn relative to a
rectangular character cell.
The font family to be used for displaying text within an
HTML element is specified using the font-family style
property.
49. 3.CSS generic font families
Font family Description
Serif A serif is a short decorative line at the end
of the stroke of a letter
Sans-serif Usually proportionately spaced
Cursive Looks more like cursive handwriting and
printing
Fantasy Glyphs are still recognizable but are non
traditional
Monospace All glyphs have the same width.
50. 4.Length specification in CSS
• In css the size of the
font is specified using
the font-size property.
• Some example
declaration include
Font-size:0.25in
Font-size:12pt
Font-size:15px
Css length identifiers
Identi
fier
meaning
In Inch
Cm centimeter
Mm Millimeter
Pt Point:1/72 inch
Pc Pica:12 points
Px Pixel;1/96 inch
Em Em:reference font size
Ex Ex:roughly the height of lowercase
“x” character in the reference font
51. Length specification in CSS
• Mozilla 1.4 and IE 6 maintain the relationship
1in = 2.54 cm = 25.4mm=72pt=6pc=96px both
on screen and when printing document
• Absolute units do not depend on other style
property values.(e.g) in,cm,mm
• Relative units depend on the medium
displaying the document.(e.g) px
52. Some features and quantities defined
by a font
Baseline height is the distance from the bottom
of a character cell to an imaginary line known
as the baseline.
M x
Cell height Ex height
Baseline
height
baseline
54. 5.Line Boxes
• Each line box contains one line of text. The height of a
line box is precisely the height of a character cell .
• The height of the box will be number of line boxes
multiplied by the height of character cell.
• The browsers default setting of the height of line boxes
can be overridden by specifying a value for the line
height property
• Line-height:1.5em
Line height:150%
Line-height:1.5
55. Line boxes
T h I s I s
G
Half-Leading
Text Cell Height
Half-Leading
Line-height
56. 7.0 Some other useful style properties
1.Lists
The list-style-type specifies the type of list-item marker
in a list.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
57. Style Properties 2.tables
Table Borders
• To specify table borders in CSS, use the border property.
• The example below specifies a black border for table, th, and td elements:
• Example
• table, th, td
{
border: 1px solid black;
}
Collapse Borders
• The border-collapse property sets whether the table borders are collapsed into a single border or separated:
• Example
• table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
• Width and height of a table is defined by the width and height properties.
• The example below sets the width of the table to 100%, and the height of the th elements to 50px:
• Example
• table
{
width:100%;
}
th
{
height:50px;
}
58. Style Properties 2.tables
Table Text Alignment
• The text in a table is aligned with the text-align and vertical-align properties.
• The text-align property sets the horizontal alignment, like left, right, or center:
• Example
• td
{
text-align:right;
}
• The vertical-align property sets the vertical alignment, like top, bottom, or middle:
• Example
• td
{
height:50px;
vertical-align:bottom;
}
Table Padding
• To control the space between the border and content in a table, use the padding property on td and th elements:
• Example
• td
{
padding:15px;
}
Table Color
• The example below specifies the color of the borders, and the text and background color of th elements:
• Example
• table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
59. Style Properties
3.Cursor Styles
The cursor property specifies the type of cursor to be displayed when pointing on an element.
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
60. 8.0 CSS BOX MODEL
Padding-top
Padding-
right
Padding-
bottom
Padding
-left
Content
Height
Content width
Border-bottom-width
Border-top-width
Margin-top
Margin-bottom
Border
-left-
width
Margin
-left
Border-
right-
width
Margin
-right
Box width
B
o
x
h
e
i
g
h
t
61. CSS box model-basic concepts and
properties
<html>
<head>
<style>
div.ex
{
width:320px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>
62. Box model shorthand properties
Property
1.padding-{top,right,bottom,left}
2.border-{top,right,bottom,left}-width
3.border-{top,right,bottom,left}-color
4.border-{top,right,bottom,left}-style
5. border-{top,right,bottom,left}
6.margin- {top,right,bottom,left}
Number of values Meaning
One Assign this value to all four asscoiated
properties{top,right,bottom,left}
Two Assign first value to associated top and bottom properties ,
second value to associated right and left position
Three Assign first value to associated top property, second value to
right and left , and third value to bottom
Four Assign first value to associated top property,second to
right,third to bottom and fourth to left
63. Box model shorthand properties-
example
Padding:30px is equivalent to four declaration
Padding-top:30px;
Padding-right:30px;
Padding-bottom:30px;
Padding-left:30px;
Margin:15px 45px 30px is equivalent to
Margin-top:15px
Margin-right:45px
Margin-left:45px
Margin-bottom:30px