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 - 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 3)

Adjacent Sibling Selectors

These selectors allow the selection of specific elements that come directly after another specific element. However, the elements are of the same level in the element hierarchy. In the following rule, you will be able to select all p elements that comes immediately after h2 elements but not other p elements.

h2 + p {

...

}

(Note: Adjacent Sibling selectors are not supported in IE 6 and below)

Pseudo-Classes

These classes are used to provide styles to various states of elements. Its most common usage is in styling links states. Examples are given below:

:link—the default state of links.

:visited—links already visited in the browser.

:focus—links that currently have the keyboard cursor within them.

:hover—links that are currently being hovered over by the mouse pointer.

:active—a link that is currently being clicked on.

According to the following rule the default links will be blue. The underlining under the link will disappear when hovered over. In order to make the same effect take place when links are focused via the keyboard, :hover rule is duplicated with :focus. If a link is already visited, the color of the link will turn gray and finally, when a link is active, it is emboldened.

a:link {

color: blue;

}

a:visited {

color: gray;

}

a:hover, a:focus {

text-decoration: none;

}

a:active {

font-weight: bold;

}

Note that the above specified rules should be in the same order. It may not work otherwise. This is because specificity of a rule in a style sheet may override the earlier rules. You will come to know more about it later.

The :focus pseudo-class also comes in handy as a usability aid in forms. For instance, we can highlight the input field that has the active blinking cursor with a rule like given below:

input:focus {

border: 2px solid black;

background color: lightgray;

}

Now, lets have a look at :first-child. This pseudo-class selects any instance of the element that is first child element of its parent. As given in the example below, the rule selects the first list item in any list and makes its text bold.

li:first-child {

font-weight: bold;

}

Last but not the least, lets look at :lang pseudo-class. This class selects elements whose languages have been set to a specified language using the lang attribute. An example is given below.

<p lang="en-US">A paragraph of American text, gee whiz!<p>

Could be selected using the following:

p:lang((en-US) {

...

}

Come back for more CSS tips. Visit Oglacs software development company for more.

Read more »

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

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

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

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

What is CSS?

Oglacs is one software development company that provides one of the best web development services in India and elsewhere. The company has worked with clients from the United States and other countries too.

Being working in this company today I will be posting on what is CSS and XHTML.

CSS (Cascading Style Sheets)

In simple words, CSS can be defined as a modern way of website designing which separates design from content. CSS allows:

• Website to load faster
• Enable a consistent appearance on your web page
• Allows search engines to easily go through the contents and know what's on the page for listing it up among search results.

Oglacs' web developers are well accustomed to using CSS and therefore are successful in controlling a website so that its clients get maximum profit out of thier services and their business too. CSS saves work and time thereby the amount of investments too.

XHTML

XHTML (Extensible HyperText Markup Language) is a language used in developing or designing websites that allows impressive and compatible appearance even when accessed across a wide range of browsers. XHTML is almost identical to HTML and is also defined as a re-structured version of HTML.

Developers at Oglacs understand that today's market comes up with different browsers. Attention is given to all types of browsers and devices and website are designed for maximum optimization accordingly. More can be known form Oglacs' website.

Read more »

Posted in: CSS,HTML,software development company,web design,web development,XHTML