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.

CSS3 and what it does
by sheri

CSS3 and what it does

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 :

  • Border Radius : Border Radius allows you to round up your border corners. By specifying its value in pixel you can make it’s border corner rounded.
    1. If you want to make them equal from all the corners then you have to specify the following code,

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

 

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.
Different Types of Selectors in CSS
by sheri

Different Types of Selector in the CSS

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

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

Element Selector

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.

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.

List of Best CSS Tricks
by sheri

List of Best CSS Tricks

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.

Design Box Model on your Web page using CSS
by sheri

Design Box Model on your Web page using CSS

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.

  • Border : Border provides a specific outline around the content. All the content resides inside this boundary. This border value can vary according to how the developer wants it to look like. You can also provide the color for the border.
  • Margin : A transparent area around the border. The value you give to the margin attribute, that much amount of area will get clear around the border of that content. There is no color associated with the margin area.
  • Padding : The spacing between the content and its border. This clears the area between the two and helps in giving a better look to the content of your web page.
  • Content : The text or an image that appears on the web page.

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.

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