Internet publishing cascading style sheets, CSS Petr Zmostn room: - - PowerPoint PPT Presentation

▶

Mar 27, 2023 317 likes •606 views

Internet publishing cascading style sheets, CSS Petr Zmostn room: A-72a phone: 4222 e-mail: petr.zamostny@vscht.cz Visually perfect" pages Reasons leading to visually "perfect" pages Customer requirements to

SLIDE 1

Internet publishing cascading style sheets, CSS

Petr Zámostný room: A-72a phone: 4222 e-mail: petr.zamostny@vscht.cz

SLIDE 2

Visually “perfect" pages

Reasons leading to visually "perfect" pages

Customer requirements to have pages as similar to printed propagation materials as possible Beginners effort to show everything they know

SLIDE 3

Problems

High share of ballast code Limited support for minor platforms Misuse of graphics – long time needed to download pages Pages look poorly on unsupported resolutions Difficult content management

Changes in design must be made directly in documents

SLIDE 4

Old style formatting (bad example)

Why is it a bad example?

Formatting instructions are mixed with the information Appearance is hard to modify

TIP try to alter emphasized text color in example bellow to red

http: / / www.vscht.cz/ kot/ resources/ studijni-materialy/ ip-p-004/ spatny-priklad.html

SLIDE 5

Better example

Why is it better than the example in previous slide?

Formatting is separated from the information Appearance can be easily modified

Look of all instances of < em> elements can be modified by altering the style

http: / / www.vscht.cz/ kot/ resources/ studijni-materialy/ ip-p-004/ lepsi-priklad.html

SLIDE 6

Cascading Style Sheets

HTML document formatting separated from the main content Possible ways of its implementation

Style specification for each element in ‘style’ attribute Style definition in document head Linking external style sheet

SLIDE 7

Style definition in HTML head

Good for single HTML file

<head> <style type="text/css"> <!– this line is HTML comment (hides style from ancient browsers ... Style definition ...

</style> </head>

SLIDE 8

CSS rule structure

selector { property1: value; property2: value; ... propertyN: value }

selector

The simplest selector is type selector (the name of

element, e.g. b, p, div … )

property

Name of adjustable property (> 90 in CSS 2.1)

value

value assigned to property
property type specify which values are allowed

SLIDE 9

Property values v CSS

Distances, sizes URL Strings

‘string’ “string”

Keyword Color

SLIDE 10

Distances and sizes in CSS

Relative

Unit Meaning em Corresponds to the font size in current element (corresponds to the font size of parent element if used for setting the font size itself) ex Corresponds to the ‘x’ letter height px pixel – one point in the display device

SLIDE 11

Distances and sizes in CSS

Absolute These units can be used only if the physical resolution is known

Unit Meaning in Inch cm Centimeter mm Millimeter pt Typographic point (1 pt = 1/ 72 inch) pc Typographic pica (1 pc = 12 point)

SLIDE 12

Distances and sizes in CSS

Precentuals

Unit Meaning % Sets size proportionally to another size Reference size is defined for each property that allow percentuals

SLIDE 13

URL

url(text_url) May or may not be closed in double quotes

background: url("http: / / www.example.com/ pinkish.png")
background: url(http: / / www.example.com/ pinkish.png)

SLIDE 14

Rules merging

Rules with the same declarations can be merged into single rule h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Is equivalent to: h1, h2, h3 { font-family: sans-serif }

SLIDE 15

Colors in CSS

Syntax Com m ents color_name Color keyword (red, green, blue, magenta, ...) rgb(x,x,x) RGB components 0-255 rgb(y% , y% , y% ) RGB percentuals 0-100% # rrggbb Hexadecimal RGB components 00-ff

Font properties

property Description Values font-family Preferred font families family-name generic-family

family-name

Coma separated list of font names in descending priority order First available font is used Example.

font-family: "Franklin Gothic Book", "Arial"; „Franklin Gothic Book“ is used if it is present on targer computer, otherwise Arial is used

SLIDE 17

Font properties

property Description Values font-family Preferred font families family-name generic-family

generic-family

Generic font famillies – always available
Choices

'serif' (e.g. Times) 'sans-serif' (e.g. Helvetica) 'cursive' (e.g. Zapf-Chancery) 'fantasy' (e.g. Western) 'monospace' (e.g. Courier)

The list should always end by the generic family

member

font-family: "Franklin Gothic Book", "Arial", sans- serif;

SLIDE 18

Font properties

property Description Hodnoty font-style Font style normal italic

blique

font-variant Font variant normal small-caps font-weight Font weight (boldness) normal bold bolder lighter 100 200 ... 900

SLIDE 19

Font properties

property Descriptions Values font-size Font size xx-small x-small small medium large x-large xx-large smaller larger délková jednotka %

Sizes from xx-small to xx-large are absolute Smaller / larger indicate size by one notch smaller/ larger than the parent element Similarly behave percentages %

SLIDE 20

Color and background properties

property Description Values color Text color color background-attachment Sets if the background image scrolls with the text or remains static scroll fixed background-color Sets element background color color transparent background-image Image on background of the element, can tile to fill up space url none background-position Alignment of the background image top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat Tiling of the background image repeat repeat-x repeat-y no-repeat

SLIDE 21

Text properties

property Description Values letter-spacing Spaces between letters normal length text-align Vertical alignment of the text left right center justify text-decoration Line ornaments around text none underline

verline

line-through blink text-indent Indentation of the first line of the block element length % text-transform Font case transformation none capitalize uppercase lowercase white-space Interpretation of spaces, tabs, linebreaks normal pre nowrap word-spacing Spaces between letters normal length

SLIDE 22

Formatting model

Element content padding margin

border

SLIDE 23

Margin and padding properties

property Description Values Margin Shorthand properties for setting up all margins margin-top margin-right margin-bottom margin-left margin-bottom Bottom margin size auto length % margin-left Left margin size auto length % margin-right Right margin size auto length % margin-top Top margin size auto length %

Padding properties are defined analogically
e.g. padding-left

SLIDE 24

Border properties

property Description Values border-color Border color Color border-style Border style none hidden dotted dashed solid double groove ridge inset

utset

border-width Border width (applies even if the border is transparent) thin medium thick length

Each side of the border can be specified separately by

properties border–top-, -bottom-, -left-, -right-

e.g. border-left-width

SLIDE 25

List properties

property Description Values list-style-image Uses specified image as the list bullet character none url list-style-position Bullet position relatively to box content edge inside

utside

list-style-type Bullet/ numbering type none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

SLIDE 26

Properties inheritance

<head> <style type="text/css"> p { color: red } </style> </head> <body> <p>Red <em>text<em></p> </body>

The word “text” dispalys in red because the red property

is inherited from the parent element

Most properties are inherited

SLIDE 27

W3schools examples

http: / / www.w3schools.com/ css/ css_examples.asp

SLIDE 28

Tools for easier CSS development

TopStyle Lite 3.10

http: / / www.newsgator.com/ download/ products/ ts3lite.exe