progressive enhancement<\/a>, which is an important paradigm in web programming. It consists in adding progressive layers of complexity to a page.<\/p>\nWe start from a perfectly marked up HTML page, this is the foundation. By itself, this should be visualized correctly on any platform, although it might not be particularly nice, as default browser settings are applied.<\/p>\n
We then add a layer of CSS, by marking tags with id and class attributes, as required, and then associate these ids and classes, and maybe also main elements, to a style by linking a stylesheet to the page.<\/p>\n
A subsequent step could be to add some javascript code, to obtain some specific dynamic or interactive behavior.<\/p>\n
The general principle is that all layers beyond the basic one should each add value to the page, while remaining optional. The page should still be functional at it’s basic level. Not all devices\/platforms support CSS. Even less may support javascript. So the user will get the full experience for example on a PC with a modern browser. However the page should (possibly) still be accessible and displayed correctly, although sometimes not nicely, on any device.<\/p>\n
Sample Page<\/h2>\n
Here’s the source of our starting page:<\/p>\n
\r\n\r\n\r\n \r\n \r\n Testing Style Sheets<\/title>\r\n <meta name=\"description\" contents=\"This page serves the purpose of testing style sheets on a variety of different elements\">\r\n <\/head>\r\n <body>\r\n <header>\r\n <img decoding=\"async\" src=\"images\/dna_square_100x100.png\" alt=\"dna square\">\r\n <h1>Testing CSS<\/h1>\r\n <nav>\r\n <h1>Navigation Menu<\/h1>\r\n <ul>\r\n <li><a href=\"page1.html\">page1<\/a> \u2013 <\/li>\r\n <li><a href=\"page2.html\">page2<\/a> \u2013 <\/li>\r\n <li><a href=\"page3.html\">page3<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header>\r\n\r\n <aside>\r\n <h1>Tangentially related stuff<\/h1>\r\n <div>\r\n <h2>Cool Links<\/h2>\r\n <ul>\r\n <li><a href=\"http:\/\/www.w3schools.com\">W3 Schools<\/a><\/li>\r\n <li><a href=\"http:\/\/www.php.net\">Official PHP Website<\/a><\/li>\r\n <li><a href=\"http:\/\/www.ncbi.nlm.nih.gov\/pubmed\">Pubmed<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h2>Daily quote<\/h2>\r\n <p>It is a scientific fact that your body will not absorb cholesterol if you take it from another person\u2019s plate<\/p>\r\n <\/div>\r\n <\/aside>\r\n\r\n <p>This page has the purpose of testing CSS. <br>\r\n What follows is a random list of elements, inserted only because we will style it.\r\n\r\n <ul>\r\n <li>First list element<\/li>\r\n <li>Second list element<\/li>\r\n <li>Third list element<\/li>\r\n <\/ul>\r\n <\/p>\r\n <h2>Section 1: Web Applications<\/h2>\r\n\r\n <p>This is the first section of this page, it is about web applications for Bioinformatics.<\/p>\r\n\r\n <h3>Input<\/h3>\r\n <p>This is the \"Input\" subsection.<br>\r\n It focuses on how we get data from the user.<br>\r\n This is usually done through a web form.<\/p>\r\n <h3>Output<\/h3>\r\n <p>This is the \"Output\" subsection<\/p>\r\n\r\n <h2>Section 2: Web Files<\/h2>\r\n <p>This is the second section of this page, it is about web files. How to create them, upload them, edit them.<\/p>\r\n\r\n <h3>Editing files<\/h3>\r\n <p>This is the \"Editing\" subsection<br>\r\n This subsection contains a <a href=\"http:\/\/www.ncbi.nlm.nih.gov\/\">link to the NCBI web site<\/a><\/p>\r\n\r\n <footer>\r\n The material on this website is © cellbiol.com\r\n <\/footer>\r\n\r\n <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n<p>The document outline, as assessed with the <a href=\"http:\/\/gsnedders.html5.org\/outliner\/\">HTML5<\/a> outliner is shown in the next figure. Remember that the document outline is not something that browsers will display. It represents the high level hierarchical arrangement of the various parts\/contents of the page on a semantical level.<\/p>\n<figure id=\"attachment_263\" aria-describedby=\"caption-attachment-263\" style=\"width: 440px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/document_outline_sample_page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-263\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/document_outline_sample_page.png\" alt=\"Document outline of the sample page\" width=\"440\" height=\"297\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/document_outline_sample_page.png 440w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/document_outline_sample_page-300x203.png 300w\" sizes=\"auto, (max-width: 440px) 85vw, 440px\" \/><\/a><figcaption id=\"caption-attachment-263\" class=\"wp-caption-text\">Figure 3-9-1: Document outline of the sample page<\/figcaption><\/figure>\n<p>The next figure shows how the page is displayed in a browser<\/p>\n<figure id=\"attachment_264\" aria-describedby=\"caption-attachment-264\" style=\"width: 613px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/sample_page_unstyled.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-264\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/sample_page_unstyled.png\" alt=\"The unstyled sample page\" width=\"613\" height=\"1106\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/sample_page_unstyled.png 613w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/sample_page_unstyled-166x300.png 166w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/sample_page_unstyled-568x1024.png 568w\" sizes=\"auto, (max-width: 613px) 85vw, 613px\" \/><\/a><figcaption id=\"caption-attachment-264\" class=\"wp-caption-text\">Figure 3-9-2: The unstyled sample page<\/figcaption><\/figure>\n<p>Note how although the page is not particularly nice, it is perfectly readable, and the various sections and subsections are clearly defined. The accessibility of such a page is very good across a wide range of devices, including for instance mobile phones.<\/p>\n<p>We will now create a stylesheet called “style.css” in a folder called “css”, located in the same directory as the html file. We will link this in the head of the HTML page as css\/style.css. Let’s add the following line to the head section:<\/p>\n<pre lang=\"html\"><code>\r\n<link rel=\"stylesheet\" href=\"css\/style.css\" type=\"text\/css\">\r\n<\/code><\/pre>\n<p>From now on, all styles definitions for our html page will be written to this stylesheet.<\/p>\n<p>Let’s go straight to the final result and then comment, step by step, on how it was achieved.<\/p>\n<figure id=\"attachment_265\" aria-describedby=\"caption-attachment-265\" style=\"width: 917px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/styled_sample_page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-265\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/styled_sample_page.png\" alt=\"The styled sample page\" width=\"917\" height=\"946\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/styled_sample_page.png 917w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/styled_sample_page-291x300.png 291w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/styled_sample_page-768x792.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-265\" class=\"wp-caption-text\">Figure 3-9-3: The styled sample page<\/figcaption><\/figure>\n<p>See how this looks very different from the previous unstyled version.<\/p>\n<p>As a general principle, it is wise to attribute a style to the highest possible element in the tags hierarchy, considering that many style definitions will then be inherited by child elements thanks to the cascading nature of the Cascading Style Sheets. This is why we will start from the <em>html<\/em> and <em>body<\/em> tags.<\/p>\n<h2>Styling the html and body tags<\/h2>\n<h3>Background Colors<\/h3>\n<p>You see in figure 3-9-3 that the body has a white background, however around it there is a grey background that will fill the whole window in the part not occupied by the body. In order to achieve this, we have to attribute a background color to both the html tag, the very opening tag of the page, and to the body tag:<\/p>\n<pre lang=\"css\"><code>\r\nhtml {\r\n background-color : #F0F0F0; \/* this is a light grey *\/\r\n}\r\n\r\nbody {\r\n background-color : white;\r\n}\r\n<\/code><\/pre>\n<h3>Page width<\/h3>\n<p>Concerning the page (body) width, there are two main options. The width can be expressed as a percentage of the window width (eg: width : 95%;). Or it can be expressed with an absolute measure, typically in pixels (eg: width : 980px;). This is an important choice that will impact strongly on the behavior of your pages.<\/p>\n<p>There is an important design trend called <strong>responsive web design<\/strong>, that if focused on producing code layouts that will adapt across the full range of devices and screen sizes available on the market. Responsive design is based, among other techniques, on the use of dedicated elements such as the <a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp\" target=\"_blank\">viewport tag<\/a>. This is a potentially complex matter beyond the scope of this book. <\/p>\n<p>Here are couple of useful introductory resources on responsive web design to get you started:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/\" target=\"_blank\">Google developers responsive web design basics<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/html\/html_responsive.asp\" target=\"_blank\">W3Schools HTML Responsive Web Design<\/a><\/li>\n<\/ul>\n<p>We will propose a simple fixed-width basic page stile, that is quite suitable for most projects and easy to manage and understand. Once you can master basic designs, you can proceed to more sophisticated layout codes. Since most monitors in use are now 1024 pixels wide or more, we will select a size that will fit into these monitors without any horizontal scrolling, which is generally regarded as an uneducated option to offer visitors of a modern web site. While it is a good idea to specify a width, the height should not be specified so that it will adapt to the contents and stretch vertically as required.<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n}\r\n<\/code><\/pre>\n<h3>Using margins to center elements<\/h3>\n<p>We want these 980 pixels to be at the center of the user window, rather than to the left (the default). In oder to center the body into the browser window, we use the “margin” property. The margin of an element is a distance to be kept from other elements in the page. We can specify either just a margin, that will apply to the four directions, or, if we need more control over the four directions, individually:<\/p>\n<ul>\n<li>margin-top<\/li>\n<li>margin-bottom<\/li>\n<li>margin-left<\/li>\n<li>margin-right<\/li>\n<\/ul>\n<p>The names are quite self-explanatory but see also the next figure. In oder to center an element in the page, such as the body itself, but also a div or other containers, we can indicate that the left and right margins should have a value of “auto”:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n}\r\n<\/code><\/pre>\n<h4>The margin shorthand property<\/h4>\n<p>Top, right, left and bottom margins can also assigned within a single CSS declaration by using the generic <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Shorthand_properties\" target=\"_blank\">“shorthand” property<\/a> <em>margin<\/em>.<\/p>\n<p><strong>Shorthand properties<\/strong> are CSS properties that allow to set the value of several CSS properties simultaneously, allowing to keep the CSS declarations more compact. For example, <em>margin<\/em> is a shorthand to the four properties <em>margin-top<\/em>, <em>margin-right<\/em>, <em>margin-bottom<\/em> and <em>margin-left<\/em>.<\/p>\n<p>The <em>margin<\/em> shorthand can be called with 4, 3, 2 or 1 values.<\/p>\n<p><strong>With 4 values<\/strong><\/p>\n<pre lang=\"css\"><code>\r\ndiv.mydiv {\r\n margin : 10px,15px,20px,30px;\r\n}\r\n<\/code><\/pre>\n<p>The four numbers refer to the top, right, bottom, left margins, respectively. So in the above example <em>margin-top<\/em> would be 10px, <em>margin-right<\/em> 15px, <em>margin-bottom<\/em> 20px and <em>margin-left<\/em> 30px.<\/p>\n<p><strong>With 3 values<\/strong><\/p>\n<pre lang=\"css\"><code>\r\ndiv.mydiv {\r\n margin : 10px,15px,20px;\r\n}\r\n<\/code><\/pre>\n<p>The 3 numbers refer to top, right+left, and bottom, respectively.<\/p>\n<p><strong>With 2 values<\/strong><\/p>\n<pre lang=\"css\"><code>\r\ndiv.mydiv {\r\n margin : 10px,20px;\r\n}\r\n<\/code><\/pre>\n<p>The 2 numbers refer to top+bottom and right+left. So in this example <em>margin-top<\/em> and <em>margin-bottom<\/em> would be 10px while <em>margin-right<\/em> and <em>margin-left<\/em> would be 20px.<\/p>\n<p><strong>With one value<\/strong><\/p>\n<pre lang=\"css\"><code>\r\ndiv.mydiv {\r\n margin : 20px;\r\n}\r\n<\/code><\/pre>\n<p>The value applies to all four margins, top, right, bottom, left.<\/p>\n<p>Therefore, keeping in mind that the default value for all margins that will be applied by the browser if we do not specify any margin property is 0, instead of writing:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n}\r\n<\/code><\/pre>\n<p>we could write:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin : 0 auto;\r\n}\r\n<\/code><\/pre>\n<figure id=\"attachment_266\" aria-describedby=\"caption-attachment-266\" style=\"width: 935px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/css-padding-and-margin-properties.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-266\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/css-padding-and-margin-properties.png\" alt=\"The CSS margin and padding properties\" width=\"935\" height=\"811\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/css-padding-and-margin-properties.png 935w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/css-padding-and-margin-properties-300x260.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/css-padding-and-margin-properties-768x666.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-266\" class=\"wp-caption-text\">Figure 3-9-4: The CSS margin and padding properties<\/figcaption><\/figure>\n<h3>Web Fonts<\/h3>\n<p>Let’s now select a font for our text. Font selection has an overall strong impact on the page appearance. Needless to say, different fonts could be used in different parts of our page(s). For example, the font for navigation menus could be different from the font used for generic text.<\/p>\n<h4>Web safe fonts<\/h4>\n<p>Fonts and web fonts are a world worth exploring. As a general note, you should be aware that in order for a font to be used in a web page, the font should be available on the client computer\/OS. This restricts the use of possible fonts to a relatively small number of fonts commonly present on all operating systems Those fonts are known as <strong>web safe fonts<\/strong>. <\/p>\n<h4>@font-face to import external fonts in the web page<\/h4>\n<p>An alternative to use a web safe font is to <a href=\"http:\/\/www.dummies.com\/web-design-development\/html5-and-css3\/how-to-use-embedded-fonts-for-your-html5-and-css3-based-web-pages\/\" target=\"_blank\">embed a font in our web pages<\/a>, by using a <em>@font-face<\/em> declaration, so that the font is downloaded to the client PC from an external source. <\/p>\n<p>This external source could be our server, or maybe a third party fonts server. A great variety of fonts can be sourced from font libraries such as <a href=\"https:\/\/fontlibrary.org\/\" target=\"_blank\">fontlibrary<\/a> or <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google fonts<\/a>. <\/p>\n<figure id=\"attachment_2908\" aria-describedby=\"caption-attachment-2908\" style=\"width: 2654px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts.png\" alt=\"The Google fonts web site\" width=\"2654\" height=\"2128\" class=\"size-full wp-image-2908\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts.png 2654w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts-300x241.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts-768x616.png 768w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts-1024x821.png 1024w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/google-fonts-1200x962.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-2908\" class=\"wp-caption-text\">The <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google fonts<\/a> web site<\/figcaption><\/figure>\n<p>Let’s stick to common fonts for now. Here’s a <a href=\"http:\/\/www.webdesigndev.com\/16-gorgeous-web-safe-fonts-to-use-with-css\/\">nice selection of 16 commonly used fonts<\/a>\u00a0that are safe to use on the web.<\/p>\n<p>For the purpose of our sample page, we have decided to use “Gill Sans”. If a font name contains spaces, it should be enclosed within quotation marks.<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : \"Gill Sans\", sans-serif;\r\n}\r\n<\/code><\/pre>\n<h4>Font families<\/h4>\n<p>You may have noted that in this example the font-family property was assigned two values: “Gill Sans” and “sans-serif”.<\/p>\n<p>The second font is indicated so that if the first font is not available, the browser will attempt to use the second instead. Several fonts can be used in a font-family declaration, that will be subjected to this same fallback mechanism.<\/p>\n<p>Also note that there are 2 kind of font names, those that indicate a specific font family, such as Times new roman or Gill sans, and those that indicate a group of fonts (font family) that look alike or share some common features, for example “serif”, “sans serif” or “monospace”.<\/p>\n<h5>Serif and sans-serif<\/h5>\n<p>The next figure illustrates the difference between serif and sans serif font families.<\/p>\n<figure id=\"attachment_267\" aria-describedby=\"caption-attachment-267\" style=\"width: 388px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/serif-sans-serif-fonts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-267\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/serif-sans-serif-fonts.png\" alt=\"Serif and sans serif font families\" width=\"388\" height=\"210\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/serif-sans-serif-fonts.png 388w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/serif-sans-serif-fonts-300x162.png 300w\" sizes=\"auto, (max-width: 388px) 85vw, 388px\" \/><\/a><figcaption id=\"caption-attachment-267\" class=\"wp-caption-text\">Figure 3-9-5: Serif and sans serif font families – Source: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Serif\">Wikipedia<\/a><\/figcaption><\/figure>\n<p>It is wise to start the font-family declaration with a specific font family, the one we would prefer to be displayed, and to end with a generic font family, so that at worse, a similar font to our favorite will be used anyway.<\/p>\n<h5>Monospace fonts<\/h5>\n<p>The “<strong>monospace<\/strong>” group comprises courier, courier new and Lucida Console. A font of this group is generally selected to display biological sequences, such as DNA, RNA or Protein sequences. Characters from this group of fonts have all the same width (hence the name “monospace”). This is very desirable on displaying sequence alignments, where we wish aminoacids in the corresponding positions in the sequences, to be aligned vertically with each other. This will only work with monospace fonts.<\/p>\n<p>For styling a sequence we could embed all sequences in a span tag with a <em>sequence<\/em> class and then use, for example, the following declaration:<\/p>\n<pre lang=\"css\"><code>\r\n.sequence{font-family : \"Lucida Console\", Courier, monospace;}\r\n<\/code><\/pre>\n<h3>Font Size<\/h3>\n<p>We can set a default font size for text, with the <em>font-size<\/em> property. Let’s use, for this example, 1.2em. In a standard browser this corresponds approximately to 19 pixels, which is extremely well readable. The size you select will also depends on the selected font family.<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : \"Gill Sans\", sans-serif;\r\n font-size : 1.2em;\r\n}\r\n<\/code><\/pre>\n<p><a href=\"http:\/\/pxtoem.com\/\">em to pixel conversion<\/a><\/p>\n<h3>Default text color<\/h3>\n<p>As a first thing, you should be aware that the default browsers color for almost everything, including text, is black, which is a strong color, far from neutral. We suggest you avoid black altogether, unless you really want it. The decision of using black should be explicit. If you look carefully at figure 3-9-3 you will notice that the text is not black.<\/p>\n<p>So let’s set the default text color to a dark grey, right into the body declaration so that it will nicely cascade into all our web page text:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : \"Gill Sans\", sans-serif;\r\n font-size : 1.2em;\r\n color : #404040; \/* this is a dark grey. This is now the default color for all the text in our page *\/\r\n}\r\n<\/code><\/pre>\n<h3>Padding<\/h3>\n<p>As things stand now, if we add contents, for example some text or an image, to the body, it will touch the page border (by default, the left border). This is plain ugly, and a typical sign of bad and sloppy web design. In oder to leave an internal margin in the body, we will use the <em>padding<\/em> property.<\/p>\n<p>Compare the <em>margin<\/em> and <em>padding<\/em> properties in figure 3-9-4.<\/p>\n<p>10 pixels will be fine:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : \"Gill Sans\", sans-serif;\r\n font-size : 1.2em;\r\n color : #404040; \/* this is a dark grey. This is now the default color for all the text in our page *\/\r\n padding : 10px;\r\n}\r\n<\/code><\/pre>\n<p>however in this particular case we do not want any padding at the top of the page:<\/p>\n<pre lang=\"css\"><code>\r\nbody {\r\n background-color : white;\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : \"Gill Sans\", sans-serif;\r\n font-size : 1.2em;\r\n color : #404040; \/* this is a dark grey. This is now the default color for all the text in our page *\/\r\n padding : 10px;\r\n padding-top : 0; \/* 0 is the only numeric value with which we can omit the measuring units *\/\r\n}\r\n<\/code><\/pre>\n<p>When we assigned “padding : 10px;”, we implicitly assigned the value of 10 px to <em>padding-top<\/em>, <em>padding-botton<\/em>, <em>padding-left<\/em>, <em>padding-right<\/em>. As it happens with <em>margin<\/em>, <em>padding<\/em> is a shorthand property.<\/p>\n<p>When we subsequently declare “padding-top : 0;”, we <strong>override<\/strong> the previous declaration, in particular the <em>padding-top<\/em> part. So at the end, the last declaration wins.<\/p>\n<p>If we did write instead:<\/p>\n<pre lang=\"css\"><code>\r\npadding-top : 0;\r\npadding : 10px;\r\n<\/code><\/pre>\n<p>the final padding-top value would be 10px. Remember that in CSS, the <strong>order of the declarations<\/strong> is one of the CSS precedence criteria.<\/p>\n<h2>Styling the h tags<\/h2>\n<p>What about the color of titles and subtitles (defined by h tags, from h1 for the main title, to h6)? As you see in figure 3-9-3, we have used colors quite heavily in our example to underline the page subdivision in sections and subsections. In the example, only h1, h2 and h3 tags were used, of the 6 h tags available.<\/p>\n<h3>Selecting a color scheme<\/h3>\n<p>As already discussed in a <a href=\"\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/css-basic-concepts\/\">previous section<\/a>\u00a0of this chapter, on designing a web page of web site it is wise to plan in advance and select a beautiful, harmonic color scheme. For this example we have selected the following color scheme:<\/p>\n<p><a href=\"http:\/\/paletton.com\/#uid=7080u0kw0w0jvDaoOy4y4oODajv\">http:\/\/paletton.com\/#uid=7080u0kw0w0jvDaoOy4y4oODajv<\/a><\/p>\n<p>at the <a href=\"http:\/\/paletton.com\">paletton.com web site<\/a>. To see exactly what is shown in the figure below in the paletton web site please visit the URL above an then select the tetrad option in the circular selectors right below the site logo.<\/p>\n<figure id=\"attachment_2923\" aria-describedby=\"caption-attachment-2923\" style=\"width: 1902px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme.png\" alt=\"The color scheme selected at paletton.com for our sample page\" width=\"1902\" height=\"1315\" class=\"size-full wp-image-2923\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme.png 1902w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme-300x207.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme-768x531.png 768w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme-1024x708.png 1024w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/paletton-FF2C00-color-scheme-1200x830.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-2923\" class=\"wp-caption-text\">Figure 3-9-6: The color scheme selected at paletton.com for our sample page<\/figcaption><\/figure>\n<p>We have selected the “tetrad” option (see in the upper left part of the figure above) to get 4 main colors for our scheme, taking #FF2C00 as base color. Note that in addition to these 4 colors, other 4 additional colors, for each main color, are suggested. So we have a total of 4 + (4 x 4) = 20 colors to work with, which is far more than we will actually use in this example.<\/p>\n<p>From the 4 main colors of the scheme, we will assign:<\/p>\n<ul>\n<li>the red (#FF2C00) to h1<\/li>\n<li>the orange (#FF8500) to h2<\/li>\n<li>the green (#00B945) to h3<\/li>\n<\/ul>\n<p>We will use the blue for the top navigation links, later on.<\/p>\n<p>Since we are styling the h tags, we will also assign some custom font-sizes<\/p>\n<pre lang=\"css\"><code>\r\nh1 {\r\n font-size : 3em; \/* That's BIG! A statement, really *\/\r\n color : FF2C00;\r\n}\r\nh2 {\r\n font-size : 1.5em;\r\n color : #FF8500;\r\n}\r\nh3 {\r\n font-size : 1.2em;\r\n color : #00B945;\r\n}\r\n<\/code><\/pre>\n<p>In our page however, not all h1 tags are the same. For instance, in the aside section (that becomes the left grey box in the final site), we have a distinct h1-h2 hierarchy. You may remember that aside is a sectioning element, and as such it can have it’s own h tags. We want the h1 and h2 tags used inside the aside element to have a different size (yet the same color), from the default h1 and h2 sizes that we have just styled.<\/p>\n<p>Within the aside element, we will also eliminate the top margin that is normally present in the h1 tag, for design purposes.<\/p>\n<p>Those declarations, placed somewhere in the stylesheet <strong>after<\/strong> the first h1 and h2 declaration, will override certain aspects (font-size) assigned before. Colors will be inherited from the previous declarations for h1 and h2.<\/p>\n<pre lang=\"css\"><code>\r\naside h1 {\r\n font-size : 1.2em;\r\n margin-top : 0px;\r\n}\r\n\r\naside h2 {\r\n font-size : 1em;\r\n}\r\n<\/code><\/pre>\n<h2>Styling links<\/h2>\n<p>In our example we will have two different kind of links: the top navigation menu links and the ordinary links.<\/p>\n<p>For the ordinary links we will use a light blue from the color scheme above, #3AA6D0. We will also state that links should not be displayed as underlined text, which is kind of old fashioned. To do this we set the value of the “text-decoration” property to “none”. By default (user agent settings) it is “underlined” instead.<\/p>\n<pre lang=\"css\"><code>\r\na {\r\n color : #3AA6D0; \/* this is a light blue from the color scheme *\/\r\n text-decoration : none;\r\n}\r\n<\/code><\/pre>\n<p>The top menu navigation links will be bold. We will assign them the blue from the main color scheme colors, #0776A0.<\/p>\n<p>Remember they are contained within a nav element. So we can access them by defining nav as the context.<\/p>\n<pre lang=\"css\"><code>\r\nnav a {\r\n font-weight : bold;\r\n color : #0776A0; \/* this is the main blue from the color scheme *\/\r\n}\r\n<\/code><\/pre>\n<p>The “text-decoration : none;” declaration will be inherited from our previous declaration on a elements, therefore also the top navigation links, as all links, will not be underlined.<\/p>\n<p>We have not done it in this example, however you can control the color of a linked text when you mouseover it and differentiate between a link that was visited or not, by using the a:hover, a:visited and a:link CSS selectors. See <a href=\"http:\/\/www.w3schools.com\/css\/css_link.asp\">here<\/a>\u00a0for more details.<\/p>\n<h2>Styling lists<\/h2>\n<p>ul lists can be extensively styled, to the point you do not recognize a list as such.<\/p>\n<p>For instance, take a moment to look at the final web page in figure 3-9-3. How many lists do you see? Honest.<\/p>\n<p>Don’t scroll down, take your time please<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>…………………<\/p>\n<p>If you answered 2, you missed the fact that the top navigation menu links are part of a list, check out the page source code at the beginning of this section.<\/p>\n<p>The fact that the list (li) elements are displayed inline instead of in a block arrangement (“display : inline;”), and the fact that there are no bullets (” list-style-type : none;”), are misleading and “hide” the list nature of this part of the page. However the top links are indeed arranged in a list. Here are the relevant CSS declarations:<\/p>\n<pre lang=\"css\"><code>\r\nnav ul {\r\n list-style-type : none;\r\n margin : 0px;\r\n padding : 0;\r\n}\r\n\r\nnav li {\r\n display : inline;\r\n}\r\n<\/code><\/pre>\n<p>You will also note that the other two lists in the page are styled. They are different from each other, and none of them has the default appearance of a list (see figure 3-9-2 for the un-styled version).<\/p>\n<p>We have created 2 kind of list styles. One applies to lists inside the aside element. These lists (we have one in the example) will have squares instead of the default bullets. The color of the squares will be the orange from our color scheme, #FF8500.<\/p>\n<p>Also, we increase the default spacing between the lines (<em>line-height<\/em>), in order to better space the list elements.<\/p>\n<pre lang=\"css\"><code>\r\naside ul {\r\n line-height : 1.8em;\r\n list-style-type : square;\r\n color : #FF8500;\r\n}\r\n<\/code><\/pre>\n<p>For the second kind of lists, we create a class that we call “body-list”. The list in the example, the one with the arrows, to the right of the page, was assigned this class:<\/p>\n<pre lang=\"html\"><code>\r\n<ul class=\"body-list\">\r\n.....\r\n<\/ul>\r\n<\/code><\/pre>\n<p>And this is the declaration for the class in the stylesheet:<\/p>\n<pre lang=\"css\"><code>\r\nul.body-list{\r\n list-style-position:inside;\r\n list-style-image: url('..\/images\/small_arrow.png');\r\n line-height : 1.8em;\r\n}\r\n<\/code><\/pre>\n<p>By using the list-style-image property we can use an image instead of bullets or squares, for highlighting each line. In this case we have used a little arrow icon that we made with powerpoint. <strong>Please note that when you use a path in a CSS file, the path will be relative to the location of the CSS file itself, not of the HTML page that imports it<\/strong>.<\/p>\n<h2>Styling Paragraphs<\/h2>\n<p>In this example we have done nothing special to style the paragraphs, except the little thing explained below. A typical property to be manipulated for paragraphs could be the <em>line-height<\/em>, in order to space text as we wish. Another could be to assign a <em>margin-bottom<\/em> property to space each paragraph from the next one by a defined amount of pixels.<\/p>\n<p>We have defined a “quote” class, associated to italic text, to be used in the “Daily Quote” box in the aside. Boxes in the aside are delimited by <em>div<\/em> elements (generic containers). The quote class was assigned to the relevant <em>div<\/em> rather than to the paragraph.<\/p>\n<pre lang=\"html\"><code>\r\n<div class=\"quote\">\r\n<p>\"It is a scientifically proven fact that....\"<\/p>\r\n<\/div>\r\n<\/code><\/pre>\n<p>and then, in the stylesheet:<\/p>\n<pre lang=\"css\"><code>\r\n.quote p {\r\n font-style : italic;\r\n}\r\n<\/code><\/pre>\n<h2>Styling the aside element<\/h2>\n<p>You have surely noticed that, unlike in the unstyled page, the aside element looks like a lateral grey box in the final page.<\/p>\n<p>This box was assigned a width of 320 pixels. It “floats” to the left of the other contents thanks to a “float : left;” declaration.<\/p>\n<p>It has a small 5 pixels padding and a relatively dark grey (#D0D0D0) background surrounded by a solid (made by a continuous line) tiny border (1 pixel) of a slightly darker grey (#A8A8A8):<\/p>\n<pre lang=\"css\"><code>\r\nborder : 1px solid #A8A8A8;\r\n<\/code><\/pre>\n<p>In order to keep it a little bit apart from the rest of the page contents, we will assign the aside element margin-right and margin-bottom properties.<\/p>\n<p>Since the item is aligned to the left, we don’t need any margin-left, we already have the 10 pixels of the body padding on this side. Also the top is quite empty, no margin needed on the top either.<\/p>\n<p>To make a long story short, here is the CSS aside declaration:<\/p>\n<pre lang=\"css\"><code>\r\naside {\r\n float : left;\r\n width : 320px;\r\n margin-right: 20px;\r\n margin-bottom : 15px;\r\n background-color : #D0D0D0 ;\r\n padding : 5px;\r\n border : 1px solid #A8A8A8;\r\n}\r\n<\/code><\/pre>\n<h2>Styling divs<\/h2>\n<p>The boxes in the aside are delimited by div elements. To make them visible, we have assigned them a light grey background. Some padding was added (5 pixels), to keep text apart from the borders. A margin-bottom was included to space the divs from each other.<\/p>\n<pre lang=\"css\"><code>\r\naside div {\r\n padding : 5px;\r\n background-color : #F0F0F0;\r\n margin-bottom : 15px;\r\n}\r\n<\/code><\/pre>\n<p>We will cover advanced div styling extensively in the next sections of this chapter.<\/p>\n<h2>Styling the img tag<\/h2>\n<p>In this example we use the DNA square image as a top logo. We assign this image a class “top-image”:<\/p>\n<pre lang=\"html\"><code>\r\n<img decoding=\"async\" src=\"images\/dna_square_100x100.png\" alt=\"dna square\" class=\"top-image\">\r\n<\/code><\/pre>\n<p>In order to adapt the size of the image to the title of the page, we use the width property to resize the image to 50 pixels. On defining either the width or the height, the image will scale accordingly on both dimensions. We float the image to the left of the page title with “float : left;”. We also assign a margin-top, in order to better align the image with the page title, vertically. A margin-right is used to space by 30 pixels the image from the title.<\/p>\n<pre lang=\"css\"><code>\r\nimg.top-image {\r\n height : 50px;\r\n float : left;\r\n margin-top : 10px;\r\n margin-right : 30px;\r\n}\r\n<\/code><\/pre>\n<h2>Full CSS file<\/h2>\n<p>And here’s is the full CSS file, style.css, where we put it all together<\/p>\n<pre lang=\"css\"><code>\r\nhtml {background-color : #F0F0F0;}\r\n\r\nbody {\r\n width : 980px;\r\n margin-left : auto;\r\n margin-right : auto;\r\n font-family : Gill Sans, sans-serif;\r\n font-size : 1.2em;\r\n color : #404040;\r\n background-color : white;\r\n padding : 10px;\r\n padding-top : 0px;\r\n}\r\n\r\na {\r\n color : #3AA6D0;\r\n text-decoration : none;\r\n}\r\n\r\n\/* H TAGS *\/\r\n\r\nh1 {\r\n font-size : 3em;\r\n color : FF2C00;\r\n}\r\n\r\nh1.toptitle {\r\n margin-bottom : 10px;\r\n}\r\n\r\nh2 {\r\n font-size : 1.5em;\r\n color : #FF8500;\r\n}\r\n\r\nh3 {\r\n font-size : 1.2em;\r\n color : #00B945;\r\n}\r\n\r\n\/* ASIDE *\/\r\n\r\naside {\r\n float : left;\r\n width : 320px;\r\n margin-right: 20px;\r\n margin-bottom : 15px;\r\n background-color : #D0D0D0 ;\r\n padding : 5px;\r\n border : 1px solid #A8A8A8;\r\n}\r\n\r\naside h1 {\r\n font-size : 1.2em;\r\n margin-top : 0px;\r\n}\r\n\r\n aside h2 {\r\n font-size : 1em;\r\n}\r\n\r\naside div {\r\n padding : 5px;\r\n background-color : #F0F0F0;\r\n margin-bottom : 15px;\r\n}\r\n\r\naside ul {\r\n line-height : 1.8em;\r\n list-style-type : square;\r\n color : #FF8500;\r\n}\r\nheader {\r\n margin-bottom : 40px;\r\n}\r\n\r\n\/* NAV *\/\r\n\r\nnav {\r\n text-align : center;\r\n margin-top : 0;\r\n}\r\n\r\nnav h1 {\r\n display : none;\r\n}\r\n\r\nnav ul {\r\n list-style-type : none;\r\n margin : 0;\r\n padding : 0;\r\n}\r\n\r\nnav li {\r\n display : inline;\r\n}\r\n\r\nnav a {\r\n font-weight : bold;\r\n color : #0776A0;\r\n}\r\n\r\nnav hr {\r\n width : 300px;\r\n margin-right : auto;\r\n margin-left : auto;\r\n background-color : #63DC90;\r\n color : #63DC90;\r\n height: 3px;\r\n border:3px;\r\n}\r\n\r\nfooter {\r\n text-align : center;\r\n font-size : 0.8em;\r\n font-style : italic;\r\n}\r\n\r\nimg.top-image {\r\n height : 50px;\r\n float : left;\r\n margin-top : 10px;\r\n margin-right : 30px;\r\n}\r\n\r\n.quote p {\r\n font-style : italic;\r\n}\r\n\r\nul.body-list{\r\n list-style-position : inside;\r\n list-style-image : url('..\/images\/small_arrow.png');\r\n line-height : 1.8em;\r\n}\r\n<\/code><\/pre>\n<p>So there you have it, a fully styled web page.<\/p>\n<p><a href=\"\/bioinformatics_web_development\/uploads\/test_code_chapter_3-9.zip\">You can download the final code and images here<\/a>.<\/p>\n<p>We encourage you to learn more about CSS by exploring the <a href=\"https:\/\/www.w3schools.com\/css\/\">relevant pages in the w3schools website<\/a> and\/or by proceeding to the <a href=\"\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/website-page-layouts\/\">next section<\/a>.<\/p>\n<div class=\"google-ad\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- bioinfo web dev 2 --><br \/>\n<ins class=\"adsbygoogle\"\n style=\"display:inline-block;width:728px;height:90px\"\n data-ad-client=\"ca-pub-0159360445983090\"\n data-ad-slot=\"3442176918\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<h2>Chapter Sections<\/h2>\n<p>[pagelist include=”135″]<\/p>\n<p>[siblings]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We will now style a sample HTML page. Progressive Enhancement The developing approach we follow in this example is known as progressive enhancement, which is an important paradigm in web programming. It consists in adding progressive layers of complexity to a page. We start from a perfectly marked up HTML page, this is the foundation. … <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/styling-common-html-tags-with-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “3-9: Styling common HTML tags with CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":135,"menu_order":9,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":51,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":3013,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/262\/revisions\/3013"}],"up":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/135"}],"wp:attachment":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}