I have a friend, who happens to be a good C and assembly programmer, but simply hates anything related to web, then be it HTML, CSS or anything way too much abstracted for that matter. Since it was compulsory for us to make our own web application project for college, he struggled to learn it (CSS and HTML) from here and there, cursing it at the same time. Hence this little guide, for all those of you who hate it, but still want to get your work done.
A thing or two about CSS
CSS isn’t a markup language. It is a styling language, and hence, it won’t really work if you have no document in the first place. Creating a document simply means adding some data to HTML tags in a web page. Here onwards, document would mean the HTML page that we are working on. Let us create one as an example.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<h1>Awesome Site</h1>
<h3>A little heading</h3>
<p>A paragraph containing some text</p>
<h3>Some information</h3>
<p>More text...</p>
</body>
</html>This is a very basic example that would display something like the following. You can guess what each tag stands for here, if not, ‘h’ tag stands for heading, ‘h1’ being the largest to ‘h6’ being the smallest. ‘p’ stands for paragraph, and there are many such tags, which are used as and when required.
Now it is time to style our document. I will place all the CSS styling in a <style> tag, which I will be placing into the <head> of the document. Now you must know that I could do the exact same thing by using an external CSS file and linking it, or by styling individual elements using inline CSS. We will see what those are later. I think the main heading should be red, the subordinate headings should be green and the paragraphs should be orange. I also think the background should be a little off white. Let’s see how that translates into CSS.
body {
background-color: #eee
}
h1 {
color: red
}
h3 {
color: green
}
p {
color: orange
}Now that we have styled our page, let’s take another look at it.
Looks like it works, although it is looking ugly. Anyways, what we have used here is the element selector of CSS which, not surprisingly, selects the elements matching the tag name and applies the properties defined for it.
ID and Class selectors
Now, there may be times when you have multiple elements with same tag names but you want to apply CSS properties to only specific element(s). That is where the ‘id’ and the ‘class’ selector comes in. Note that however, the class here does now refer to anything from your object oriented programming books. It only gives those elements with that class a particular grouping. You can use any one of ‘id’ and ‘class’ as per your liking for now, but conventionally, we use ‘id’ for uniquely identifying elements and ‘class’ for grouping similar elements. Technically, there is an additional difference of precedence here, with the ‘id’ having more precedence than ‘class’. My personal rule is that, for custom CSS use ‘id’, since frameworks like Bootstrap (which we will check out later on) usually use ‘class’.
Now we shall rewrite the document adding an id attribute to each tag name.
<body>
<h1 id="logo">Awesome Site</h1>
<h3 id="heading">A little heading</h3>
<p id="content">A paragraph containing some text</p>
<h3 id="other-heading">Some information</h3>
<p id="other-content">More text...</p>
</body>and we shall change the CSS accordingly
#logo {
color: red
}
#heading {
color: green
}
#other-heading {
color: olive
}
#content {
color: orange
}
#other-content {
color: purple
}The resulting page looks something like this, with each of the individual elements appearing in different color.
Note that we could have well written ‘class’ instead of ‘id’ in our document, but then instead of #logo it would have been .logo, which is the class selector. Having learnt two selectors, we can now combine them to get the desired result. For example, h3#heading { color: blue; } would turn blue all the h3 tags that have a id=”heading” attribute declared. Similarly, h3.heading { color: blue; } would result in the same thing to all the h3 tags with class=”heading”.
Group selectors
Group selectors are used to apply properties to multiple elements at once. Multiple elements are separated by commas.
#logo {
color: red
}
#heading {
color: green
}
#other-heading {
color: olive
}
#content {
color: orange
}
#other-content {
color: purple
}
/* Selecting all three tag names at once. */
h1, h3, p {
background-color: yellow
}Which will look like
Descendant selectors
Sometimes, CSS properties needs to be applied only to tags within a specific tag or id. In such situations, the descendant selector comes in handy.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
ul em {
font-size: 1.25em
}
</style>
</head>
<body>
<p>Look what I've <em>got for ya!</em></p>
<p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li><em>this looks abnormal</em></li>
<li>item 5</li>
</ul>
<p>
</body>
</html>And this will render
Look how the emphasis at the top is normal but the one in the ‘ul’ is enlarged. There is another similar selector called the child selector. It works similar to descendant selector but demands the child to be DIRECT descendant of the parent. For example, p > a { color: green; } will cause only the anchors directly children to any paragraph to look green. These are the various selectors that you would see and probably use when dealing with web applications. Simple enough, aren’t they?
<div> and <span>
Although div and span are html tags, any modern web application that you will write will heavily make use of these to group sections of the web page together. You might be familiar with the layouts of most websites these days, with a header on top, one or two column in the center with content and other options, and a footer at the bottom. Even on my blog, you’ll notice these three things. How are they made, and how to make them look so distinct that on the first glance, your visitors know what their purpose is. The answer lies in making proper divs and adding appropriate CSS to it. Div is a block element, which means that it is used to style multiple elements at once. Span, on the other hand, is inline, that is, it is used to style little chunks of content.
I will write the 4 sections of a website I mentioned earlier, using divs. Read the code and you would understand what is happening.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
* {
text-align: center
}
#header {
background-color: red
height: 50px
}
#container {
width: auto
margin: 0 auto
}
#body {
width: 75%
float: left
background-color: grey
}
#side {
width: 25%
float: right
background-color: blue
}
#footer {
background-color: green
}
</style>
</head>
<body>
<div id="header"><h3>Header Text</h3></div>
<div id="container">
<div id="body"><p>Content goes here</p></div>
<div id="side"><p>Sidebar</p></div>
</div>
<div id="footer"><p>Copyrights</p></div>
</body>
</html>This sure looks beautiful, doesn’t it?
This completes the CSS syntax part. I did mention that you can write all your CSS in a file.css and include them in your document head with <link href="/assets/style.css" rel="stylesheet"> so that it is easier to maintain the code. There is yet another way to add CSS, which makes use of @import syntax. It is better avoided for the linked reasons.
Now that you are well equipped with the necessary things to learn some actual and practical CSS, you must be really excited to read from w3schools. It is a great site to begin, and since it comes on top each time you search for anything related to CSS (or web programming, for that matter), you may use it as your sole reference guide. Nothing bad, but keep in mind that after leaving your nutshell, you should avoid that site, and start using some reputed docs instead, like the ones from Mozilla.
CSS Frameworks
To speed up the development process, you might want to check out some libraries out there that would ease your life. One of the best is Bootstrap. It would enable you to do rapid development, with minimal typing. Bootstrap comes with jQuery, a Javascript library which also helps a lot dealing with web application stuff you are about to deal with. There is not much point reading the official docs if you only want to get the work done. Instead, I would suggest you to Google out things, pick up code on the way, keep going. That is exactly how I used to do stuff back then, when I hated to write CSS and HTML. Bad advice, but gets the job done most of the times.
Outro
CSS is amazing. Web is amazing. Today is a time when you either have to love the web, or keep fighting a losing battle convincing yourself that you don’t need it. Either way, knowing a thing or two about how the web pages that you spend more than half of your time on, are styled, is always a plus. As always, for anything, the comment box is always there. Corrections, please. Liked the article? Suggest it to your friends! Thank you for reading.