SIDEBAR
»
S
I
D
E
B
A
R
«
Embeding CSS in your Webpage
by sheri

Embeding CSS in your Webpage

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

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.

Example

<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.

Design your webpage’s Background using CSS
by sheri

Design your webpage’s Background using CSS

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:

        • background-color

     

        • background-image

     

        • background-repeat

     

        • background-attachment

     

      • background-position

    Background Color

    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”

CSS Video Tutorials
by sheri

 

Below you will find 5 videos I think would be useful for css beginners. There are a wealth of of other videos as well at the major video sites such as Vimeo and Youtube.

 

Basic Css Tutorial

This 20 minute video goes over some of the basics but very important aspects of css.

Firebug tutorial

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.

Css Dropdown Menu

Shane shows you how to build a css dropdown menu from scratch.

Css Splash Page

Adam shows you how to create a css custom page template for a splash page.

Font Family Explained

This short video explains what you need to know about css fonts

 

css for beginners
by sheri

 

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.

CSS Sprite generators
by sheri

CSS Sprite generators

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 Sprites (http://csssprites.com/)
    The CSS Sprites Generator is really easy to use, all you have to do is just choose the images from your system and just upload it. This tool allows you to specify padding between the elements, border around the whole image, background color and the alignment of the image. You must choose smaller files for merging because the CSS Sprites are basically used for merging small images into a bigger one. So, there will be no use if you choose big image files.
Learn CSS online for free
by sheri

Learn CSS online for free

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.

 

W3schools (http://www.w3schools.com)

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.

SIDEBAR
»
S
I
D
E
B
A
R
«
© Copyright cssblaze.com