Scribd
Upload
24 views34 pages

Lecture 9

The document discusses various CSS properties including display, float, opacity, position, fonts, and text. CSS display property controls how elements are displayed and values include block, inline, inline-block and none. CSS position property specifies the type of positioning for elements and values are static, relative, fixed, absolute and sticky. CSS fonts properties control various typographic aspects like font styles, weights, sizes etc.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views34 pages

Lecture 9

The document discusses various CSS properties including display, float, opacity, position, fonts, and text. CSS display property controls how elements are displayed and values include block, inline, inline-block and none. CSS position property specifies the type of positioning for elements and values are static, relative, fixed, absolute and sticky. CSS fonts properties control various typographic aspects like font styles, weights, sizes etc.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Web Technologies

CSS Properties
Today’s Lecture
• CSS Properties
– CSS Display
– CSS Float
– CSS Opacity
– CSS Position
– CSS Fonts
– CSS Text
– CSS Backgrounds
– CSS Lists
– CSS Tables
– CSS Icons
CSS Display
• It specifies that how an element is displayed.
• display property values are block, inline, inline-block and none.
• display: block
– It specifies an element to behave like block-level element.
– It starts on a new line and takes up the whole width.
– Examples are <div>, <h1> - <h6>, <p>, <header>, and <footer>
– Example: display <span> element as block-level elements:
• span { display: block; }
CSS Display
• display: inline
– It doesn’t start on a new line, only takes as much width as need.
– Examples are <span>, <a>, and <img>
– Example: display <li> element as inline-level elements:
• li { display: inline; }
CSS Display
• display: inline-block
– It specifies an element to generate a block box that will be flowed
with surrounding content (i.e., in the same line).
– We can apply height and width values in inline-block display, not in
inline display.
– Example: display <li> element as inline-block:
li { display: inline-block; }
CSS Display
<!DOCTYPE html> </head>
<html> <body>
<head> <h2>display: inline</h2>
<style> <div>comsats university islamabad, islamabad campus. <span class="a">CSC336</span>
span.a { Web Technologies. It's 3 credit hours course. 2 credit hours for theory, whereas 1 credit
display: inline; hour for lab.</div>
width: 150px; <h2>display: inline-block</h2>
height: 150px; <div>comsats university islamabad, islamabad campus. <span class="b">CSC336</span>
padding: 5px; Web Technologies. It's 3 credit hours course. 2 credit hours for theory, whereas 1 credit
hour for lab.</div>
border: 1px solid blue;
<h2>display: block</h2>
background-color: lightgreen;
<div>comsats university islamabad, islamabad campus. <span class="c">CSC336</span>
}
Web Technologies. It's 3 credit hours course. 2 credit hours for theory, whereas 1 credit
span.b { hour for lab.</div>
display: inline-block; </body>
width: 150px; </html>
height: 150px;
padding: 5px;
border: 1px solid blue;
background-color: lightgreen;
}
span.c {
display: block;
width: 150px;
height: 150px;
padding: 5px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
CSS Display
• display: none
– It specifies an element to generate no boxes at all.
– The element is completely removed.
• Examples h1 { display: none; } or .deadend { display: none; }
CSS Float
• It specifies how an element should float.
• It allows to move an element from the normal flow of a page
and position it to the left or right of its parent element.
• All other elements on page will then flow around floated element.
• Examples are img { float: left; } or img { float: right; }

<style>
img { float: right; }
</style>
<body>
<h1>The Float Property</h1>
<p>In this example…</p>
<p><img src="pic.jpg" alt="sparrow" style="width:140px;
height:170px; margin-left:15px;"> lorem ispum… </p>
</body>
CSS Opacity
• It specifies the opacity ( or transparency) of an element.
– Opacity property takes a value from 0.0 to 1
– The lower the value, the more transparent.
– img { opacity: 0.2; } 0.2 means 20% opaque (or 80% transparent).
– img { opacity: 0.5; } 0.5 means 50% opaque (or 50% transparent).
– img { opacity: 1; } 1 means 100% opaque (or 0% transparent).
CSS Opacity
CSS Position
• It specifies the type of positioning method used for an element.
• position property values are Static, Relative, Fixed, Absolute, and
Sticky.
• position: static
– HTML elements are positioned static by default.
– It is positioned according to the normal flow of the page.
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 5px solid lightgreen;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way;
it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
CSS Position
• position: relative
– It’s positioned relative to its normal position.
– Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its
normal position.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 5px solid lightgreen;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal
position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
CSS Position
• position: fixed
– It’s positioned relative to the viewport, which means it always
stays in same place even if page is scrolled.
– Top, right, bottom, and left properties are used to position the
element.
<html>
<head>
<style>
div.fixed {
position: fixed;
top: 0;
right: 0;
width: 336px;
border: 3px solid lightgreen;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p style="padding-bottom: 850px;">An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
CSS Position
• position: absolute
– It’s positioned relative to nearest positioned ancestor.
– If an absolute positioned element has no positioned ancestors,
it uses the document body, moves along with page scrolling, and
can overlap elements.
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid lightgreen;
}
div.absolute {
position: absolute;
top: 80px;
right: 20;
width: 200px;
height: 100px;
border: 3px solid lightblue;
}</style></head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div></body>
CSS Position
• position: sticky
– It’s positioned based on the user's scroll position.
– Sticky element "sticks" in the place.
<style>
div.sticky {
position: sticky;
top: 0;
background-color: lightblue;
border: 5px solid lightgreen;
}
</style>
</head>
<body>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:850px">
<p>In this example, the sticky element sticks to the top of the page (top:
0), when you reach its scroll position.</p>
<p>scroll down to see this sticky position. scroll down to see this sticky
position.</p>
<p>scroll down to see this sticky position. scroll down to see this sticky
position.</p>
<p>scroll down to see this sticky position. scroll down to see this sticky
position.</p>
<p>scroll down to see this sticky position. scroll down to see this sticky
position.</p>
</div>
</body>
CSS Fonts
• Generic Font Family
– In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter.
• Sans-serif fonts have clean lines (no small strokes attached).
• Monospace fonts letters have same fixed width.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.
– font-family: "Lucida Console", "Courier New",
monospace;
CSS Fonts
• Font Style
– It specifies the text style.
– It contains normal and italic values.
• p { font-style: italic; }
• Font Weight
– It specifies the weight of a font.
– It contains normal and bold values.
• p { font-weight: bold; }
• Font Variant
– It specifies whether a text should be displayed in a small-caps font.
– It contains normal and small-caps values.
• p { font-variant: small-caps; }
• Font Size
– It sets the size of the text.
– It can be in the pixels, em, and percentage.
• p { font-size: 32px; }
CSS Fonts
• Font Google
– If don’t want to use any of the standard fonts in HTML, use
Google Fonts API to add hundreds of other fonts.
– Just add a stylesheet link and refer to a font family.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>
• Font Shorthand
– To shorten the code, it is possible to specify all the individual
font properties in one property.
– font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
CSS Fonts
CSS Text
• Text Color
– It is used to set the color of the text.
– The color is specified by:
• a color name ("red")
• a HEX value ("#ff0000")
• an RGB value ("rgb(255,0,0")
– p { color: green;}
• Text Alignment
• It is used to set the alignment of a text.
• A text can be left, right, center, or justify.
– p { text-align: center;}
• Text Decoration
• It is used to set or remove decorations from text.
• It contains overline, line-through, underline, and underline overline
values.
– h3 {text-decoration: underline; }
CSS Text
CSS Text
• Text Transformation
• It specifies uppercase and lowercase letters in a text.
• It contains uppercase, lowercase, capitalize, and none values.
– p {text-transform: lowercase;}
• Text Spacing
• It specifies the text spacing.
• It contains word-spacing, letter-spacing, text-indent, line-height,
and white-space values.
• Text Shadow
• It is used to adds shadow to text.
• Example: horizontal shadow (30px) and vertical shadow (15px):
CSS Backgrounds
• It specifies the background effects for elements.
• background-color
– It specifies the background color of an element.
– With CSS, a color is most often specified by:
• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
– body { background-color: lightgreen; }
• background-image
• It specifies an image to use as the background of an element.
• body { background-image: url("hib.png"); }
CSS Backgrounds
• background-repeat
• By default, background-image property repeats an image
horizontally and vertically.
• Showing the background image only once, use background-
repeat property with value "no-repeat"
• body { background-image: url("hib.png"); background-
repeat: no-repeat; }
• background-position
– It specifies the position of the background image.
• body { background-image: url("hib.png"); background-
repeat: no-repeat; background-position: right top; }
CSS Backgrounds
• background-attachment
• It specifies whether the background image should scroll or be fixed
(will not scroll with the rest of the page):
• body { background-image: url("hib.png"); background-repeat: no-
repeat; background-position: right top; background-
attachment: fixed; }
• Background Shorthand
– To shorten the code, it is possible to specify all the background
properties in one single property.
– Order of the background property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
– body { background: green url("cui.png") no-repeat right
center; }
CSS Lists
• It specifies the styling and formatting of lists.
• Changing Marker Type of Lists
– It specifies the type of list item marker.
– It contains circle, square, upper-roman, lower-roman, upper-
alpha, lower-alpha etc.
CSS Lists
• Using Images as List Markers
– It specifies an image as the list item marker.
– Example: use image as a list marker:
• list-style-image: url("/examples/images/bullet.png");
CSS Lists
• Changing Position of List Markers
– It specifies the position of the list-item markers.
• list-style-position: outside;
– It means bullet points will be outside the list item.
• list-style-position: inside;
– It means bullet points will be inside the list item.
CSS Lists
• list-style Shorthand
– List-style property is a shorthand property.
– It is used to set all the list properties in one declaration.
– Order of the list-style property values:
• list-style-type (if a list-style-image is specified, the value of
this property will be displayed)
• list-style-position (specifies whether the list-item markers
should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)
– ul { list-style: square inside url("hib.gif"); }
CSS Tables
• It allows to control the layout and presentation of table elements.
• Table Borders
– It defines the borders for the tables.
– Example: set a black color border for <table>, <th>, and <td>
elements.
• table { border: 1px solid black; }
• th { border: 1px solid black; }
• td { border: 1px solid black; }
or
• table, th, td { border: 1px solid black; }
CSS Tables
• Collapse Table Borders
– Two distinct border models for setting borders on table:
• Separate - each table cell has its own distinct borders.
• Collapsed - adjacent table cells share a common border.
– Use border-collapse property to set the border model.
• table { border-collapse: separate; }
• table { border-collapse: collapse; }
– Example: collapse complete table borders and apply 1px black
border
• table, th, td {border: 1px solid black; border-collapse:
collapse; }
CSS Icons
• Simplest way to add an icon to HTML page is with an icon library; such
as “Font Awesome”.
• All the icons in the icon libraries can be customized with CSS (size,
color, shadow, etc.)
• To use the “Font Awesome” icons; go to fontawesome.com, sign-in and
get a code to add in the <head> section of HTML page:
<script src="https://kit.fontawesome.com/yourcode.js"> </script>
Summary of Today’s Lecture
• CSS Properties
– CSS Display
– CSS Float
– CSS Opacity
– CSS Position
– CSS Fonts
– CSS Text
– CSS Backgrounds
– CSS Lists
– CSS Tables
– CSS Icons
References
• https://www.w3schools.com/css/css_display_visibility.asp
• https://www.w3schools.com/cssref/pr_class_float.asp
• https://www.w3schools.com/css/css_image_transparency.asp
• https://www.w3schools.com/css/css_positioning.asp
• https://www.w3schools.com/cssref/pr_font_font-family.asp
• https://www.w3schools.com/css/css_text.asp
• https://www.w3schools.com/css/css_background.asp
• https://www.w3schools.com/css/css_list.asp
• https://www.w3schools.com/css/css_table.asp
• https://www.w3schools.com/css/css_link.asp

You might also like