External Style Sheets
So far in this tutorial we have used inline CSS (Part 1) and internal CSS (Part 2) respectively. Now let’s introduce external CSS. The drawback of using inline or internal CSS is that the styles defined as such are limited to only one element or webpage respectively – that’s OK if your website comprises of 3 or 4 webpages. But if the website comprises of hundreds and thousands of webpages then it’ll become almost impossible to manage uniform look and feel on each webpage. That’s where external CSS comes in – by employing external CSS we define styles once in a separate external CSS file, then link this CSS file in each webpage.
So let’s create a new file named ‘styles.css’ in ‘csstut’ folder that we created in Part 1 of this tutorial and insert the following styles for paragraph tag (<p>) in this newly created ‘styles.css’:
p {
color: white;
background-color: gray;
font-size: 30px;
}Save and close ‘styles.css’. Now, create a fresh HTML file ‘third.html’ in ‘csstut’ folder. To speed up the process, simply copy-paste the index.html file and rename the new file as ‘third.html’. Now, replace the contents of third.html with following code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial - Part 3</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>I'm paragraph having styles from external css file.<p>
</body>
</html>Save and load ‘third.html’ in the browser – we have a paragraph decorated with styles which are defined in a separate CSS file. What we simply did here is we used <link> HTML tag within <head> in order to import external styles. <link> tag has two minimum required attributes i.e. ‘rel’ and ‘href’ – the later one contains the actual location of external styles which in our case is ‘styles.css’.
Google Fonts
We discussed about some default fonts available to browsers in Part 1 of this tutorial. Now, let’s up the ante by introducing Google Fonts. We can use the external CSS linking as learned above to import Google Fonts in our websites. So, let’s insert Google Fonts in our webpage as given below;
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial - Part 3</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Satisfy">
</head>
<body>
<p>I'm paragraph having styles from external css file.<p>
<h1 style="font-family:Satisfy;">I'm Satisfied...</h1>
</body>
</html>Save and reload the webpage – we have a second paragraph with a nice font named ‘Satisfy’. We fetched the Google font using <link> tag where we used parameter ‘family=Satisfy’. We can also import multiple Google fonts by using pipe ( | ) in the URL to separate the multiple font names. Furthermore, we can also import and apply special effects to the fonts. So, let’s modify ‘third.html’ as given below in order to fetch 2 separate Google fonts together with a couple of special effects:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial - Part 3</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Satisfy|Changa+One&effect=shadow-multiple|fire">
</head>
<body>
<p>I'm paragraph having styles from external css file.<p>
<h1 style="font-family:Satisfy;">I'm Satisfied...</h1>
<div style="font-family:'Changa One'; font-size:50px" class="font-effect-shadow-multiple">
I'm Changa...
<span class="font-effect-fire">and I'm on fire...</span>
</div>
</body>
</html>In link’s address we used ampersand (&) in between the fonts and the effects – that’s how we fetched two Google fonts i.e. ‘Satisfy’ and ‘Changa One’ and two Google effects i.e. ‘shadow-multiple’ and ‘fire’ respectively. A fetched Google effect can be applied to an element by using ‘class’ attribute and prepending the effect’s name with ‘font-effect-‘.
We can use any freely available Google fonts as enlisted at fonts.google.com
Lists
Using CSS we can stylize HTML lists so as to give them behavior of menus. Let’s add following styles into ‘styles.css’ file:
.menu {
background-color: gray;
display: inline-block;
padding: 12px 5px 12px 5px;
border-radius:5px;
}
.menu li {
display: inline;
margin: 3px;
}
.menu li a {
text-decoration: none;
padding: 5px;
color: white;
background-color: darkgray;
border-radius:5px;
}
.menu li a:hover {
color: black;
background-color: white;
box-shadow: 1px 1px 8px black;
}Now, add following code to ‘third.html’ right after the above <div></div>:
<div>
<ul class="menu">
<li>
<a href="first.html">First Page</a>
</li>
<li>
<a href="second.html">Second Page</a>
</li>
<li>
<a href="third.html">Third Page</a>
</li>
</ul>
</div>Here, we have defined the styles for nested elements (li, a, a:hover) which bind with the ultimate parent element (ul). For instance ‘.menu li’ styles will only apply to those list items (li) which come under ‘.menu’ applying parent – since the above <ul> applies ‘.menu’ class then all the <li> elements within that <ul> will have the styles as defined in ‘.menu li’.
Next, we’ve applied ‘inline-block’ display style for ‘.menu’ and ‘inline’ style for each ‘li’ falling within ‘.menu’ (thus making them as horizontal menu). Although both styles make HTML element appear in a line instead of having separate block, there is a subtle difference between ‘inline’ and ‘inline-block’ styles. ‘inline’ style disregards any width or height styling or top and bottom padding / margin. On the other hand, ‘inline-block’ will honor the styles of width, height, top and bottom padding / margin. Try changing the ‘.menu’ style as ‘inline’ and ‘.menu li’ as ‘inline-block’ respectively and observe the behavior of height, padding and margin.
Tables
Like HTML lists, we can stylize HTML tables in order to give them pro look and feel. Let’s insert following styles into ‘styles.css’:
.zebra {
width: 30%;
box-shadow: 1px 1px 8px black;
border: none;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
}
.zebra th, td {
padding: 5px;
border-bottom: 1px solid #ddd;
}
.zebra th{
background-color: #045D5D;
color: white;
}
.zebra td {
text-align: center;
border-right: 2px solid #ddd;
}
.zebra tr:nth-child(even) {
background-color: #f2f2f2;
}
.zebra td:last-child {
border-right: none;
}Now, add following code to ‘third.html’ right after the above list’s <div></div>:
<div>
<table class="zebra">
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
<tr>
<td>Henry</td>
<td>Assistant</td>
</tr>
<tr>
<td>David</td>
<td>Supervisor</td>
</tr>
<tr>
<td>Paul</td>
<td>Manager</td>
</tr>
<tr>
<td>Tom</td>
<td>Administrator</td>
</tr>
</table>
</div>Again, we have defined the nested element styles which come under a custom class named ‘.zebra’ – therefore only those <tr>, <th>, <td> will get stylized which come under ‘.zebra’ class applying parent (<table>). We used comma (,) in ‘.zebra th, td’ which signifies that the given styles will be applied to both <th> or <td> which come within ‘.zebra’. Moving ahead, we have used ‘border-collapse: collapse;’ style in order to hide the ugly gaps between rows and columns which are present by default in HTML table. Next, we used couple of ‘child’ selectors – ‘nth-child()’ and ‘last-child’. ‘nth-child(even)’ signifies that every even numbered element will have the defined styles – therefore by applying ‘tr:nth-child(even)’ we have styled every even numbered <tr> with darkened background thus giving the nice zebra striped looks. Similarly, ‘last-child’ signifies that the given styles will be applied to the last element in sequence – therefore by applying ‘td:last-child’ we have got right-side border removed from the last <td> in each row.
Media Queries
While browsing modern websites we observe that if the website is being accessed from mobile device (small screen), the main menu is normally displayed as single expendable button and when the same website is being accessed from computer browser (large screen), the main menu is rendered as regular collection of separate clickable buttons on topside. This different rendition for different screen sizes is achieved through media queries. A media query is defined by ‘@media’ then adding the type of media and then size. Let’s insert following media queries in ‘styles.css’ file in order to define styles based on different sizes of screen e.g. computer screen (more than 1024px), tablet screen (up to 1024px) and mobile screen (up to 480px):
@media screen and (max-width: 1024px) {
body {
background-color: yellow;
}
.zebra {
width: 50%;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
.zebra {
width: 100%;
}
.menu li {
display: block;
margin-top: 15px;
}
}Save ‘styles.css’ and reload the webpage. If you are using regular sized monitor screen and the browser is maximized in size, you’ll see the webpage as previously with white background and table having occupied 30% width of the viewport (more than 1024px width). Now click the restore (middle icon) button at right side on the title bar of the browser. Now start decreasing the size of the browser window; once it comes below 1024px width, the background color will change to yellow and table will occupy 50% of the viewport. Keep decreasing the size of the browser window; once it comes below 480px width, the background color will change to light-green and the table will occupy 100% of the viewport. Moreover, in small screen (less than 480px width) the ‘.menu’ list items will change vertically as blocks from the previous state of horizontal inline alignment due to ‘display: block’ style.
The final ‘styles.css’ and ‘third.html’ are as follows:
p {
color: white;
background-color: gray;
font-size: 30px;
}
.menu {
background-color: gray;
display: inline-block;
padding: 12px 5px 12px 5px;
border-radius:5px;
}
.menu li {
display: inline;
margin: 3px;
}
.menu li a {
text-decoration: none;
padding: 5px;
color: white;
background-color: darkgray;
border-radius:5px;
}
.menu li a:hover {
color: black;
background-color: white;
box-shadow: 1px 1px 8px black;
}
.zebra {
width: 30%;
box-shadow: 1px 1px 8px black;
border: none;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
}
.zebra th, td {
padding: 5px;
border-bottom: 1px solid #ddd;
}
.zebra th{
background-color: #045D5D;
color: white;
}
.zebra td {
text-align: center;
border-right: 2px solid #ddd;
}
.zebra tr:nth-child(even) {
background-color: #f2f2f2;
}
.zebra td:last-child {
border-right: none;
}
@media screen and (max-width: 1024px) {
body {
background-color: yellow;
}
.zebra {
width: 50%;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
.zebra {
width: 100%;
}
.menu li {
display: block;
margin-top: 15px;
}
}<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial - Part 3</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Satisfy|Changa+One&effect=shadow-multiple|fire">
</head>
<body>
<p>I'm paragraph having styles from external css file.<p>
<h1 style="font-family:Satisfy;">I'm Satisfied...</h1>
<div style="font-family:'Changa One'; font-size:50px" class="font-effect-shadow-multiple">
I'm Changa...
<span class="font-effect-fire">and I'm on fire...</span>
</div>
<div>
<ul class="menu">
<li>
<a href="first.html">First Page</a>
</li>
<li>
<a href="second.html">Second Page</a>
</li>
<li>
<a href="third.html">Third Page</a>
</li>
</ul>
</div>
<div>
<table class="zebra">
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
<tr>
<td>Henry</td>
<td>Assistant</td>
</tr>
<tr>
<td>David</td>
<td>Supervisor</td>
</tr>
<tr>
<td>Paul</td>
<td>Manager</td>
</tr>
<tr>
<td>Tom</td>
<td>Administrator</td>
</tr>
</table>
</div>
</body>
</html>