1
BLOCK 1 PART 5 THE CSS BOX MODEL WEB TYPOGRAPHY, ‗COLOR‘ AND GRAPHICS
Prepared By: Mrs. Lobna AbuSerrieh
Positioning with CSS
2
CSS provides the simple mechanism for adding style in terms of fonts, ‗colors‘ and positioning to the content of Web documents.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
1 Positioning with CSS
3
For the purposes of using CSS to display content in a browser, every element in an XHTML document is considered to be a rectangular box of ‗content area‘ surrounded by ‗padding‘, a ‗border‘ and ‗margins‘.
Each box is then positioned using one of the three modes available in CSS.
These are ‗normal‘, ‗float‘ and ‗absolute‘.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Page layout 4.1 Visual formatting model 4
CSS visual formatting model describes how element content boxes should be handled by user agents.
Each element in the HTML document tree will generate zero or more boxes.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
2 Page layout 4.1 Visual formatting model 5
According to the W3C the layout of these boxes is:
– Box dimensions and type.
– Positioning scheme (normal flow, float and absolute positioning).
– Relationships between elements in the document tree.
– External information (e.g. viewpoint size, intrinsic dimensions of images, etc.).
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Page layout 4.2 The CSS Box Model 6
The CSS box model is quite simply built around the idea that the content is for a web application is placed within a set of nested rectangles.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
3 Page layout 4.2 The CSS Box Model 7
Within any single box, there is the core content area, at the center where the content goes.
This is then surrounded by the rectangles that define the padding, the border and the margin.
CSS allows designers to properties for each of the four sides of the box.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Page layout 4.2 The CSS Box Model 8
Padding properties specify the area between the content of the box and the border.
Border properties specify border-style, border-color and border-width for all four borders.
Margin properties specify the outer margins.
Boxes can combine in CSS to form a single margin
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
4 Typography 5.1 Web Typography 9
The look of a website relies on a number of factors such as page layout and navigational cues that improve the site usability and assist a visitor in finding their way when visiting site .
Typography mainly deals with how elements are placed and menus are positioned when designing a website.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.2 Design Choices 10
There are a number of simple design principles should be followed when designing for the web:
1. Choose a few select fonts and sizes
2. Use fonts that are available on user‘s devices
3. Design for legibility and for usability.
4. Avoid using text as graphics.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
5 Typography 5.2 Design Choices 11
According to webstyleguide.com:
Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.2 Design Choices 12
According to webstyleguide.com:
Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, and then they parse the language and read.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
6 Typography 5.2 Design Choices 13
According to webstyleguide.com
Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.3 Fonts and style choices 14
Consistent formatting is important for the look and the feel and the legibility of a website or application.
Choices for font type, font sizes, heading sizes and sub-headings, paragraph spacing should be determined early in the design process.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
7 Typography 5.3 Fonts and style choices 15
When using an external CSS style sheet we can control the look across multiple documents for the same website.
CSS recognizes different media types that define the properties that make sense for any particular target media, such as ‗screen‘ for color computer screen and ‗handheld‘ for handheld devices with small screens.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.4 Designing for legibility 16
Good typography depends on the visual contrast between one font and another, as well as among text blocks, headlines, and the surrounding white space.
Strong contrast and distinctive patterns attract the eye and brain of the reader.
Don‘t cram every page with dense text.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
8 Typography 5.4 Designing for legibility 17
When your content is primarily text, typography is the tool you use to ―paint‖ patterns of organization on the page.
The first thing the reader sees is the overall pattern and contrast of the page, not the title or other details.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.4 Designing for legibility 18
Regular and repeating patterns through pages help the reader to establish the location and organization
of your information and increase legibility. Lynch and Horton, 2008
Choosing the default size and face of type for your designs will have some bearing on the legibility of your website.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
9 Typography 5.5 Using Text as Graphics 19
You should try to avoid representing any text as graphics, but sometimes web application requires a font that represents a brand such as Google logo.
Then designers might choose to present that brand in such a graphic form to avoid forcing visitors to install the font on their operating systems.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.5 Using Text as Graphics 20
There are two disadvantages to this approach
1. Text that is presented in graphic form it will not be found as a text by any search engine.
2. The design will not be understood by screen readers.
So to address these concerns, a suitable alternative text, or ‗alt‘ text for the graphic should be implemented.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
10 Typography 5.5 Using Text as Graphics 21
Look at Activity 1 Signal to noise ratio Block 1 Part 5 Page 15
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Typography 5.6 The Web Open Font Format (WOFF) 22
The Web Open Font Format is an open format for using fonts on the Web.
The Web Open Font Format recognizes that having restricted font choice presents limitations for designers in creating site designs.
WOFF is not yet a finalized recommendation from the W3C.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
11 Typography 5.6 The Web Open Font Format (WOFF) 23
People design fonts; they save or convert these fonts to WOFF and they use other technologies (like (X)HTML, CSS, SVG) to inform browsers and other software which fonts to download and apply.
Until now, downloadable fonts have not been common on the Web due to the lack of an interoperable font format.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
6 Color and Graphics 6.1 Color representation in CSS 24
When you view any color on a computer monitor it is a mix of the 3 basic colors: red, green and blue (RGB).
In displaying the specific color chosen, the monitor displays each color channel from no color (0%) to full color (100%).
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
12 Color and Graphics 6.1 Color representation in CSS 25
CSS has the flexibility to represent ‗color‘ values in three distinct and different formats. These are ‗Name, ‗Hexadecimal‘ and ‗RGB‘
For example, the color red for text inside the paragraph element, can be written as p {color:red;}, or p {color: #ff0000;} or p {color:rgb(255,0,0);}
Table 1 in Block 1 Part 5 Page 17 shows CSS colour equivalents. TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Color and Graphics 6.1 Color representation in CSS 26
W3C only assigns a limited number of names to recognized colors, this results in a very limited pallet.
Both RGB and hexadecimal ‗color‘ values allow a wider choice than color names.
The main problem with specifying colour is that different monitors display different colour depths; these can be 8-bit, 16-bit, 24-bit, 32-bit and 64-bit.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
13 Color and Graphics 6.2 Graphic file formats 27
In web page, we are looking at information presented as areas of content.
This content might be presented as boxes containing text, or as contributing spaces between the content
One of the most important means of presenting information is through the use of graphics.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
Color and Graphics 6.2 Graphic file formats 28
there are four commonly used graphics formats
GIF, JPG, PNG, SVG
They use compression to create the best image they can under compression technologies
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
14 6.2 Graphic file formats GIF 29
Graphics Interchange Format images are compressed images that do not lose color information when compressed (‗lossless‘ compression).
It is restricted to 8-bit images, which are constructed from a palate of 256 colors only.
The GIF format does support transparency which means that the colors of the background can, if you so wish, shine through parts of the image. TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
6.2 Graphic file formats JPG 30
JPG, the Joint Photographic Experts Group will usually be photographs and it can be up to 24-bit images that carry millions of colors.
it is called ‗lossy‘ in that when the graphic is compressed some information loss occurs
In Photoshop we can save images in the JPG format with a choosen amount of compression.; the more the compress the more information we lose. TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
15 6.2 Graphic file formats PNG 31
PNG, Portable Network Graphics image format was designed for the web and is similar to GIF.
PNG supports 8-bit images, 16-bit images and 24-bit true colour images.
PNG does not compress as efficiently as JPG, so it is not necessarily the best choice for presenting photographic images across a network.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
6.2 Graphic file formats SVG 32
SVG, the Scalable Vector Graphics Format According to the W3C, SVG is a language for describing two- dimensional graphics in XML.
SVG allows for three types of graphic objects:
- Vector graphic shapes (e.g., paths consisting of straight lines and curves),
- Images
- Text.
TT284 Block 1 Part 5 Mrs. Lobna AbuSerrieh
16