Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Basic styling in web pages - Introduction to CSS

 Styling in web pages is done by CSS (Cascading Style Sheets). It is actually to control how HTML should be displayed. It started developing to solve problems in HTML 3.2.

There three kinds of CSS:

  1. Inline : It is the most basic way to use.
  2. Internal : This is can be done using <style> tag in <head> section 
  3. External : This uses an external CSS file

Basic syntax of internal CSS:

selector{
property : value ;
}

h1{color : blue;
}

Lets look at the Example:

<!DOCTYPE html>
<html>
<head><title>Styling in html</title>


<style>
h1.myheading{
 color: red;
 font-weight: bold;
}
</style>


</head>
<body>
<h1 class="myheading">The CSS demo</h1>
<p>CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. 
It allows one to adapt the presentation to different types of devices, such as large screens, small screens, 
or printers. CSS is independent of HTML and can be used with any XML-based markup language.</p>
</body>
</html>

Description:

In Inline CSS, we create a <style> tag inside the <head> tag and we are good to go. Now we may determine what selector will be given what type of styling.
To learn about Classes and ID visit 

Basic syntax of inline CSS:

          we can change the color and fonts of texts in html file by adding the attribute "style" along with any heading or paragraph tag.

Lets look at the Example:

<!DOCTYPE html>

<html>

<head><title>Styling in html</title></head>

<body>

<H1 style="color:red;">What is html</H1>

<p style="font-size:120%; color:blue">Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>

</body>

</html>

Note: The inline CSS is not really recommended because it may cause some problems, rather than that the Internal CSS is quite well to learn that we are going to cover here.

Description:

So here is the thing that we need to write styling like this:

style=key value : name value

note: color is the key value whose name is blue here and we may also add more styling by separating them with semi colon " ; " .

Post a Comment

0 Comments