Tag: css

How to add CSS to HTML?

Basic Insight into Inline, Internal and External CSS

Before getting into the topic of how to add CSS to HTML, first we will try to understand what CSS means, how to write it, difference between HTML and CSS, advantages of CSS.

What is CSS?

CSS stands for Cascading Style Sheet. In simple terms, CSS is used to style an HTML document. It describes how an HTML document is displayed. CSS defines the design and layout of a webpage. It can control how a web page look when loaded in browser. The term “Style Sheet” refers to the CSS document itself whereas “Cascading” refers to how style rules are applied to elements present in a web page.

What is the difference between HTML and CSS?

          While building a website, we will usually start with HTML. HTML is a Markup language, we can add headings, paragraphs, images, tables, forms, lists etc., But HTML is more of static in that we cannot change how the above-mentioned elements are presented and displayed in a webpage. It is often used for wide variety of styling purposes including changing text and background color on a page, removing underline from links, animating images, text and other HTML elements. At this point we will need CSS.CSS describes how HTML elements are displayed on a webpage. Thus, usually HTML and CSS go hand-in-hand with website development. Since the creation of CSS several updates have been made to add additional functionality to CSS, now the current standard is CSS3.

Advantages of CSS:

  • Less Coding: Developer can use CSS to apply the same styling to multiple pages and page elements across a website.
  • More Styling Options: CSS allows us to add lot more styling options to customize our website.
  • Standardization: Standardization gives us uniformity which means a developer can understand the style of a website just by looking at the CSS file.
  • Better Performance: As above mentioned, less code means smaller files, and smaller files automatically leads to less loading time which results in better performance.

How to write CSS?

A CSS syntax looks like this:

The Selector points to the HTML element we want to style.

The declaration block contains one or more declarations separated by semicolon.

Each declaration includes a CSS property and a value separated by colon.

Multiple declarations are separated by semicolon and a declaration block is enclosed by curly braces.

How to add CSS to HTML?

Now we will get into the topic of adding CSS to HTML, we can add CSS to HTML by three ways:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS:

          An inline CSS may be used to apply a unique style to single element. Inline styles are defined within the ‘style’ attribute of the relevant element. It is placed inside the HTML tag to change the style of an element. Since we cannot separate style and content in this type and it has violated many of the advantages of CSS, its generally not recommended to use in practice.

Output:

Internal CSS:

          CSS code is embedded in an HTML document. It is written inside the <style> element, inside the head section. It can be used when single HTML page has a unique style. Suitable for small web projects and individual web pages with their own styling.

Output:

External CSS:

          External CSS exists in its own file. The file is linked with HTML with <link> tag. It is the most common method, since one CSS can be used for multiple HTML documents. To create an external css we can write the code in any text editor or code editor and save the file with .css extension. To link the HTML and CSS file place both the files in same folder.

Linking CSS to HTML:
<link rel="stylesheet" href="external.css">
HTML:
CSS:
OUTPUT:

In this article we have learned basic understanding of CSS, its advantages and three ways of adding CSS to HTML.

What is client-side scripting?

Before jumping into client-side scripting, first we will see a short intro about script.

What is a script?

Script is a small embedded program. Popular scripting languages are Javascript, VBscript etc.,

HTML is not a scripting language because it does not have <script> tag. We need to use <script> tag to generate a script. </script> is used to end the script.

The type attribute in script specifies the type of language we are using. We can also use language attribute.

//type attribute
<script type = “text/javascript”>
     document.write(“TutorialRide”);
</script>
//language attribute
<script language= “javascript”>
     document.write(“Abaython”);
</script>

Client-side scripting:

Client side script is a small program embedded into your web page. Client-side scripting means ‘happening inside your browser’. Here scripts are executed on the browser without connecting to server. When the server sends the script along with HTML webpage to the client, the script runs on client’s browser either while page is loading or after page is loaded.

It is a technique for enhancing the interactivity of online web pages.

It is widely useful in creating dynamic user interface components like pull-down menus, navigation tools, animation etc.,

Its helpful in making the webpage user-friendly.

So, HTML, CSS and JavaScript all are client-side. They are stored on the server like files, but it’s the responsibility of the browser to do anything with them.

JavaScript is used to create dynamic and responsive webpages.

Benefits:

  • Client side scripting is quite easy to learn with minimum programming knowledge.
  • It is light weight and easy to implement. Editing and executing code is fast.
  • Data processing is done on client side from server so it is easy to scale applocations  for large set of users . Reduces workload on server.
  • Execution of client side script is quick as it done on client browser.

Limitations:

Main problem is security as the code is sent as it is. It is usually visible. Not suitable for sensitive data transmission. The web application based on the heavy JavaScript can be complicated to debug and maintain. Running of script depends on browsers configuration and security level. More limited functionalities.