Saturday , 24 July 2021
Breaking News

What is CSS? Types of CSS in Web Technologies

Spread the love

What is CSS?

What is CSS? Types of CSS in Web Technologies is very important in web technologies. CSS is the language for telling the performance of Web pages, including colors, layout, and fonts. It allows one to adapt the performance to different kinds of devices, such as large screens, small screens, or printers. CSS is self-governing of HTML and can be used with somewhat XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different settings. This is mentioned to as the parting of structure (or: content) from performance.

CSS stands for Cascading Style Sheets. It is the coding language that stretches a website its appearance and layout. Along with HTML, CSS is important to web design. Short of it, websites would still be plain text on white circumstances.

Before the growth of CSS in 1996 by the World Wide Web Consortium (W3C), Web pages were extremely limited in together form and function. Initial browsers presented a page as hypertext – plain text, images and links to other hypertext pages. There was no layout at all to speak of, merely paragraphs successively across the page in a single column.

CSS allowed several inventions to webpage layout, such as the aptitude to:

  • Specify fonts other than the default for the browser
  • Specify color and size of text and links
  • Apply colors to backgrounds
  • Contain webpage elements in boxes and float those boxes to specific positions on the page

They put the “style” in style sheets, and for the first time, Web pages could be designed.

The first salable browser to deliver and apply CSS was Microsoft’s Internet Explorer 3 in 1998. To this day, provision for certain CSS functions varies from browser to browser. The W3C, which still oversees and creates Web standards, recently released a new standard for CSS – CSS3. With CSS3, designers hope that all major browsers will read and display every CSS function in the same way.

How does CSS actually work?

When a browser shows a document, it must combine the document’s content with its style information. It processes the document in a number of phases, which we’ve listed below. Bear in attention that this is a very simplified version of what occurs when a browser loads a webpage and that different browsers will handle the process in different ways. But this is roughly what occurs.

  1. The browser loads the HTML (e.g. obtains it from the network).
  2. It converts the HTML into a DOM (Document Object Model). The DOM characterizes the document in the computer’s memory. The DOM is clarified in a bit more detail in the next section.
  3. The browser then makes most of the incomes that are linked to by the HTML document, such as embedded images and videos … and linked CSS! JavaScript is touched a bit later on in the course, and we won’t talk about it here to keep things humbler.
  4. The browser parses the fetched CSS, and sorts the diverse rules by their selector types into different “buckets”, e.g. element, class, ID, and so on. Founded on the pickers it finds, it the whole thing out which rubrics should be practical to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
  5. The render tree is laid out in the construction it should seem in after the rules have been applied to it.
  6. The visual display of the page is exposed on the screen (this stage is called painting).

Types of CSS

There are three ways you can use to tool CSS: internal, external, and inline styles. Let’s break them down.

1. Internal CSS

Internal or embedded CSS requires you to add <style> tag in the <head> piece of your HTML document.

This CSS style is an real method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules to each page of your website.

Here’s how you can use internal CSS:

  1. Open your HTML page and locate <head> opening tag.
  2. Put the following code right after the <head> tag
<style type="text/css">
  1. Add CSS rules on a new line. Here’s an example:
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}
  1. Type the closing tag:
</style>

Your HTML file will look like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>
 
<h1>adnanolineclass Tutorials</h1>
<p>This is our paragraph.</p>
 
</body>
</html>

2. External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is perfect for this condition because it allows you to alteration the look of the entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

  1. <head>  
  2. <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>  
  3. </head>  

The external style sheet may be written in any text editor but necessity be saved with a .css extension. This file should not contain HTML elements.

Let’s take an example of a style sheet file named “mystyle.css”.

File: mystyle.css

  1. body {  
  2.     background-color: lightblue;  
  3. }  
  4. h1 {  
  5.     color: navy;  
  6.     margin-left: 20px;  
  7. }   

3. Inline CSS Styles

Less frequently, you’ll find yourself attainment for inline styles. But they’re still vital to know about because there are certain occasions when they come in handy.

With inline styles, you’ll add the style attribute to an HTML tag followed by your CSS to style a component.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>

So in our circumstance, the text of the primary paragraph is red with a font-size of 20px. The second one, though, remains unchanged.

Let’s take an earlier look at how and when to use inline styles. We’ll also uncover why only one of our sections is styled.

Leave a Reply

Your email address will not be published. Required fields are marked *

Adnan Online Class