In this tutorial, we’ll learn the core concepts and essential mechanics of CSS. This tutorial assumes that you know the basics of HTML; if you don’t then you can refer to this HTML tutorial.
CSS (Cascading Style Sheets) is more like a styling protocol than a full fledged programming language. Using CSS, we can style and position any HTML element.
Let’s look at following HTML;
<p>I'm a paragraph.</p>Well, nothing interesting here; this is just a simple HTML statement for defining a paragraph. Let’s insert some CSS in there;
<p style="color:red; background-color:yellow;">I'm a paragraph.</p>Here, we have just put an attribute ‘style’ inside <p> tag. This is the simplest form of inserting CSS where ‘style’ attribute is used inside an HTML element (also known as inline styling). Down the road, we’ll look into the other more powerful and practical ways of inserting CSS into the HTML files. Styles are inserted in key:value format such as color:red and each style is separated by semicolon.
Let’s put this paragraph in proper HTML file. First, create a new folder on your system and name it “csstut”. Then open a text / code editor of your choice and put the following code in it and save it as “index.html” in “csstut” folder;
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<p style="color:red; background-color:yellow;">Hello World!</p>
</body>
</html>
Open the index.html file in the browser and note that the text color of paragraph and its background have changed to red and yellow respectively. Take a good look at the paragraph background color which extends till the end of display – this is called block display; <p> element has block display by default. This is very important concept and we’ll get back to it shortly.
Let’s insert another paragraph by inserting the following line after first <p>;
<p style="color:#FFFFFF; background-color:#808080;">Second Paragraph</p>This <p> behaves same as the previous one except the colors coding is different. Here, we used Hexadecimal values of color instead of color names. Hexa codes allow us to use variety of color combinations (of course, not every combination of colors has got English name). Just remember when inserting Hexa codes color value then the value must precede with a # sign as given above. For more Hexa codes of various color combinations, you may visit htmlcolorcodes.com. Now our index.html looks as follows;
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<p style="color:red; background-color:yellow;">Hello World!</p>
<p style="color:#FFFFFF; background-color:#808080;">Second Paragraph</p>
</body>
</html>Let’s insert another paragraph – this time with other styles;
<p style="text-align:justify; border:1px solid blue; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor</p>Sometimes in development phase, we need long paragraphs to check the look and feel of our contents. For this purpose, we may type whole paragraphs but that’s time consuming – on the other hand we can conveniently use famous text generator known as Lorem ipsum; the above paragraph has been generated through this tool.
In the above <p> we’ve used ‘text-align’ style which is used to set the alignment of contents. It can take values of ‘left’, ‘right’, ‘center’ and ‘justify’. In the above paragraph we’ve used ‘justify’ alignment which will make sure that the end of each line in the paragraph is justified means no ugly whitespaces at the end of each line.
Next, we’ve applied ‘border’ style; it usually takes three parameters – first one defines the width of border (here it’s 1px), second parameter defines the type of border (here it’s ‘solid’) and third defines the color of border (here it’s ‘blue’).
Lastly, we’ve set the font size of the paragraph to 20px using ‘font-size’ style. Font sizes can primarily be defined using px (pixel) or em (percentage). ‘px’ is the hardcoded font size whereas ’em’ is the relative % size to the parent element – we’ll discuss ’em’ shortly.
Save and reload the index.html. A well justified paragraph with font size 20 having thin blue border has been added to our rendered webpage.
CSS styles can be applied to almost any HTML element. So let’s apply some styles to heading <h1> by inserting the following code;
<h1 style="text-align:center; font-size:5em; font-family:'Brush Script MT'; border: 10px double darkgray; border-radius: 15px; color:white; background-color:lightgray;">Big Heading</h1>In the above <h1> tag we’ve inserted some other styles; ‘font-family’ style can be used to define different fonts such as ‘Brush Script MT’. Almost all the browsers support some basic types of fonts e.g. Arial, Verdana, Tahoma, Impact, Times New Roman, Georgia, Courier, Lucida Console, Brush Script MT, Comic Sans Ms. Ahead in this tutorial, we’ll learn to use Google Fonts too. Next, we’ve used ‘border-radius’ style which defines the curvy shape for border. Normally ‘5px’ is a good value for ‘border-radius’, however in here we’ve used ’15px’ to make curves more prominent.
Finally, let’s discuss ‘5em’ which we’ve put as ‘font-size’ value. When we use ‘px’ it means the hardcoded value in pixels, whereas ’em’ represents the percentage. ’em’ is the percentage which is applied to the size of the parent font size. For example, the above <h1> is the child element of <body> – the <body> element has a default font size of 16 pixels (16px); so, when we say ‘5em’, it means ‘5 times of the 16px’ which will be (5 x 16) 80 pixels.
Save and reload the index.html in browser to see the result. Our index.html now looks as follows;
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<p style="color:red; background-color:yellow;">Hello World!</p>
<p style="color:#FFFFFF; background-color:#808080;">Second Paragraph</p>
<p style="text-align:justify; border:1px solid blue; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor</p>
<h1 style="text-align:center; font-size:5em; font-family:'Brush Script MT'; border: 10px double darkgray; border-radius: 15px; color:white; background-color:lightgray;">Big Heading</h1>
</body>
</html>Padding & Margin
If you’ve observed closely, all the HTML elements are ‘box’ shaped. This is essential to understand as the next concepts are based on this ‘box’. Each HTML element has its own box and we can play around this box to achieve stunning results when it comes to styling webpage contents and layouts.
‘Padding’ and ‘Margin’ are the two essential concepts related to this ‘box’; to understand them let’s assume that the ‘blue border’ in our third paragraph above, is actually the box – then the space between blue border and contents of the box is Padding and the space outside blue border up to its surroundings is Margin. Let’s set Padding and Margin of these paragraphs to understand them better. Amend the first <p> as follows;
<p style="color:red; background-color:yellow; padding:10px;">Hello World!</p>Save index.html and reload browser to note the change in first paragraph – now there is gap of 10 pixels between box border and contents of box. Padding is applied in all four directions i.e. top, right, bottom and left. If we want to apply padding only to one direction, say left side then we can use ‘padding-left’ style instead of ‘padding’. Let’s do this and observe the difference;
<p style="color:red; background-color:yellow; padding-left:10px;">Hello World!</p>Now there is only left side padding and other three sides’ padding has gone. Moving onto Margin, let’s change the second <p> as follows;
<p style="color:#FFFFFF; background-color:#808080; padding:10px; margin:20px;">Second Paragraph</p>Save index.html and reload browser; note that in addition to padding space, now we have space outside of second paragraph’s box in all four directions. Similar to Padding, we can have margin-top, margin-right, margin-bottom and margin-left. So let’s change the third paragraph as follows;
<p style="text-align:justify; border:1px solid blue; font-size:20px; padding:20px; margin-left:200px;margin-right:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor</p>Save index.html and reload browser to observe the hard-coded 200 pixels space on right and left sides of the paragraph. Looks cool but let’s press the ‘restore’ window button on top right corner of browser window. The browser will restore to smaller screen size. Let’s grab the left or right border of browser and start coming inside; you’ll observe the paragraph gets squeezed. Drag as far as you can go and see the paragraph turned into single thin column with ugly presentation, though hardcoded 200 pixels space on each side of the paragraph is still intact. Ahead in this tutorial we’ll learn how to custom render our contents according to screen sizes e.g. mobile or tablet screens.
Links
Let’s stylize another type of HTML element i.e. hyperlinks. Hyperlinks or simply links are represented through <a></a> tags in HTML. So let’s insert the following elements into the index.html
<a href="http://google.com" style="text-decoration:none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin-right:10px;">Google</a>
<a href="http://facebook.com" style="text-decoration:none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin-right:10px;">Facebook</a>
<a href="http://apple.com" style="text-decoration:none; border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin-right:10px;">Apple</a>
Save and reload index.html; we now have three links – each link is looking like a button. When we mouse over an HTML link, it underlines by default, however by using “text-decoration:none;” style we made the default underline disappeared on mouse-over event. Next we applied blue border of 1 pixel. Next, we used padding to give inner space; here we used shorthand for all four directions i.e. “padding: 5px 10px 5px 10px;” is the shorthand for “padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;”. Cool! but sometime is odd. We have to repeat the same styling every time in each link. Wouldn’t it be nice if we could define styling once and that style could be applied to all HTML tags of same type? Let’s look at <style></style> tags…
<style></style> tags
<style></style> HTML tags are inserted within the <head></head> tag of an HTML file. So, let’s modify the head part of index.html as follows;
<head>
<title>CSS Tutorial</title>
<style>
a {
text-decoration:none;border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin-right:10px;
}
a:hover {
color:white; background-color:blue;
}
</style>
</head>We’ve inserted the <style></style> HTML tags right after <title></title> but within <head></head> tags. Every style defined within <style></style> tags will be available in whole of the HTML file not just one element. Here, we define styles globally by specifying element name then putting required styles within curly brackets { }. For example we took the ‘a’ element of HTML and in corresponding curly brackets we defined styles we want to attach to ‘a’ element whenever it appears in the HTML file. Next, we used selector ‘:hover’ with ‘a’ element to define the styles which are applied to the link when the mouse is over it; for example, in our case when the mouse is over a link, it will change to blue background color with white color font.
Finally, go ahead and remove the ‘style’ attributes from each <a></a> tag. Now our links look like as follows;
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
<a href="http://apple.com">Apple</a>
Save and reload index.html; the links look same as previously. Moreover, a nice mouse hover style has been added to our links which gives the feel of dynamic buttons. What we are able to do here is remove the duplicate styles from each link and using <script></script> we applied the styles globally to all <a></a> tags within index.html file. By doing so, we’ve cleaned code within HTML tags, however we’ve also introduced a problem here which we will tackle in next part of this tutorial.
Our final index.html looks as follows:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style>
a {
text-decoration:none;border: 1px solid blue; padding:5px 10px 5px 10px; border-radius:5px; margin-right:10px;
}
a:hover {
color:white; background-color:blue;
}
</style>
</head>
<body>
<p style="color:red; background-color:yellow; padding-left:10px;">Hello World!</p>
<p style="color:#FFFFFF; background-color:#808080;padding:10px; margin:20px;">Second Paragraph</p>
<p style="text-align:justify; border:1px solid blue; font-size:20px; padding:20px; margin-left:200px;margin-right:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor</p>
<h1 style="text-align:center; font-size:5em; font-family:'Brush Script MT'; border: 10px double darkgray; border-radius: 15px; color:white; background-color:lightgray;">Big Heading</h1>
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
<a href="http://apple.com">Apple</a>
</body>
</html>