Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
Lecture 4: CSS
description
Transcript of Lecture 4: CSS
![Page 1: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/1.jpg)
Lecture 4: CSS Text Properties, Line Box, CSS
![Page 2: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/2.jpg)
Text PropertiesProperties related to the display of text.
Text-align : left, right, center
<p style=“text-align : right”> I like FSU!</p>
![Page 3: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/3.jpg)
Font FamiliesA font family is a collection of related fonts.
Each character is drawn relative to a rectangular character cell (also known as the character’s content area)
MCell Height
Baseline
Baseline Height
![Page 4: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/4.jpg)
Font FamiliesThe fonts within a font family differ from one another in
attributes such as boldness and font-size.
<p style=“font-family: Times New Roman” >
A List of font families:SerifMonospaceTimes New RomanArial
![Page 5: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/5.jpg)
Font FamiliesNote: there is no guarantee that a font family that you would
like to display in an HTML document will be available on a browser.
Font-family: “Edwardian Script ITC”, Arial, Times New Roman.
![Page 6: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/6.jpg)
Length Specifications Font size is one of the key features used to distinguish
between individual fonts within a font family.
Font-size property is used to specify the size of a font.
In CSS, a length value is represented by a number followed by one of the unit identifiersFont-size: 12ptFont-size: 15px
![Page 7: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/7.jpg)
Length Unit pt – point: 1/72 inchpc – pica: 12 pointspx – pixel: typically 1/96 inch% - how much percent of the size of the parent element.
![Page 8: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/8.jpg)
Font PropertiesFont-size: specify the size of the character cells in a font
within a font family.E.g., font-size: 12 ptFont-size: 85%
<div id=“d1” style=“font-size: 12pt”> <div id=“d2” style=“font-size: 200%”> What is the size of “d2” in terms of pt?
![Page 9: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/9.jpg)
Font PropertiesFont-weight: bold or normal (default value).
font-variant: small-caps. All lowercase letters are converted to uppercase. However, the converted
uppercase letters appears in a smaller font size.
Font-style: normal, italic, oblique.
![Page 10: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/10.jpg)
Line BoxesWe can imagine that a <p> element as being rendered as a
rectangular box composed of a stack of imaginary boxes called Line Box.
The height of line boxes is typically the height of a character cell.
You can override the default value with line-heightLine-height: 20ptLine-height: 150%
![Page 11: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/11.jpg)
Line BoxesIf the height of a line box is greater than the character cell
height, then the character cells are vertically centered within the line box.
Line HeightG
![Page 12: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/12.jpg)
CSS Text Propertiestext-decoration: underline, overline, line-through.letter-spacing: additional space to be included between
adjacent letters in words. Negative value indicates space to be removed.
word-spacing: additional space to be included between adjacent words. Negative value indicates space to be removed.
text-indent: Specify for block elements and table cells to indent text within first line box
text-align: left, right, center, justified.
![Page 13: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/13.jpg)
Text ColorColor Name RGB Value
Black #000000
Gray #808080
Silver #c0c0c0
White #ffffff
Red #ff0000
Lime #00ff00
Blue #0000ff
Yellow #ffff00
Maroon #800000
![Page 14: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/14.jpg)
Next ClassCSS Box Model
Content area, padding area, margin area, border.
![Page 15: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/15.jpg)
CSS Box ModelIn CSS, every element of an HTML occupies a rectangular
area – a box – on the screen. Every box consists of a nested collection of rectangular subareas.
![Page 16: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/16.jpg)
CSS Box ModelSpan{
margin-left: 10px; border-left-width: 10px; border-left-color: red; border-left-style: solid; padding-left: 5px; border-right-width: 5px; border-right-style: solid;}
![Page 17: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/17.jpg)
Box Model Propertiespadding-{top, bottom, right, left}border-{top, bottom, right, left}-widthborder-{top, bottom, right, left}-colorborder-{top, bottom, right, left}-style
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
margin-{top, bottom, right, left}auto – the browser will compute a value length
![Page 18: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/18.jpg)
Box Model PropertiesBackground-color property specifies the color underlying
the content, padding, and border areas of an element’s box.
Margin area of the box is not covered by background-color.
![Page 19: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/19.jpg)
Normal Flow Box LayoutIf you have many elements (boxes), how does the browser
arrange them?
If one HTML element is part of the content of a second HTML element, then the box corresponding to the first element will be contained within the content area of the box for the second element.
This is called normal flow processing.
![Page 20: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/20.jpg)
HTML Box Layout<html>
</html>
<head>
</head><title>Hello World </title>
<body>
<p>Welcome to the World </p>
</body>
![Page 21: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/21.jpg)
Normal Flow Box LayoutWidth: each block element has a width property that defines
the width of the content area of the element’s block box.
The default value is auto: the box will be stretched so that its left and right outer edges align with the left and right content edges of its parent box.
The value of width could be:absolute length (pt, px, pc)%
![Page 22: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/22.jpg)
Normal Flow Box LayoutIs the child element will be placed in the middle of the
parent element if the child element’s width is 50%?
In order to center the child element, you must specify: margin-left: auto;
margin-right: auto;
![Page 23: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/23.jpg)
Normal Flow Box LayoutHeight: the height of a box is determined by its content. It is
sufficient to contain all the contents with an element box.
The initial value of height is 0.
You can override a value of height for an given element.e.g., p{ height: 300px }
![Page 24: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/24.jpg)
Inline BoxA block box can contain inline element such as span.
The browser will generate inline boxes for inline elements.
If the top or bottom of an inline box extends beyond the corresponding edge of the line box, the line box height will automatically be expanded as needed.
Nested Inline Boxes
![Page 25: Lecture 4: CSS](https://reader035.fdocuments.us/reader035/viewer/2022062501/568163cd550346895dd50fd2/html5/thumbnails/25.jpg)
Next ClassBeyond the Normal Flow
Relative PositioningAbsolute PositioningFloat Positioning
Style propertiesListsTables