CSS syntax

-

CSS syntax

Let's say we want a nice red color as the background of a webpage:
Using HTML we could have done it like this:

 
 <body bgcolor="#FF0000">
With CSS the same result can be achieved like this:

 
 body {background-color: #FF0000;}

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external.

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:

 <html>
   <head>
  <title>Example</title>
   </head>
   <body style="background-color: #FF0000;">
  <p>This is a red page</p>
   </body>
 </html>

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

 <html>
   <head>
  <title>Example</title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  <p>This is a red page</p>
   </body>
 </html>

Method 3: External (link to a style sheet)

The recommended method is to link to a so-called external style sheet. Throughout this tutorial we will use this method in all our examples.

An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.
For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this:



The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code:

<link rel="stylesheet" type="text/css" href="style/style.css" />
Notice how the path to our style sheet is indicated using the attribute href.
The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this:
<html>
  <head>
     <title>My document</title>
     <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
   ...

Comments

Post a Comment

Popular posts from this blog

Displaying a flash message after redirect in Codeigniter

-
To set flashdata you need to redirect controller function $this->session->set_flashdata('message_name', 'This is test message'); //redirect to some function redirect("controller/function_name"); //echo in view or controller $this->session->flashdata('message_name'); E.X in model file if($query){ $this->session->set_flashdata('xyzsuccess', 'Added Sucessfully '); redirect('/xyz, 'refresh'); }else{ $this->session->set_flashdata('xyzerror', 'Added error'); redirect('/xyz', 'refresh'); } in view file:  if($this->session->flashdata('xyzsuccess')){echo "<div class='alert alert-success'><strong>Success!</strong> ".$this->session->flashdata('xyzsuccess')."</div>";}elseif($this->session->flashdata('xyzerror')){echo "<div class='alert alert-dan
Read more

What is required for it startup company ?

-
 Starting an IT startup company requires several key components to be successful. Here are some of the key things that you will need: A Unique Idea: A successful IT startup company begins with a unique idea that solves a problem or provides a service that is not currently being addressed in the market. Your idea should be innovative and have the potential to disrupt the industry. Skilled Team Members: Your team members are the backbone of your startup. You will need skilled and dedicated individuals with a wide range of talents to help you bring your idea to fruition. Look for team members with experience and expertise in areas such as software development, marketing, finance, and customer service. Adequate Funding: You will need adequate funding to get your IT startup off the ground. This can come from a variety of sources, including venture capital firms, angel investors, crowdfunding, or personal savings. It is important to have a well-structured business plan and financial projecti
Read more

how to export html data to pdf in angularjs and javascript

-
HTML : <button onclick="pdfdownload()" class="btn btn-success"><i class="fa fa-download" ></i> Download PDf</button> <div class="table-responsive" id="exportthis"> this is demo text </div> Javascript: <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script type="text/javascript"> function pdfdownload () { html2canvas(document.getElementById('exportthis'), {             onrendered: function (canvas) {                 var data = canvas.toDataURL();                 var docDefinition = {                     content: [{                         image: data,                         width: 500,                     }]                 };                 pdfMake.createPdf
Read more