cascading style sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04css.pdf ·...
TRANSCRIPT
![Page 1: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/1.jpg)
Cascading Style SheetsWeb Technologies I.
Zsolt Tóth
University of Miskolc
2018
Zsolt Tóth (UM) Cascading Style Sheets 2018 1 / 37
![Page 2: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/2.jpg)
Introduction
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 2 / 37
![Page 3: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/3.jpg)
Introduction
Content vs Visualization
Content
Device independentLogical units
Chapters, sections,paragraphsLists, enumerationsTables, figures
Datatextnumeric, integer, realcategorydate, time
Visualization
Device dependentIn print
colorcolor free
PDFWeb
PCTabletMobil
Define the style &appearance
Fonts, margincolor
Zsolt Tóth (UM) Cascading Style Sheets 2018 3 / 37
![Page 4: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/4.jpg)
Introduction
Content vs Visualization
Useful 6= fancyRe-usability
Same content differentvisualization.Unified style
Professional look.Clothes make the man.CSS make the web app.
Zsolt Tóth (UM) Cascading Style Sheets 2018 4 / 37
![Page 5: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/5.jpg)
Introduction
Visualization
Proper representation isessentialRaw data
+ processing+ few records+ sample, example- reading- hide the trends
Chartsbarpieline
logarithmicdate
3rd party libsData Driven Document (JS)
Zsolt Tóth (UM) Cascading Style Sheets 2018 5 / 37
![Page 6: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/6.jpg)
CSS Cascading
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 6 / 37
![Page 7: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/7.jpg)
CSS Cascading
Cascading Style Sheet
HTML 4.0Define stylestyle attributeHierarchicalEncapsulationCascading
Zsolt Tóth (UM) Cascading Style Sheets 2018 7 / 37
![Page 8: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/8.jpg)
CSS Cascading
Cascading
Merge Style SheetsPriority basedOrderingExtensionOverriding
Order (Priority)1 Browser2 External CSS3 Internal CSS (head)4 Inline
External can override the Internal CSS!
Zsolt Tóth (UM) Cascading Style Sheets 2018 8 / 37
![Page 9: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/9.jpg)
CSS Cascading
Browser CSS
Lowest priorityBrowser defaultUser’s Settingsone computer – manybrowsers
Zsolt Tóth (UM) Cascading Style Sheets 2018 9 / 37
![Page 10: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/10.jpg)
CSS Cascading
External CSS
head
Different (linked) fileReusableone page – many ExternalCSSCascading Order
1 <linkrel="stylesheet"
3 type="text/css"href="mystyle.css
"/>
<!--[if IE]>2 Non-IE browsers ignore this<![endif]-->
Zsolt Tóth (UM) Cascading Style Sheets 2018 10 / 37
![Page 11: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/11.jpg)
CSS Cascading
Internal CSS
head
<style> tagPart of the HTML documentNot reusable
1 <style>h1 {color: red;}
3 h2 {text-transform: uppercase
;5 color: #ff0000;text-decoration: blink;}
7 p {background-color: pink;}
</style>
Zsolt Tóth (UM) Cascading Style Sheets 2018 11 / 37
![Page 12: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/12.jpg)
CSS Cascading
Inline Style
style attributeDefined for a single tagHighest prioritySpecial cases X
CSS XUse class attribute
Zsolt Tóth (UM) Cascading Style Sheets 2018 12 / 37
![Page 13: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/13.jpg)
CSS Syntax
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 13 / 37
![Page 14: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/14.jpg)
CSS Syntax
Syntax
Plain textElements
Selectortagidclass
Decoration
/* comment */
Decorationsfontstextlinklisttablesmargin, padding, bordercolor
h1 {color: red; text-decoration: underline;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 14 / 37
![Page 15: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/15.jpg)
CSS Syntax
id
id attributeUniqueDefines part of the documentusually.#id
1 #importantStuff{color: #FF0000;
3 font-size: 24px;background: black;
5 }
1 <p id="importantStuff">Lorem ipsum dolor ... </p>
Zsolt Tóth (UM) Cascading Style Sheets 2018 15 / 37
![Page 16: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/16.jpg)
CSS Syntax
class
class attributeone element – many classesone class – many elements.className
Denotes role, function, etc.
1 .warning{color: yellow;
3 background-color: black;font-size: 24px;
5 }.error{
7 color: red;text-transform: uppercase
;9 }
1 <div class="warning">Warning 1</div><br/>
3 <div class="warning error">Warning 2</div>
Zsolt Tóth (UM) Cascading Style Sheets 2018 16 / 37
![Page 17: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/17.jpg)
CSS Syntax
class
1 .important{text-decoration:
3 underline;}
5 p.important{color: red;
7 text-transform:uppercase;
9 }
1 div.important{color: yellow;
3 background-color: black;font-size: 24px;
5 }
1 <div class="important">Important Div</div><br/>
3 <p class="important">Important Paragraph</p>
Zsolt Tóth (UM) Cascading Style Sheets 2018 17 / 37
![Page 18: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/18.jpg)
Decorations Range
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 18 / 37
![Page 19: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/19.jpg)
Decorations Range
Range
Possible values of the decorationsfixed value set Xcolor ?size ?width, height ?
Decoration defines
decoration : value;
Zsolt Tóth (UM) Cascading Style Sheets 2018 19 / 37
![Page 20: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/20.jpg)
Decorations Range
Color
*color
Defined colorsblackcyanblueyellow
RGB X#RRGGBB
CMYKCyan, Magenta, Yellow, Key(black)Prints
red #FF0000
green #00FF00
blue #0000FF
black #000000
white #FFFFFF
yellow #FFFF00
magenta #FF00FF
cyan #00FFFF
Zsolt Tóth (UM) Cascading Style Sheets 2018 20 / 37
![Page 21: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/21.jpg)
Decorations Range
Width, Height
Relative% of what?px pixel, device
dependentem depends on font sizeEx hight of the ’x’ char
Absolutecm 10−2 meter
mm 10−3 meterin 1 inch (≈ 2,54cm)pt 1 point = 1/72 inchpc 1 pica = 12 point =
1/6 inch
Zsolt Tóth (UM) Cascading Style Sheets 2018 21 / 37
![Page 22: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/22.jpg)
Decorations Text, Link
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 22 / 37
![Page 23: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/23.jpg)
Decorations Text, Link
background
Property groupbackground-colorbackground-imagebackground-repeat
background-attachmentbackground-position
1 body{
3 background-image:url("img_tree.png");
background-repeat:no-repeat;
5 background-position:righttop;
}
Short hand format
body {background:#ffffff url("img_tree.png") no-repeat right top;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 23 / 37
![Page 24: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/24.jpg)
Decorations Text, Link
font
Characters aloneFamilies
font-familySans-serfi, serif,monospaceArial, Times New Roman
Stylesfont-stylenormal, italic, oblique
font-size
font-weight
1 p{font-size: 12px;
3 font-style: italic;font-family: serif
5 }
7 p{font: 12px italic serif;
9 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 24 / 37
![Page 25: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/25.jpg)
Decorations Text, Link
text
Text (characters together)Property group
text-aligntext-decorationtext-transformtext-indent
color
1 .warning{color: red;
3 text-decoration:underline;
text-tansform: uppercase;5 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 25 / 37
![Page 26: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/26.jpg)
Decorations Text, Link
anchor
linksone tag - many states
unvisitedvisitedmouse overselected (clicked)
pseudo selectorsfixed order
1 /* unvisited link */a:link {color:#FF0000;}
3 /* visited link */a:visited {color:#00FF00
;}5 /* mouse over link */a:hover {color:#FF00FF;}
7 /* selected link */a:active {color:#0000FF;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 26 / 37
![Page 27: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/27.jpg)
Decorations Lists, Tables
Lists
Unordered Listlist-style-type
circlesquarediscnone
Ordered Listlist-style-type
decimallower-alphalower-greeklower-romanupper-{greek, latin,roman}
ol.math { list-style: lower-roman; }2 ul { list-style-image:url(’sqpurple.gif’); }
Zsolt Tóth (UM) Cascading Style Sheets 2018 27 / 37
![Page 28: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/28.jpg)
Decorations Lists, Tables
Tables
tableth, trborder
style, width, colortop, left, bottom,rightcollapse
width, heightpadding
table th tr{2 %border: solid 2px yellow
;font-size: 12px;
4 text-align: left;}th{
6 color: black;background: yellow;}
8 tr{color: yellow;
10 background-color: black;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 28 / 37
![Page 29: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/29.jpg)
Positioning Box Model
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 29 / 37
![Page 30: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/30.jpg)
Positioning Box Model
Box Model
Zsolt Tóth (UM) Cascading Style Sheets 2018 30 / 37
![Page 31: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/31.jpg)
Positioning Box Model
Box Model
MarginOuter partDistancetop, right, bottom,left
PaddingInner partDistancetop, right, bottom,left
BorderSame as tablesstyle, widthborder-color
OutlineOuter border
Zsolt Tóth (UM) Cascading Style Sheets 2018 31 / 37
![Page 32: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/32.jpg)
Positioning Layout, Floating
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 32 / 37
![Page 33: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/33.jpg)
Positioning Layout, Floating
Positioning
Fixposition:fixed;
Browser windowtop, left, right, bottom
Relativeposition:relative;
relative to its default position
Absoluteposition:absolute;
parent elementLayer stackz-index
Zsolt Tóth (UM) Cascading Style Sheets 2018 33 / 37
![Page 34: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/34.jpg)
Positioning Layout, Floating
Float
"Floating" objectsHorizontal positioningImagesText boxesLayout !!!<div> + CSSclear:both;
1 #leftMenu {min-width: 200px;
3 min-height: 450px;
max-width: 200px;5 float: left;
background-color:purple;
7 color: yellow;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 34 / 37
![Page 35: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/35.jpg)
Positioning Layout, Floating
@media
Same pageDifferent type of devicesStyle per device type
allscreenhandheldprintprojectiontv
@media screen2 {
p.test {4 font-family:
verdana,sans-serif;
font-size:14px;}6 }@media print
8 {p.test {
10 font-size:20px;color:red;}
12 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 35 / 37
![Page 36: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/36.jpg)
CSS 3
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 36 / 37
![Page 37: Cascading Style Sheets - users.iit.uni-miskolc.hutothzs/edu/webtech/lectures/04CSS.pdf · Introduction Table of Contents 1 Introduction 2 CSS Cascading Syntax 3 Decorations Range](https://reader033.vdocuments.mx/reader033/viewer/2022042007/5e708aa26937af4e1778c6cc/html5/thumbnails/37.jpg)
CSS 3
CSS 3
Current standardBackward compatibilityGood news
border-radiuslinear-gradienttext-shadowtext-justify
font-face
2D & 3D transformationsAnimationscolumn-count
Other new UI elements
Zsolt Tóth (UM) Cascading Style Sheets 2018 37 / 37