What is CSS how to use in web Application?

What is CSS how to use in web Application?

 CSS is short for Cascading Style Sheets and is the primary language used to describe look and formatting for web pages across the Internet and documents of markup (e.g. HTML and XML) in general.

A markup language like HTML was initially designed to provide information about formatting and looks itself, but it soon became clear that it would make much more sense to split this into two layers: Document Content and Document Presentation, with CSS fulfilling the task of the latter. Historically that is why HTML has tags like font, which sole purpose is to adjust font family, color and size locally, a job that is today handled by CSS.

 This allows the developer to re-use formatting rules across several places in the same document and even across multiple documents. Here's an example to prove my point, and don't worry if it's not entirely clear to you what it does - all aspects will be explained throughout this tutorial:

Old style text formatting, using only HTML:

Try this example of css in your html page:

This is a piece of

<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with

<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in

<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

A more modern approach with CSS:

Try this example also this is related to css in your html page:

<style type="text/css">

.highlight {

        color: Blue;

        font-style: italic;

        font-weight: bold;

        font-size: 120%;

        font-family: Tahoma, Verdana, Arial;

}

</style>

See this is a piece of:

<span class="highlight">text</span> with

<span class="highlight">highlighted</span> elements in

<span class="highlight">it</span>.

Notice how I simply re-use the same set of rules across several HTML tags. This is already an advantage when using it three times, like we do in the example, but it doesn't end there - put the CSS in an external stylesheet file (more on that later) and you can use the same rules across your ENTIRE website. And how about when you decide that highlighted text should be red instead of blue? With the first approach, you would have to manually edit the tags everywhere you used it - with CSS, just change the single ".highlight" rule!

More About Css:

CSS allows you to easily apply rules about formatting and layout to your HTML elements and then re-use those rules across multiple elements and even pages. In this introduction, we looked at some CSS code, but we did not talk about how it works and why it looks the way it does - this will be the subject for the next couple of chapters, where we start from scratch and explain it all in details.

1. What is CSS?

The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

2. What is the origin of CSS?

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

3. What are different ways to integrate a CSS into a Web page?

There are three ways to integrate CSS into a Web page

a.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.
b.) Embedded: By placing the code in a STYLE element within the HEAD element.
c.) Linked/ Imported: Place the CSS in an external file and link it via a link element.

4. What are CSS frameworks?

It is a pre-planned libraries, which allows easier and more standards-compliant web page styling, using CSS language.

5. Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

6. What do you means by CSS selector?

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

7. Why is it easy to insert a file by importing it?

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:

@import notation, used with <Style> tag.

8. Is it Possible to add more than one CSS?

Yes, it can be achieved by using a semicolon.

9. What is float property of CSS?

The float property specifies whether or not a box (an element) should float.

10. How does Z index function?

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

11. How can you remove gap under the image?

As images being inline elements are treated same as texts, so there is a gap left, which can be removed by using the CSS code: img { display: block ; }

12. Why we use CSS @import only at the top?

@import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.

13. What is Inline style?

The Inline style in a CSS is used to add up styling to individual HTML elements.

14. How comments can be added in CSS?

The comments in CSS can be added with /* and */.

15. Define Attribute Selector?

It is defined by a set of elements, value and its parts.

20. Define property?

A style, that helps in influencing CSS. E.g. FONT. They have corresponding values or properties within them, like FONT has different style like bold, italic etc.

21. How to restore the default property value using CSS?

In short, there’s no easy way to restore to default values to whatever a browser uses. The closest option is to use the ‘initial’ property value, which will restore it to the default CSS values, rather than the browser’s default styles.

22. How many fonts are available in all CSS version?

Only five basic font families( serif, sans-serif, cursive, fantasy, and monospace) are recognized across platforms, rather than specific fonts.
Specific font name recognitions will vary by browser

23. What are the advantages/disadvantages of using CSS preprocessors?

Here is another opportunity to discuss your personal preferences on use of CSS preprocessors and why.
While there’s no right or wrong answer here, below are some commonly cited pros and cons of using preprocessors:

Benefits: Ability to use nested syntax, define variables and mixins, use of mathematical and operational functions, and the ability to join multiple files into a single one.

Disadvantages: Difficulties tracking file size, maintenance and updating issues, difficulties debugging.

24. Explain the difference between visibility:hidden and display:none

visibility:hidden simply hides the element, while it will still take up space and affect the layout of the document.
display:none also hides the element, but will not take up space and the page will appear as if the element is not present.

25. Explain what a Class selector and ID selector:

Class selector: A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class.

ID selector: IDs are used to identify and apply styling to a single specific HTML element. IDs are defined within the HTML page by inserting an ID selector in the HTML element