Chapter 2: Basic Web Application design using CSS
There are two basic forms of writing CSS files. They are
- Internal CSS
- External CSS
In internal CSS, your CSS code is tied with the same HTML sheet. It means that you write your style sheet code within the same CSS. In the examples that we saw in the previous chapters, we used internal CSS completely. There are basically two ways to write an internal CSS.
- We can either put our CSS tags within <style type="text/css"></style> tag
- We can embed the CSS within the attribute style of a HTML tag like <h3 style="color:red; text-decoration:none">I am special H3 tag</h3>
So you may ask, that is there any way to write all the common style properties separately and make all the other HTML pages link to that file? The answers is yes.
2. External CSS
You can write all your style sheet related attributes in a separate file which is generally stored with the extension, .css. After doing this, we can link all the HTML pages to this CSS file. Let us see this through an example.
Create a new file called myStyles.css and add the following code to it
bodyNow create a new file called index.html in the same directory as in myStyles.css with the following content
border: thin black;
<html>It should look like this:
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<h2>Welcome to CSS tutorials</h2>
In the above code, the line <link rel="stylesheet" type="text/css" href="myStyle.css" /> refers to the style sheet myStyle.css and presents it to the front end. Now any HTML file can refer to myStyle.css and reproduce the same design. Also if you ever need to change any style attribute, all you need to do is edit the myStyle.css and all the files that refer to it will now show you the change.
As you can see, we can set a lot of attributes for each element using CSS. In the above example, we have set the border, color, text alignment for the H2 tag. Other values for text-align can include, left , right also.
So as a web designer, you may now design your web application layout as given below
As you can see from the structure above, the mainStyle.css can contain all the CSS attributes that are generic to the entire web application. Inside the folder Contact, we have web pages related to contacts. So if we need some special styling to be done in these files, we can override the parent settings or define new settings in a new CSS file, contactStyle.css. Now our HTML page, say contact.html can contain link to both the CSS files as follows
<head>Now that we have seen web application design using CSS, we now move on to our third tutorial, CSS Selectors.
<link rel="stylesheet" type="text/css" href="mainStyle.css" />
<link rel="stylesheet" type="text/css" href="contactStyle.css" />