CSS Basics - Applying CSS to HTML - @importing Stylesheets

There is one more way of importing external style sheets into HTML files and that is the @import property. The syntax look as given below:

<style type="text/css" media="screen">

@import url("styles.css");

...other import statements or CSS styles could go here...

</style>

Sometimes important statements can be seen without the brackets but it does the same thing. One should also be aware that @import should always be first in an embedded style sheet. And you can specify that the imported style sheet is applied only to certain types of media and that is done by including the media type at the concluding part of the imported statement. However, this works in every browser except IE6 and below.

The code given below does the same thing as the previous example:

<style type="text/css">

@import url("styles.css") screen;

...other import statements or CSS styles could go here...

</style>

These are the ways you can import CSS to a HTML document. You may however be careful in choosing the styles you would go with.

Visit back, there are more posts coming up about Cascading Style Sheets i.e. CSS and XHTML.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing,XHTML

CSS Basics - Applying CSS to HTML - External Style Sheets

External Style Sheets is putting all CSS definitions in their own file, saving it with CSS file extension and then applying it to the HTML documents through a link element inside the document head. Lets take a look at the below given link element:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

1. The href attribute points to the CSS file.

2. The media attribute defines which media should get these styles applied to and

3. The type attribute defines what the linked resource is.

With external style sheets you keep the look and feel of your web pages all in one single file. This also means that you can make changes on the pages by just changing a file and leave the rest to the browser that will load the file once and cache it for all other documents that reference it.

For more, visit Oglacs, the software development company renowned for perfect website designing solutions, android application development, etc.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing

CSS Basics - Applying CSS to HTML - Embedded Styles

Embedded styles are those which are placed in the head of the document inside a style element. An example is given below.

<style type="text/css" media="screen">

p {

color:white;

background:blue;

padding:5px;

}

</style>

The benefit of embedded styles is that you don't have to add any style attribute to each paragraph instead you can style them all in a single definition. You can also in a similar way change the look and feel of all paragraphs in a single location. However, this is limited to just one document. If you want to define the look of paragraphs for a whole site in a go, Use External Style Sheets.

Visit back for more on CSS and HTML. You can also visit Oglacs' website for services related to Software Development Company, Android application development, iPhone application development, etc.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing

CSS Basics - Applying CSS to HTML - Inline Styles

There are three ways you can apply CSS to a HTML document.

• Inline Styles
• Embedded Styles
• External Stylesheets

You should know that you should always use the third one unless you have special reasons for using the first two. You'll come to know why is that but before going on to that, let us review the three options.

Inline Styles

Using a style attribute, you can apply styles to an element as given below:

<p style="background:blue; color:white; padding:5px;">Paragraph</p >

Withing this attribute, you list all CSS properties and their values. Here, each property or value pair is separated by a semi-colon from the others and each property is separated by a colon from its value within each pair.

This is how you define styles in CSS.

There is one benefit of the Inline Styles and that is the browser will be constrained to use these settings. Any other styles defined in other style sheets or those which are embedded in the head of the document will be overridden by Inline Styles.

However, this one comes with problems too. Its one big problem is that they make maintenance harder than they should be. In addition to the maintenance issue, Inline Styles doesn't take the advantage of the most coercive part of CSS, the Cascade. Cascade is something which when used defines the look and feel of a web page and the browser applies it to all elements matching a certain rule.

The other two ways will be discussed in the next post. Meanwhile browse the blog for topics like Android Application Development and web application development

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing

CSS Basics - CSS Shorthand Part 2

Comparing individual and shorthand values

Take a look at the below given margin rule (border and padding works in the same way)

div.foo {

margin-top: 1em;

margin-right: 1.5em;

margin-bottom: 2em;

margin-left: 2.5em;

}

The rule as given above can also be written as:

div.foo {

margin: 1em 1.5em 2em 2.5em;

}

Providing less than four values for a shorthand property

A shorthand value has the capability of taking less than four values as listed below. Results are sequential according to the number of values provided.

1. Same value applied to all four sides. margin: 2px; for example

2. First value applied to the top and bottom and the second to the left and right. Example - margin: 2px 5px;

3. First and third value applied to the top and bottom respectively; second value applied to the left and right. As for example - margin: 2px 4px 1px;

4. Values provided to the top, right, bottom and left as given in CSS source order above.

However, the best way is to provide all four values to shorthand properties for it provides sound legibility. The same applies to the padding shorthand property.

Making the choice to use a single property or a shorthand value

Even though shorthand value gets used most often in margin and padding properties, there are times in which shorthand properties are best avoided or at least used after thorough consideration. Shorthand should be avoided in the following cases provided:

1. When a single margin is needed to be set. In such situation, simultaneously setting multiple properties conflicts the KISS (Keep It Simple, Stupid) principle.

2. When the selector to which the properties apply is subject to many edge. In this case, the unavoidable lists of shorthand values can become difficult to follow when it comes to altering and changing the layout.

3. If the stylesheet is going to be maintained by people with limited skills. If you are working with a team and the CSS is maintained not just by you, shorthand should be best avoided.

4. When there is a need of supplanting a value to account for an edge case.

This is all for CSS Shorthand. You may visit back for more on CSS and HTML, Android application development and web application development related articles.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing

CSS Basics - CSS Shorthand (Intro)

As a continuation to my post on Cascading Style Sheets basics today I'll be introducing what CSS Shorthand is. This is one thing we'll come across in this course. It allows combining several related CSS properties together in one property in order to save time and effort. In this section and the upcoming posts or articles, I'll be writing on available shorthand types.

Let me tell you one thing. I have already used shorthand in my previous posts without mentioning it.

Comparing individual and shorthand values

Take a look at the below given margin rule (border and padding works in the same way)

div.foo {

margin-top: 1em;

margin-right: 1.5em;

margin-bottom: 2em;

margin-left: 2.5em;

}

The rule as given above can also be written as:

div.foo {

margin: 1em 1.5em 2em 2.5em;

}

Come back later for more. Visit Oglacs' website by clicking here ----> Software Development Company.

Read more »

Posted in: Cascading Style Sheets,CSS,web design,web development,website designing

CSS Basics - Advanced CSS selectors (Part 4)

Pseudo-elements

This one has two purposes. The first purpose is:

• To use them in selecting first letter or the first line of text inside a given element.
• To easily create a drop cap at the start of every paragraph.

Below are given the rules as example:

p:first-letter {

font-weight: bold;

font-size: 300%

background-color: red;

}

In the above rule, the first letter of every paragraph will now emboldened, will be 300% bigger than the rest of the paragraph, and have a red background.

In order to make the first line of every paragraph bold, we can use the below given rule:

p:first-line {

font-weight: bold;

}

The second use of these elements is to generate content through Cascading Style Sheets which is more complex. We can use the :before or :after pseudo-elements to specify whether a content is to be inserted before or after the element selected. Thereafter, we decide on what is to be inserted. Here is an example of inserting images after every link on that page.

a:after {

content: " " url(flower.gif);

}

We can also use the attr() function to insert attribute values of the elements after the element. As for example, we can insert the target of every link in the document within brackets after them as given below:

a:after {

content: "(" attr(href) ")";

}

Rules like the above are perfect for print style sheets. By print style sheets we meant to say those which we can write and are automatically applied when a user prints a page.

Rules like this are great for print stylesheets, which are stylesheets you can write and which are automatically applied when a user prints a page.

We can also insert incremented numerical values after repeating elements (like paragraphs or bullets) using the counter() function of which will be explained later.

It is to be noted that all these selectors are not supported in IE 6 and below. Important information shouldn't be inserted with CSS for that content will be unavailable if a user chooses not to use the style sheet. The bottom line is, CSS is for styling and HTML is for important contents.

Visit Oglacs Software Development Company's website for more.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing

CSS Basics - Advanced CSS selectors (Part 2)

Universal Selectors

These selectors as mentioned above, select every element on a page and apply the styling properties. As for instance, the following rule says that every element on the page will be given a solid 1 pixel black border

* {

border: 1px solid #000000;

}

Attribute Selectors

These selectors allow selecting elements based on attributes they contain. For example, the following selector shows that you can select every img element with an alt attribute.

img[alt] {

border: 1px solid #000000;

}

By using the above selector, you will be putting a black border around any image that has an alt attribute.

Selecting attributes becomes more useful if you can select them by attribute value instead of just attribute names as given in the example below:

img[src="alert.gif"] {

border: 1px solid #000000;

}

You may think that this is not that useful but it can be useful when it comes to debugging. CSS 3 now introduces three new types of attribute selector that can select based in text strings in attribute values.

Child Selectors

One can use a child selector for selecting specific elements that are children of other specific elements. As for example, the following rule will turn text of strong elements that are children of h3 elements into blue but will cause no effect on other strong elements.

h3 > strong {

color: blue;

}

(Note: Child Selectors are not supported in IE 6 and below)

Descendant Selectors

Similar to child selectors, descendant selectors however only select direct descendants. These selectors select only suitable elements from anywhere in an element hierarchy, not only direct descendants. Look at the following HTML snippet.

<div>

<em>hello</em>

<p>In this paragraph I will say

<em>goodbye</em>.

</p>

</div>

The div element is in this snippet is the parent of all the others. It has two children, em and p. The p element has another single child element, another em.

A child selector can be used to select just the em immediately inside the div as:

div > em {

...

}

But if you use a descendent selector, as give below:

div em {

...

}

Both em elements would be selected.

to be continued... visit back for more or visit Oglacs, the software development company.

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web design,web development,website designing,XHTML

CSS Basics - Grouping Selectors

Yet again, you can group different selectors. For example you want to apply same style to h2 and p, you could write the CSS below:

h1 {color:blue;}

p {color:blue;}

In the above CSS you repeat information that is the same (i.e. color:blue). To shorten the Cascading Style Sheet, you can group the selectors together with a comma. Doing this will apply the rules withing the brackets to both the selectors. You can write it this way.

h1, p {color:blue;}

Of the several selectors (each matching a different part of the markup, HTML), the three most basic ones you'll come across most often are:

p {}: element selector

This selector matches elements of the name on the page.

.example{}: class selector

The selector matches elements that have a class attribute with the value specified. Therefore, the above would match <p class=”example”>, <li class=”example”> , <div class=”example”> or any other element with class “example”.

#example{}: id selector

Matches every element that has an id attribute with the value specified. All element with the id of example would match.

This is all for the day. Come back for more on topics like software development, android application development, web designing, application development, etc.

Read more »

Posted in: Cascading Style Sheets,CSS,web design,web development,website designing

Cascading Style Sheets Basics - Comments

Commenting in your CSS is one thing you should know while working on Cascading Style Sheets. Comments are added by enclosing them in /* and */. Comments can span several lines and these lines will be ignored by the browser.

/* These are basic element selectors */

selector{

property1:value;

property2:value;

property3:value;

}

Comments can be added between rules or inside the property bock. As for instance in the following given CSS, the second and third properties are enclosed within a comment delimiters. These properties will hence be ignored by the browser. This is therefore useful while checking out what effect does a certain part of a CSS has on the web page. What you need to do is just comment on them, save your CSS and reload the HTML.

selector{

property1:value;

/*

property2:value;

property3:value;

*/

}

Cascading Style Sheets, unlike other languages has only block level comments; single line comments doesn't exist. One can however limit the comment to a single line but this too needs the elements to include the opening and closing comment delimiters “/* and */”.

For more, visit Oglacs Software Developement Company's website. 

Read more »

Posted in: Cascading Style Sheets,CSS,HTML,web development,website designing,XHTML

CSS Basics - Defining Style Rules

You might have read about my earlier post on CSS introduction. This article is a continuation to my earlier article. Without wasting much time, lets have a look at an example of a CSS code and then analyze it.

selector {

property1:value;

property2:value;

property3:value;

}

The relevant parts are as follows:

The Selector

The selector is a part of a CSS that identifies the HTML elements in which the rule will be applied to. Identification is done by the actual element name such as body, sidebar, footer, etc. More details will be discussed later on.

The Curly Braces “{“ “}”

These curly braces envelop the property/value pairs which are separated from one another by semi-colons (;) while the properties are separated from their respective values by colons (:).

The Properties

The properties define what you want to do with the element or elements you have selected and they come in wide varieties. These varieties can affect element color, position, background color, margins, font type, padding, etc.

The Values

The values as in context to CSS are the values that you want to change or assign to each property of the elements selected. Values are dependent on properties. As for instance, properties that affect color can use up hexadecimal colors like #4459ff, color names like red, green, blue, yellow, etc. or RGB values like rgb(132,55,44).

Properties that can change position, borders, height, width, etc. can be measured in pixels, percentages, ems, centimeters, inches, etc.

Here is one example to a CSS code:

p {

margin:4px;

font-family:verdana;

color:green;

}

The HTML element that this rule selected is p i.e. every p element in the HTML document or documents that uses this CSS. All p element in the HTML documents that uses this CSS will have the rule applied to it. If more specific rules are applied to them, the specific rule will overwrite the current rule. As per the rule above, the properties affected are the font inside the paragraphs, margins around the paragraphs and the color of the text. The margins here are set at 25 pixels, font is Verdana and the color of the text is green.

We will be coming back to all these in detail later. To know more about Cascading Style Sheet in detail, keep visiting back. Not only CSS, you can also read about Android application development, iPhone application development, etc. from my article section.

Read more »

Posted in: Cascading Style Sheets,CSS,web design,web development,website designing

Cascading Style Sheet or CSS Basics – An Intro

Before proceeding with what is Cascading Style Sheet, let me write a little about what HTML is. HTML or Hyper Text Markup Language is what structures a document and tells browsers the function of each element. An element can either be the Title, Heading, a Link, an Image, etc. However, CSS is something that gives instructions to browsers on how to display the elements in a page. Elements like styling, spacing, positioning, etc. are done by CSS. If HTML is the bricks and gaits that constitute the structure of a building, CSS is the paint and plaster that decorate the building and make it either pleasant or horrible to look at.

Nowadays, people learn CSS and HTML by themselves and there is hardly any need for software development company to help them. CSS is executed by using a system of rules that you will get to know of in my succeeding articles. These rules define what style a particular HTML element should have. These rules can manipulate styles within which are included certain properties of an element like the color, font size, font type, alignment, etc. In short, CSS can find a single or group of element and define their styles like color, size and alignment. As for example, CSS can find every element with a particular class name and color their backgrounds in green and increase or decrease the text inside them and make them look different from the normal paragraph text.

One thing to remember is that CSS is not a programming language like JavaScript neither a markup language like HTML. Cascading Style Sheet is what defines the look of a website. It works along with other markup language making websites look better and constant. It is something that was invented to keep the look of a certain web page constant though the internet or web environment changes with time. Change can be in any form. Once, people used only desktop and the laptop for browsing the internet but now people use mobiles, tablets and other multimedia devices to browse the internet and two different devices have different ways of displaying a website. This is when CSS comes to the rescue.

So, why hire any software development company or a web application development company to design your web page while you can learn it by yourself? When people are learning Android application development themselves, CSS is not a big issue.

Watch out for my next article on the same topic.

Read more »

Posted in: CSS,HTML,web development,website designing

Designing a Perfect Landing Page – Website Development

What do you mean by a landing page? It is the page on your website where visitors of your website first see when they click on any link directed to your website. It can be the home page of your page, the about us page, FAQ page, etc. but is designed in a way that impresses all those who visit the site for the first and forever. It can be a place where you can provide high impact customized sales pitch for your visitors. A great landing page can considerably increase conversion rates of your business.

It is a page in your website which you should give most importance to. Your visitors come to your website with reasons and if you are able to provide the information or product you are looking for, you can capture their attentions and gain numbers of loyal customers. And if you are paying for traffic through banner ads, PPC or sponsored links, it is very important that you design a great landing page and this you can do it by yourself (if you have the creative mindset needed) or you can hire any software development company that provides web application development or website development services.

Here are some tips on how to design an effective landing page that will help you gain loyal customers and thereby higher ROI:

Make the Page Eye-Catchy

Bear in mind that only a perfect content of a website is not going to work out. You should also keep in mind the section of people who rely on looks. Therefore, you should make sure that you website has eye-catchy designs. The designs however should be based on products and services you provide. Use images and other media that will impress visitors and keep them coming back for more.

Center on Just One Main Subject Matter

Your company or business might be Multiservice provider and you may make the mistake of showcasing every services you offer on your landing page. That can annoy visitors due to lack of precise and concise information. To avoid that, you should just focus on one main topic. If your company is renowned for Android Application Development, you can provide detailed content on that particular service. This will ensure that your page attract visitors' attention.

Ensure that your Site has User Friendly Navigation

Even though you have a perfect web content and media, if you have hard to understand navigation, visitors are likely to abandon your website earlier than you think. So it is also important that your site has a navigation pathway that is clean, easy to the eyes and fingers.

Employ Catchy Headlines

When you go through a newspaper, what do you first look for? You first go for the headlines and so is the same when visitors visit your website. Therefore, it is important that you use a catchy headline so that visitors would like to explore your website more. If your target audience is those who looks for software development company that provides best android application development or web application development, the headline should also portrays exactly the information or service your audience is looking for. Headlines should be clear and crisp.

These are some tips on how to design your website's landing page and here are some more you should focus on and they are:

1. Using Abundant White Space

2. Delivering Value Propositions and

3. Making Message on the Site Compelling and Convincing.

Read more »

Posted in: SEO,web design,web development,website designing

Web Design Disasters

With the aim of making a website more attractive and popular, website owners may do things that will not enhance the website’s quality but degrade it. You may be tempted to certain temptations that can lead your website to be fatally wrong. Some of the most common mistakes you may commit are given below.

Too Many Graphics

In a way to make a website attractive, you may make a serious mistake of including many graphics to your website thereby making you website difficult to load. This is another reason why visitors never come back to visit your site. You can avoid this problem by limiting the number of large graphic image. You may upload GIF images instead of JPEG files. Another way is to reduce the size of the image to that extent that it is not distorted.

Banners

Web banner is another way of enhancing the look of your website but you should also not deny the fact that this same banner can be another reason of a slowed down webpage. If this happens, there is no stopping your visitors from moving away from your site. Therefore, banners should be inserted in a website only after considering how important it is.

How do we avoid slow page loads due to a banner? This can be done by placing a banner at the very top of the web page. Even placing a small banner in the sidebar is also helpful. Banners are the first thing people look for in a website therefore, you should be careful in selecting an image keeping in mind that the image should be relevant to the products and service provided by your website.

Hits Counters

One thing is the hits counter, also known as visitor counter. You may out of curiosity, would like to add such counters so that you can know how many visitors visit your website. But this may create a bad impression to your visitors if you have little number of all time visitors. Visitors trust less on sites which has less number of visitors. If you have outstanding visitors, you may consider putting them up.

These are some of web designing disasters. You may visit Oglacs’ official website for more and solutions on any type of such problems.

Read more »

Posted in: Oglacs,web design,website designing