Department Vrije beatsigner.com Universiteit of Computer Brussel Science Department of Computer Science Vrije Universiteit Brussel beatsigner.com 2 December 2005
visualisation of HTML elements defined by styles ▪ enables multiple presentations of the same content ▪ media-specific style sheets via the media attribute ▪ <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" media="screen, tv" /> <link rel="stylesheet" type="text/css" href="alternative.css" media="print, handheld" /> </head> <body> ... </body> </html> October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 2
that HTML 3.2 introduced some elements and attributes (e.g. color) for the visual appearance in 1997 ▪ CSS2 specification published in 1998 superset of CSS1 ▪ functionality for relative, absolute and fixed positioning of elements ▪ media types ▪ ▪ CSS3 divided into separate modules (documents) 2D & 3D transforms ▪ transitions ▪ flexible box layout (Flexbox) ▪ media queries ▪ ... ▪ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 3
a selector - HTML element ▪ a declaration block (at least one property and value) - surrounded by curly braces - multiple properties are separated with a semicolon selector { property1: value1; property2: value2; } ▪ Example h1 { color: red; font-size: 10px; } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 5
elements in an HTML document (case sensitive) ▪ Universal selector ▪ all elements in the document * { ... } ▪ Element/Type selector ▪ specific element names p { ... } h1, h2, h3 { ... } /* also called grouping selector */ ▪ ID selector ▪ element with a specific value for the id attribute #intro { ... } /* always more weight than class selector */ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 6
class attribute value (elements can have more than one class) .main { ... } /* any element with a 'main' class value */ h1.main { ... } /* only h1 elements with a 'main' class value */ ▪ Child selector ▪ elements that are direct children of other elements p>a { ... } ▪ Descendant selector ▪ elements that are descendants of other elements p a { ... } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 7
attribute value p[type] { ... } /* p element with an attribute called type (existence) */ p[type="new"] { ... } /* p element with attribute value 'new' (equality) */ p[type^="n"] { ... } /* type attribute value starts with letter 'n' */ p[type*="do"] { ... } /* type attribute contains substring 'do' */ ▪ Pseudo element selectors ▪ treated like extra elements h1.main::first-letter { ... } ▪ Pseudo class selector ▪ acts like additional values for a class attribute a:link { ... } a:hover { ... } a:active { ... } a:visited { ... } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 8
be applied ▪ Furthermore, we have the following internal priorities (1) (2) (3) rules containing IDs rules containing classes (or pseudo classes) and attributes rules containing elements (or pseudo elements) ▪ Rules for selectors that are more specific than the others have preference * { color: red; } p b { color: pink; } /* more specific than p selector */ p { color: blue; } p { color: green; } /* last rule for p selector */ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 9
inherited by most child elements ▪ leads to simpler style sheets ▪ The inheritance of properties can be enforced via the inherit keyword body { color: red; /* inherited by child elements */ padding: 10px; /* normally not inherited */ } p{ padding: inherit; /* explicitly inherited from parent element */ } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 10
be included in HTML inline style ▪ internal style sheet ▪ external style sheet ▪ ▪ Inline style defined via the style attribute of the corresponding HTML element ▪ still mixes content and presentation and should therefore be avoided whenever possible ▪ <h1 style="color:red; font-size:10px">Urgent Tasks</h1> October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 11
single document has a unique style ▪ defined in the <head> section ▪ e.g. used in HTML-encoded emails ▪ <html> <head> ... <style> h1 {color: red; font-size: 10px;} p {color: blue;} ... </style> </head> <body> ... </body> </html> October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 12
▪ changes to the overall appearance of an entire website can be managed in a single file - removes a lot of potential redundancy - saves a lot of time - leads to more consistent websites <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> ... </body> </html> October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 13
a single one ▪ properties/values are inherited from more specific style sheets ▪ Overriding priorities inline style (highest priority) (2) internal style sheet (3) external style sheet (4) default browser style ▪ Note that if the link to the external style sheet in the <head> section is placed after the internal style sheet, then the external style sheet will override the internal one (1) ▪ A style sheet can import other style sheets via @import October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 14
(content) by default the box is just big enough to keep its content ▪ padding ▪ - transparent area around the content ▪ border - around the padding ▪ margin - transparent area around the border margin border padding content October 20, 2026 div { width: 300px; /* only content area */ padding: 10px; border: 10px red; margin: 5px; } Beat Signer - Department of Computer Science - [email protected] 15
box only defines the width of the content ▪ padding and border are added to that width ▪ Behaviour can be changed via the box-sizing property content-box (default) or border-box ▪ width in border-box "mode" includes padding and border width ▪ *{ box-sizing: border-box; /* use border-box for the whole page */ } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 16
or inline boxes ▪ block-level boxes start on a new line - main building blocks of any layout - e.g. <p>, <h1>, <ul> or <li> ▪ inline boxes flow between surrounding text - e.g. <b>, <i> or <img> ▪ Block-level boxes (elements) can be grouped ▪ e.g. number of elements grouped via <div> in a containing or parent element ▪ Behaviour can be changed via display property li { display: inline; /* no longer treated as block-level element */ margin-right: 5px; /* list items shown next to each other with space */ } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 17
used ▪ Absolute units ▪ px: pixels are not necessarily consistent across devices - 1px implies multiple device pixels for high-resolution screens cm, mm and in: one centimetre is 37.8 pixels, a millimetre is 3.78 pixels and an inch is 96 pixels ▪ pt: a point is equal to 1/72 of an inch (common in print design) ▪ ▪ Relative units %: percentage measured against the content ▪ em: ems are relative to the font size of the element ▪ rem: rems are relative to the font size of the root element (<html>) ▪ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 18
property ▪ static (default), relative, absolute or fixed position ▪ In normal flow (static) each block-level element starts on a new line p{ position: static; /* optional since it is the default anyway */ width: 400px; } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 19
to where it would have been shown p.test { position: relative; width: 400px; left: 100px; /* move 100 pixels to the right */ top: 20px; /* move 20 pixels down */ } ▪ Absolute position takes box out of the normal flow ▪ relative to parent (containing) element p.test { position: absolute; width: 200px; left: 300px; /* position the element 300 pixels from the left */ top: 0px; /* position element at the top (of the containing element) */ } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 20
the browser window ▪ scrolling no longer changes the position p.test { position: fixed; width: 400px; right: 0px; top: 0px; /* positions the paragraph at the top right corner */ } ▪ Boxes with a relative, absolute or fixed position might overlap ▪ October 20, 2026 z-index property can be used to control the ordering (higher values are closer to the front) Beat Signer - Department of Computer Science - [email protected] 21
makes it easier to define flexible responsive layout structures ▪ Enables the layouting of flex items (child elements) in a flex container (parent element) ▪ includes different properties to be set on flex items as well as flex containers https://css-tricks.com/snippets/css/a-guide-to-flexbox/ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 22
two-dimensional gridbased layout system ▪ October 20, 2026 based on the concept of a grid container (display: grid) and grid items Beat Signer - Department of Computer Science - [email protected] 28
fixed size to fit common desktop and laptop screen sizes ▪ e.g. 960-pixel-wide layout ▪ Around 2007 mobile phones able to render standard HTML pages ▪ dedicated mobile version of website (e.g. 320-pixel-wide) - redirection to m-dot websites October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 29
more versions added ▪ different phone display sizes and new devices (e.g. iPad) ▪ Design websites that can easily be viewed on devices with various screen sizes ▪ Only one version of the website (one HTML structure) ▪ design rearranges itself to perfectly fit the screen size - e.g. single column on mobile device and multiple columns on wider desktop screens use different CSS styles based on media queries ▪ only since CSS3 it is possible to query features such as the screen width and height or the colour capabilities ▪ flexibility via relative horizontal measurements (e.g. percentage) ▪ should automatically look decent on future devices ▪ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 30
the design of a website ▪ address user needs ▪ Most important information should be at the top of a page ▪ Divide content into chunks that can be rearranged on a page ▪ All users (regardless of the device) should have access to all the content of a website October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 31
web page ▪ without scrollbars, browser borders etc. ▪ HTML5 introduced a new method to control the viewport via a meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> ▪ Avoid large fixed width for elements ▪ elements (e.g. images) that are wider than the viewport might lead to horizontal scrollbars (poor user experience) ▪ Do not rely on a particular viewport width for a page to render well October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 32
▪ e.g. screen or print ▪ CSS3 allows media queries to apply different declaration blocks based on device properties (e.g. viewport width) ▪ e.g. typically change the number of columns, navigation, font size or image size body { font-size: 12px; background-color: red; } @media only screen and (min-width: 40em) { body { background-color: green; } } October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 33
CSS3 viewport width (width) and height (height) ▪ screen width (device-width) and height (device-height) ▪ orientation (orientation) which can be landscape or portrait ▪ aspect ratio (aspect-ratio or device-aspect-ratio) ▪ - e.g. 16:9 or 4:3 ▪ resolution (resolution) of the device screen - e.g. 300 dpi does the device support colour (color) ▪ … ▪ October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 34
media query to change the design ▪ e.g. change the number of columns or font size ▪ Design range is the range between two breakpoints ▪ October 20, 2026 design should look good anywhere within a design range Beat Signer - Department of Computer Science - [email protected] 35
basic design (default design) for the narrowest design range and devices that might not support media queries ▪ Progressive enhancement via different layers ensures that page is also accessible without CSS and JavaScript 1. 2. 3. October 20, 2026 HTML CSS (with potential media queries) JavaScript Beat Signer - Department of Computer Science - [email protected] 36
via max-width property img { max-width: 100%; /* do not scale up images */ height: auto; } ▪ Offer different sizes of an image ▪ e.g. via the HTML5 picture element <picture> <source srcset="smallfBird.jpg" media="(max-width: 300px)"> <source srcset="bird.jpg"> <img src="bird.jpg" alt="Bird"> /* fallback */ </picture> October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 38
set of CSS style sheets for the formatting of key HTML components ▪ additional reusable components (e.g. advanced buttons) ▪ JavaScript components (e.g. UI elements) ▪ ▪ W3.CSS modern CSS framework ▪ responsive mobile first approach ▪ smaller and faster than other CSS frameworks ▪ ▪ … October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 39
an XML document format ▪ Compiler (node.js application) translates XML to HTML ▪ Presentation engine based on HTML5 and related APIs ▪ October 20, 2026 e.g. WebSockets for connectivity Beat Signer - Department of Computer Science - [email protected] 40
Peterson, O'Reilly Media (1st edition), June 2014 ISBN-13: 978-1449362942 ▪ HTML and CSS: Design and Build Websites, Jon Duckett, Wiley (1st edition), November 2011 ISBN-13: 978-1118008188 October 20, 2026 Beat Signer - Department of Computer Science - [email protected] 42
and B. Signer, MindXpres: An Extensible Content-driven Cross-Media Presentation Platform, Proceedings of WISE 2014, 15th International Conference on Web Information System Engineering, Thessaloniki, Greece, October 2014 ▪ October 20, 2026 https://beatsigner.com/publications/roels_WISE2014.pdf Beat Signer - Department of Computer Science - [email protected] 45
signer
juanmartin2026
hiola
drpoonamkc
terazawa
kekekenta
akiraasano
matleenalaakso
3l4l5
kaityo256
bunnchinn3
bvr7352
kimpetersen
codingconduct
soudai
bethany
stephaniewalter
tessaabrams
csswizardry
techseoconnect
lara
sabderemane
cromwellryan
trallard
