After knowing the basics of CSS, and knowing what effects it adds to your document. Now it’s time to understand the ways you can add CSS to your document. Basically, CSS can be categorized in three categories based on how we can attach style sheets in the document namely, Inline CSS, Internal CSS and External CSS. When a browser downloads requested HTML document it automatically read out the CSS rules defined in that document. Each and every type has its own significance of use in the document. Which type and where to use is the secret question. We will explain all this step by step.
Inline CSS is the styling sheet that is embedded into the document by using “style” attribute with any HTML tag as it is a global attribute. Normally, we use it with heading tags (<h1>-<h6>), paragraph (<p>), div tag (<div>), and many more to add style to that section of the document.
<h2 style=”color : blue;”> The printed text is in blue color </h2> <p style=”color : red;”> This printed text will be displayed in a paragraph with red color. </p>
<h2 style=”color : blue;”> The printed text is in blue color </h2>
<p style=”color : red;”> This printed text will be displayed in a paragraph with red color. </p>
However, we should avoid using Inline style of adding CSS to our document as it is very complex way for the designing websites. It is efficient only for only small documents. Normally we avoid using Inline style as it becomes very difficult to manage, if we need to make any updates in the document in the future. The alternative to this are the other two styles to embed CSS in the document.
CSS is basically used to add style to your HTML document. Each part of the HTML document can be made attractive by using CSS. It can be made attractive by changing background color, by adding images in the background, use different font styles for different text, different hover style on text and images and a lot more. But providing background and adding style using CSS on your web page is one of the most important things while designing the web page. We must carefully analyze and choose what we can do with the background of our web page.
CSS background properties add different styles to the background of your web page. Most common CSS properties that can be used to define a style for the background of your web page are as follows:
The background-color property defines the background color of the web page. You can add any color you want so that your web page looks attractive to your audience. This property is added in the body element of the HTML document. body {background-color : #ff0000;} The above style of defining the color is by defining the hex value of the color. We can do it by some other ways like,
• HEX value – like “#ff0000” • RGB value – like “rgb(255,255,0)” • Color name – like “blue”
This 20 minute video goes over some of the basics but very important aspects of css.
Firebug is a great way to practice CSS on live websites around the web. Its free and you only need to have Firefox web browser to use it. If your looking to experiment with a great variety of websites using different CSS setups this is the plugin I would most recommend.
Shane shows you how to build a css dropdown menu from scratch.
Adam shows you how to create a css custom page template for a splash page.
This short video explains what you need to know about css fonts
CSS for Beginners
Before starting CSS we assume that you have an understanding of basic HTML (i.e., Hypertext Markup Language) that is used to design webpage.
CSS stands for Cascading Style Sheet, as the name implies it’s a style sheet that helps you to style your webpage. It is basically a way to present your document. Adding styles to your webpage means to add color, border, proper spacing, appropriate heading wherever required and much more. CSS added a great functionality to the webpage and helped us to decorate Internet like never before.
You must be wondering How it works? Well it’s not that very difficult to learn, all you have to do is just carefully read and analyze the syntax used to give style to the content of your webpage and make appropriate changes.
Use of CSS
CSS has become a very important part of web designing. Without CSS one cannot hope to design a truly attractive webpage. But what makes a webpage attractive? Earlier (pre-2000) only HTML was used to make webpages and put the information necessary to display on the webpage. With addition of tags like <font> and attributes like colors in HTML 3.2 it became a lot easier for the web developers to display their content in an attractive manner. But the problem arises when developing large websites, it becomes a difficult task to define style for every single page separately again and again for 100s or 1000s of web pages. Then, World Wide Web Consortium (W3C) decided to introduce CSS.
CSS3 is known to contain the definition of advanced features of CSS. With CSS3 you can really spice up your web page. Nowadays, CSS3 and HTML5 are on boom for their well known extraordinary features that can really make your web page like never before. With the advent of CSS3 and HTML5 the developers can really perform a lot of new things that will probably attract more visitors to your web page. Well, coming back only to CSS3, it has introduced many new features that enable developers to develop such apps and the web pages with better functionality, speed, performance and enhance your experience of surfing your web page on the internet. CSS3 has been modularized to provide a better understanding and to make it easier to update the individual modules separately rather than doing it altogether.
Below, are a list of few things that you can perform using CSS3 :
-webkit-border-radius: 20px; border-radius: 20px;2.
If you want to make all the four corners radius unequal, then use the following attribute to specify the values, -webkit-border-radius: 20px 30px 40px 50px; border-radius: 20px 30px 40px 50px;
When you request a web page to the corresponding web server via your web browser on the local machine, it made HTTP requests for content, images and the whole information necessary to display the web page on your local machine. So to reduce those HTTP requests for images we use CSS Sprites. CSS Sprites are a way by which you can reduce the number of HTTP requests for the image that your browser made. This will in turn reduce the loading time of the web page you requested and finally in turn increases the efficiency, proficiency of your web page on the internet.
How to use them?
Basically, CSS Sprites merge more than one image into a single image so that the browser can reduce the number of HTTP requests for images from the server. Less images will result in less http requests that will further result in faster loading time. Also they are pretty easy to use as online CSS Sprites generators are available. A list of them are mentioned below. You can choose the best for yourself although all of them are quite good.
CSS Selectors, as the name implies, select an element corresponding to it in the coding of your HTML web page. There are a number of selectors depending upon their scope throughout the web page. Availability of a number of selectors in the CSS makes it different, more reliable, and one of the most powerful languages over the Internet. You must choose any selector according its scope throughout your web page i.e., how much you want to use it in your web page. So, below are a list of selectors used while designing CSS for a web page.
Universal Selector is represented by an asterisk (*) sign also called a wildcard. With this selector we can any or all elements in the document. It is defined as
* { color : red; }
The above example will apply red color to all the foreground text to all the elements. It includes headings, paragraph, div element, cells in tables, etc..
An element selector selects every element in the document that matches the tag designed with that selector. Element selector is more specific than that of the Universal Selector. For example,
ex { color: red; }
In this, every ex tag in the document will be given red foreground color. These are also called as type selectors too. If there are a number of elements corresponding to this tag then it will be modified according to the attribute properties specified under this selection.
Online learning has become very common as almost two out of three people in the world is connected or using the internet for one or the other way. If you are keen to learn and have some passion to learn anything then you can learn anything from this vast ocean of knowledge. The internet has knowledge about everything that you can even think about it. But the thing is that you must know from where you can get the perfect knowledge about the thing you want to learn. So, below are a small list of websites from where you can learn CSS (i.e., Cascading Style Sheet) online for free.
Whenever we talk about learning CSS online, the most popular source that immediately clicks into the mind is, w3schools. This is because of the quality tutorials that they provide and regular updates in the tutorials, whenever some update has happened in the languages. So, w3schools is the top most recommended sites to learn CSS. They have provided a wide range of functionalities and with a clear understanding of basic concepts. Beginners should definitely start learning CSS from this source only. Also, they have tutorials for CSS3 and you can also practice programs by editing their pre-written program in the editor provided on the site. With every concept there are examples where you can easily practice those concepts.
CSS, a very well known language that helps us in giving style to our web page, so that the viewer can feel happy, get all the information that he wants and would love to visit our web page again and again. So, there are many tips and tricks that can apply to different sections of a web page to make it look attractive. This is the reason why we are providing a list of best CSS tricks we are providing. This list comprises of the style and the things that we can perform using CSS, it may be at the basic level, intermediate level or at the advanced level. But most probably you will find it in the ascending order of their complexity or their level.
• Choose good typography style for your blog or website so that the person who visit on that blog or website feels comfortable in reading the desired content. The visitor must find easy to find the content on the page so that they return back again to your page to solve any query in the future. If the typography is not good then there are lots more options available to the user.
• You can define a class for heading (<h1> tag), so that you can replace the heading text with an image or a stylish font. Only <h1> heading tag is specified here, this is because of the fact that the title of the article you are writing is most important as any search engine consider your content by finding it out by its title text. So, this is the way you can make it attractive and yet makes it searchable for search engine to count upon.
Box Model, a term that used in CSS only which include all that is near around the box. If we talk about the box model in CSS, it will comprise of all the things belongs to that box model i.e., borders, margins, padding and the content associated with it. All these terms have their specific meaning in accordance to design and give style to the content of your web page. Let’s have a quick learning of the meaning of these terms.
Now using the above attributes, the developer can make a box model looks attractive. The things that you can do with the box model are mentioned below with the details of the attributes associated with them.
