Sidebar

Chapter 1: Internet, Networks and TCP/IP

Chapter 2: The LINUX operating system - Setting up a Linux Web Server

Chapter 3: Your first webpage, Learning HTML and CSS

Chapter 4: Building Dynamic Websites with PHP in progress

Chapter 5: Web forms under construction

Chapter 6: Developing your first Bioinformatics web application under construction

Chapter 7: The PHP programming language: strings, arrays, functions, cycles, conditional statements, regular expressions under construction

Chapter 8: Sample Bioinformatics Web Applications under construction

chapter_3_-_your_first_webpage_-_learning_html_and_css:styling_your_webpages_or_website_with_css

3-6: Styling your webpages or website with CSS

In addition to the tags used for text markup that we have seen in the previous section, there is a particular tag called “Span”, that is a generic way to tag a chunk of text. We will use the span tag as a demonstration example on how to apply CSS to a tag. All tags can actually be styled with CSS similarly to what we show below for the span tag.

Let's consider a span tag in the context of a proper HTML page:

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <title>Testing span tag and css</title>
  <meta name="description" contents="This page is used to test the effects of styling the span tag with CSS">
</head>
<body>

  Here is some text. <span>This part</span> is tagged with a span tag

</body>
</html>

If implemented like this, the span tag does nothing special to the tagged text. Unlike the h or strong tags, the span tag does not have any particular appearance associated with it by default by browsers. If you view the code above in a browser, you will not notice anything special about the format of the tagged text (figure 3-6-1).

Figure 3-6-1: Using a span tag without CSS specifications does nothing special to the tagged text

We can use CSS to style the tagged text.

The different ways of using CSS

There are two main ways to do this:

  1. Using the Style attribute within the span tag itself
  2. Assigning the span tag a class with the Class attribute, and then associate a style with this class in the styles definition. The style definitions can be
    1. Included directly in the HTML page, typically within the head section of the page
    2. Located in a separate CSS style sheet file (whose name usually ends with the .css extension) that is then linked to from the HTML page

Approach 1: Declaring Styles through the tag's Style attribute

Let's now use the Style attribute to style a span tag. In this example, we will use CSS definitions to:

  • set the font size to 20 pixels: font-size : 20px
  • make the text bold: font-weight : bold
  • make the text red: color : red
<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <title>Testing span tag and css</title>
  <meta name="description" contents="This page is used to test the effects of styling the span tag with CSS">
</head>
<body>

  Here is some text. <span style="font-size : 20px;font-weight : bold;color : red;">This part</span> is tagged with a span tag

</body>
</html>
Figure 3-6-2: Styling the span tag with the style attribute

Approach 2: Assigning the tag a class and styling the class with a style declaration

Assigning a style with the style attribute directly within a tag has some limitations. Let's imagine for instance that in your page you have 10 different pieces of text (for example sentences) that you wish to have a particular formatting, say the same we have used above: red, bold, 20px. You proceed to tag the relevant portions of text with span tags, each with a style attribute with the declaration:

font-size : 20px;font-weight : bold;color : red;

So this declaration is repeated for each span tag.

Let's now imagine that one day you decide to change the color of your tagged pieces of text from red to blue. You have to change 10 style declarations to do this. You will easily miss a couple, and after a while of this way of proceeding, your web page will start to look as an heterogeneous mess.

For this reason, styling a tag with a style attribute is usually relegated to quick fixes, or anyway to styles applied only once in your page or site.

The way to proceed is instead to create a class, that you can style freely, and then assign this class to one or several tags. Changes to the styles definition of the class will affect all the tags of this class.

Let's assign a class to a span tag by using the class attribute. We will call this class “enhanced-text”, but you are free to name your own classes as you wish.

We recommend to use meaningful, explicit class names that will make it easy to understand what a particular class is about. In the framework of the semantic HTML approach we follow in this course, your class names should reflect/indicate the meaning/nature of the elements the class is applied to.

2a. Inserting the style declarations in the head section of the HTML page

In the following example we use the class attribute within the span tag to assign the tag the “enhanced-text” class.

The aspect of this class is dictated by the style definition in the head section of the HTML page. In this example, there is just one style definition for the “enhanced-text” class, however mind that a CSS typically contain several definitions.

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <title>Testing span tag and css</title>
  <meta name="description" contents="This page is used to test the effects of styling the span tag with CSS">
  
  <style type="text/css">
   .enhanced-text {
   font-size : 20px;
   font-weight : bold;
   color : red;
   }
  </style>
  
</head>
<body>

  Here is some text. <span class="enhanced-text">This part</span> is tagged with a span tag

</body>
</html>
2b. Linking from the HTML page to an external CSS file

Inserting the style definitions directly in the head tag is apparently handy and quick, you have everything in one place (the HTML page). However the inclusion of styles in the page itself can make the HTML page code heavy to read. More importantly, a single CSS file can be imported from several HTML pages, maybe all the pages of your website, making sure you are using a consistent style for the whole site. When you want to change a style, you do so in a single place, the css file, instead of having to browse through all the pages and making individual changes. This last methodology is not only time consuming and un-necessary, it is error prone and will lead to site styling problems in the medium-long run.

For these reasons, we will keep in mind that the technique described above in paragraph 2a exists, but will only use it for quick testing or quick fixes, maybe to a particular style used only in one page.

Instead, for general purposes, and for building a web site or even single pages, we will always have a dedicated, separated style sheet file, that we will import from the HTML pages.

The location of this file in the filesystem is up to you. However for consistency reasons and good practice, we will create this file in a subdirectory of our Document Root directory called css. Let's call the css file itself “styles.css”. So we will create a css file and refer to it in html web pages with the following web absolute path:

/css/style.css

Let's remind that in web paths, the first slash indicates the Document Root directory rather that the root of the filesystem.

Here's our style.css file contents for this simple first example, we invite you to create this file so that you can try for yourself:

.enhanced-text {
    font-size : 20px;
    font-weight : bold;
    color : red;
}

Again, this contains a single style declaration, which is unusual for a css file that would normally contain several declarations. This is just an example.

Let's now import this file in the HTML page, with a link from the head section. To link to the css file the “link” tag is used. Similarly to the “a” tag, the link tag has an “href” attribute that takes as an argument the URL or path of the file to be linked. In the case of a stylesheet, this will typically be the path of a local file, rather then an URL of an external file. The link tag also requires a mandatory “rel” attribute that indicates the relationship between the curent document and the document to be linked.

Learn more about the HTML link tag

Check out the link tag in the head section in the page code below:

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <title>Testing span tag and css</title>
  <meta name="description" contents="This page is used to test the effects of styling the span tag with CSS">
  <link rel="stylesheet" href="/css/style.css" type="text/css"> 
</head>
<body>

  Here is some text. <span class="enhanced-text">This part</span> is tagged with a span tag

</body>
</html>

Try this example for yourself:

  • Create a styles file at /css/styles.css
  • Link to it from a test page and check that the styles are applied correctly to the tagged text

Let's now learn in more detail how to style common page tags and assign them to classes, so as to be able to fully control the aspect of our pages.

Chapter Sections

Discussion

test118.107.130.186, 2013/12/11 02:37

nice posts. here are some sample code in html, php and css. lecturshandouts.blogspot.com

Enter your comment. Wiki syntax is allowed:
EBRJH
 
chapter_3_-_your_first_webpage_-_learning_html_and_css/styling_your_webpages_or_website_with_css.txt · Last modified: 2013/02/25 17:36 by cellbiol