MENU

Monday, 25 April 2022

HTML CSS (Cascading Style Sheets)

 CSS Tutorial

CSS Illustration

CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation  of the web pages.

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup (specifically inside the HTML tags); all the font colors, background styles, element alignments, borders and sizes had to be explicitly described within the HTML.

As a result, development of the large websites became a long and expensive process, since the style information were repeatedly added to every single page of the website.

To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium (W3C), which also maintains its standard. CSS was designed to enable the separation of presentation and content. Now web designers can move the formatting information of the web pages to a separate style sheet which results in considerably simpler HTML markup, and better maintainability.

Advantages of Using CSS

The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document. Here are some more advantages, why one should start using CSS?

CSS Save Lots of Time 

 CSS gives lots of flexibility to set the style properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.

Easy Maintenance 

provides an easy means to update the formatting of the documents, and to maintain the consistency across multiple documents. Because the content of the entire set of web pages can be easily controlled using one or more style sheets.

Pages Load Faster 

CSS enables multiple pages to share the formatting information, which reduces complexity and repetition in the structural contents of the documents. It significantly reduces the file transfer size, which results in a faster page loading.

Superior Styles to HTML

has much wider presentation capabilities than HTML and provide much better control over the layout of your web pages. So you can give far better look to your web pages in comparison to the HTML presentational elements and attributes.

Multiple Device Compatibility 

CSS also allows web pages to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as desktop

Three Types CSS

To use CSS with HTML document, there are three ways:

Inline CSS: Define CSS properties using style attribute in the HTML elements.

Internal or Embedded CSS:  Define CSS using <style> tag in <head> section.

External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.

 Inline CSS:

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).

Ex: 
<h3 style="color: red;  
 font-style: italic; 
 text-align: center;  
   font-size: 50px; 
 padding-top: 25px;">Learning HTML using Inline CSS</h3>  

Internal CSS:

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Ex :
<!DOCTYPE html>  
<html>  
<head>  
 <style>  
 </style>  
</head>  
 <body>  
<h2>Learning HTML with internal CSS</h2>  
<p class="red">This is a red color paragraph</p>  
<p class="black">This is a black color paragraph</p>  
<p class="green">This is a green color paragraph</p>  
</body>  
</html>  

External CSS:

An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.

There are two files need to create to apply external CSS

1. First, create the HTML file
2. Create a CSS file and save it using the .css extension
3.Link the CSS file in your HTML file using tag in header section of HTML document.

Ex :
<!DOCTYPE html>  
<html>  
<head>  
<link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
<body>  
<h2>Learning HTML with External CSS</h2>  
<p class="red">This is a red color paragraph</p>  
<p class="black">This is a black color paragraph</p>  
 <p class="green">This is a green color paragraph</p>  
</body>  
</html>  

0 comments:

Post a Comment

LATEST

PROGRAMMING LANGUAGES

WEB TECHNOLOGIES

DBMS

C

C++

PREPARATION

LATAST POSTS

Top