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

Cascading Style SheetsWeb Technologies I.

Zsolt Tóth

University of Miskolc

2018

Zsolt Tóth (UM) Cascading Style Sheets 2018 1 / 37

Introduction

Table of Contents

1 Introduction

2 CSSCascadingSyntax

3 DecorationsRangeText, LinkLists, Tables

4 PositioningBox ModelLayout, Floating

5 CSS 3


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


Introduction

Content vs Visualization

Useful 6= fancyRe-usability

Same content differentvisualization.Unified style

Professional look.Clothes make the man.CSS make the web app.


Introduction

Visualization

Proper representation isessentialRaw data

+ processing+ few records+ sample, example- reading- hide the trends

Chartsbarpieline

logarithmicdate

3rd party libsData Driven Document (JS)


CSS Cascading

Table of Contents

1 Introduction




5 CSS 3


CSS Cascading

Cascading Style Sheet

HTML 4.0Define stylestyle attributeHierarchicalEncapsulationCascading


CSS Cascading

Cascading

Merge Style SheetsPriority basedOrderingExtensionOverriding

Order (Priority)1 Browser2 External CSS3 Internal CSS (head)4 Inline

External can override the Internal CSS!


CSS Cascading

Browser CSS

Lowest priorityBrowser defaultUser’s Settingsone computer – manybrowsers


CSS Cascading

External CSS

head

Different (linked) fileReusableone page – many ExternalCSSCascading Order

1 <linkrel="stylesheet"

3 type="text/css"href="mystyle.css

"/>




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>


CSS Cascading

Inline Style

style attributeDefined for a single tagHighest prioritySpecial cases X

CSS XUse class attribute


CSS Syntax

Table of Contents

1 Introduction




5 CSS 3


CSS Syntax

Syntax

Plain textElements

Selectortagidclass

Decoration

/* comment */

Decorationsfontstextlinklisttablesmargin, padding, bordercolor

h1 {color: red; text-decoration: underline;}


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>


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>


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>


Decorations Range

Table of Contents

1 Introduction




5 CSS 3


Decorations Range

Range

Possible values of the decorationsfixed value set Xcolor ?size ?width, height ?

Decoration defines

decoration : value;


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


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


Decorations Text, Link

Table of Contents

1 Introduction




5 CSS 3



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;}



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 }



text

Text (characters together)Property group

text-aligntext-decorationtext-transformtext-indent

color

1 .warning{color: red;

3 text-decoration:underline;

text-tansform: uppercase;5 }



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;}


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’); }


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;}


Positioning Box Model

Table of Contents

1 Introduction




5 CSS 3



Box Model



Box Model

MarginOuter partDistancetop, right, bottom,left

PaddingInner partDistancetop, right, bottom,left

BorderSame as tablesstyle, widthborder-color

OutlineOuter border


Positioning Layout, Floating

Table of Contents

1 Introduction




5 CSS 3



Positioning

Fixposition:fixed;

Browser windowtop, left, right, bottom

Relativeposition:relative;

relative to its default position

Absoluteposition:absolute;

parent elementLayer stackz-index



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;}



@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 }


CSS 3

Table of Contents

1 Introduction




5 CSS 3


CSS 3

CSS 3

Current standardBackward compatibilityGood news

border-radiuslinear-gradienttext-shadowtext-justify

font-face

2D & 3D transformationsAnimationscolumn-count

Other new UI elements

Documents

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