In this tutorial, I am going to tell you about cascading style sheets (CSS) which are very common on the World Wide Web. We will briefly go over the types and uses of CSS in our web pages with appropriate examples.
What Is CSS?
Most of the web pages are made of HTML ( hypertext markup language) It is the standard way to decorate plain web pages with text, fonts, colors, images, and hyperlinks. CSS is the only way to decorate the website easily
CSS is a kind of computer dress code. CSS mainly does just one thing: it describes how web pages should look. Even better, CSS can be easily separated from HTML, so that the dress code is easy to find, easy to modify, and can rapidly change the entire look of your website.
Three Types of CSS
CSS comes in three types:
- External ( In a separate file )
- Internal ( At the head section of a webpage )
- Inline ( Inside the tag which you want to decorate )
External: Style sheets are separate files full of CSS code instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using inline CSS ). This is how you change a whole website at once
Internal: Styles are placed in the head section of each web page before any of the content is listed. This is the next best thing to external because they’re easy to find, yet allow you to ‘override’ an external style sheet.
Inline: Styles are placed inside the tag which you want to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element.
Before we introduce CSS, let’s briefly review HTML. A simple web page is made of tags. Everything must go between the opening and closing <html> tags. The <head> section contains invisible directions called meta information. The <body> section is where we put all the visible stuff. Here’s a super simple HTML example:
Now here is a short, simple example of CSS using an external file (we’ll call it ‘style.css’). We’re going to call our web page to be white and to make our h1 heading, noted in our simple HTML example as ‘Hi All In One Tuts’, appear in red color and font size of 24 px:
Now, to include this external CSS file (‘stylish.css’), we have to include a link for it within the <head> section of our blank web page, as shown on screen: In the sample file, the top line is a comment and doesn’t do anything. The next part (called body) tells the web page what background color to use for the body section. Right after that, the h1 part says we want our largest heading (h1) to be the color red and its font size to be 24 units high.
We don’t need to include an external CSS file just to decorate one web page. We can just define our styles at the top of the page, in the <head> section. Here’s a quick example in which we’re making our heading (h1) red at a font size of 24 px: