HTML elements are left-aligned by default, that is they begin at the left margin.
The CSS text-align property configures the alignment of text and inline elements within block elements such as headings, paragraphs and divs.
The values for the text-align property are left (default), center, right and justify.

The width property configures the width of an element’s content in the browser.
Be careful the width of an element displayed in the browser includes the width of the element’s content, padding, border and margin – it is not the same as the value of the width property, which only configures the width of the actual content.

The min-width property sets the minimum width of an element’s content in the browser.The minimum width value can prevent content jumping around when a browser is resized.

The max-width property sets the maximum width of an element’s content in the browser.The maximum width value can reduce the possibility ot text stretching across large expanses of the screen by a high-resolution monitor.

The box model is one of the fundamental concepts in CSS, it is used to configure the appearance of elements and the overall layout of documents.
It describes the way an element has the potential for a border, padding, and margin, and how the border, padding, and margin are applied.

The margin is the area outside of the element. It never has color; it is always transparent.
The border extends around the element, on the outer edge of any padding. The border can be of several types, widths, and colors.
The padding exists around the content and inherits the background color of the content area.
The content is surrounded by padding.

Colors

Colors can greatly influence visitors. When choosing colors make sure they are used judiciously and with respect.

Best practices when using colors include:

• Use a natural palette of colors.
  • using natural colors /avoid ultrabright colors .
• Use a small color palette.
  • Focus on three or four main colors with a few complimentary colors, at the most.
• Consider your demographics.
  • younger people and older people don’t have same preferences ,it applies same for men and women
  • people from different geographic regions and cultures.

Color schemes in Web design:

• Analogous – Colors that are adjacent to each other on the color wheel, such as yellow and green.One color is the dominant color and its analogous friend is used to enrich the display.
• Complementary – Colors that are opposite from each other on the color wheel, such as a warm color (red) and a cool color (green).
• Triadic – Three colors that are equally spaced around the color wheel. The triadic scheme provides balance while still allowing rich color use.

Using hexadecimal colors

The hexadecimal color format is #rrggbb, in which rr, gg, and bb are two-digit hexadecimal values for the red (rr), green (gg), and blue (bb) components of the color.

If you’re not familiar with hexadecimal numbers, don’t sweat it. Just remember that FF is the maximum and 00 is the minimum.

Use one of the following codes for each component:

• FF means full brightness.
• CC means 80 percent brightness.
• 99 means 60 percent brightness.
• 66 means 40 percent brightness.
• 33 means 20 percent brightness.
• 00 means none of this color component.

For example, bright red is #FF0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999.

Back in the day of eight-bit color it was very important to use web-safe colors. In fact, there are 16 colors listed in the W3C standards: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow. Obviously there are many more colors displayed on the Web than just those 16. Today, it is less important since most video drivers support millions of colors.

Images

“A picture says more than words”

Creating images for the Web is a bit different from creating images for output on paper. The three most widely used formats on the Web that can be viewed by current browsers are GIF, PNG and JPEG. Obviously you want to choose a format that gives you the best quality with the smallest file size.

One of the most effective ways to reduce the size of, and therefore the download time for, an image is to reduce the number of colors used in the image.
This can drastically reduce the visual quality of some photographic images, but it works great for most banners, buttons, and other icons.

Favorites Icon
Favorites icon, usually referred to as a favicon, is a square image (either 16X16 pixels or 32X32 pixels) associated with a web page. The favicon may display in the browser address bar, tab, or the favorites/bookmarks list. Favicon can be created a favicon in a graphics application, such as GIMP, or at a number of websites.

Flexible Layouts

Depending on content, the navigation bar can be placed on top, left and right. However, when using a list for the navigation, remember the default value display of li is list-item.
For a horizontal navigation bar change the display property to display:inline
For left navigation, display will be block and float:left
Consequently for navigation on the right simply by float:right

Of course other alternative for ‘float’ is by using position relative or absolute.

Printing

There are nine possible output types:all, aural, braille, handheld, print, projection, screen, tty, and tv with varying degrees of support. Practically speaking, the ones likely ever used are screen, print and handheld.

The default value for media attribute is all, so declaring media=”all” is redundant.

Using Media-Specific Style Sheets
You can designate a style sheet to be used only for a particular output, perhaps only for printing or only for viewing on screen in the browser. For example, you might create one general style sheet with features common to both the print and screen versions, and then create individual print and screen style sheets with properties to be used only for print or screen, respectively.

To designate media-specific style sheets:
Add media=”output” to the link or style start tags, where output is one or more of the following: print, screen.

In the head section add :
<link rel=”stylesheet” href=”style.css” media=”screen” />
<link rel=”stylesheet” href=”print.css” media=”print” />

Where the style.css is used for display on computer screen and the print.css is used for printing.

For example, when printing you do not need the navigation you need to simply specify

nav {
display:none;
}

Understanding Vendor Prefixes
CSS3 has not yet reached the W3C’s Candidate Recommendation stage (which would mean that the specifications are complete), many parts have already been implemented in recent versions of Firefox, Internet Explorer, Chrome, Safari, and Opera.
In order to future-proof unfinished (and occasionally competing) CSS implementations that are subject to change, those that require it have been implemented in browsers using what are called vendor prefixes. These allow each browser to introduce its own support for a property without conflicting with the final specification or with other browsers. Additionally, vendor prefixes provide a way to ensure that, once a specification has matured or been finalized, existing Web sites using the experimental implementations do not break.

Each of the major browsers has its own prefix:

• -webkit- Webkit/Safari/Chrome,
• -moz- Firefox,
• -ms- Internet Explorer,
• -o- Opera, and
• -khtml- Konqueror

Using CSS3, corners of most elements can be rounded by using the border-radius property, which requires using vendor prefixes to support older versions of Firefox and of Webkit-based browsers such as Chrome and Safari.

div
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The border-radius is used to round all corners of an element, however to round each corner use properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Quite a lot of web applications allow people to Create new data as well as Read, Update and Delete existing data. They are called CRUD applications. Right now, our racing simulation is not such an application as we cannot, for example, change the name of an existing driver or create a new one…

Work to do

Using the capabilities of Flask, we will enhance our existing race simulation to allow drivers to be manipulated: new ones can be created while exiting ones can be either deleted or some of their information changed (i.e. names and abilities).

Flask allows for very flexible routing as it handles parameters very simply. GET parameters are accesses through the request.args dictionary while POST data can be accessed through the request.form dictionary.

Naturally, we will enhance the existing web application while making sure that it still complies with the MVC architecture.

The Web, invented in 1991 by Tim Berners-Lee, has changed the way people interact with computers. More and more applications are now web-based and, consequently, programmers need to master standards such as HTTP, HTML and CSS. Interestingly, programming platforms, such as Python, have had to evolve too to provide facilities to implement web applications. Over the years, people have moved from low-level networking aspects to focus more on high-level aspects of web application development such as architecture, performance and security. This has been made possible, mostly, by the emergence of web frameworks.

Work to do

Using the Flask framework, we are going to further enhance our race simulation program to make it become a full-fledged web application. Like most modern web frameworks, Flask recommends that applications have a Model-View-Controller (MVC) architecture and that a templating engine be used to render views.

In the early days of the Web, text was displayed in only one font and in one size. However, a combination of HTML and CSS now makes it possible to control the appearance of text on a web page. Since lists are also commonly used, HTML provides tags that automatically indent text and add numbers, bullets, or other symbols in front of each listed item.

The course covers:

• Working with Text Blocks and Lists
  • Align text – left, center, right
  • Three types of HTML Lists
    • Ordered list
    • Unordered list
    • Definition list
    • Place lists within lists

• Working with fonts
• Use of boldface,italics and special text for formatting
• Use of special characters