PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture13 : CSS

What is HTML CSS
CSS was introduced with HTML 4, to provide a better way to style HTML elements.
The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples.
Type of HTML CSS
There are 3 way to define CSS with HTML 4 :
  • Inline CSS - using the style "attribute" in HTML elements.
  • Internal CSS - using the <style> "element" in the <head> section.
  • External CSS - using an external CSS "file".
What is Inline CSS

Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS.
To use inline CSS, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph :

<p style="color : blue;margin-left : 20px;">This is a paragraph.</p>
How to use Inline CSS
To use inline CSS, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph :

<p style="color : blue;margin-left : 20px;">This is a paragraph.</p>
How to implement Inline CSS
Example : For Background Color
  • The background-color property defines the background color for an element :
<!DOCTYPE html>
<html>
<bodystyle="background-color: red;">
<h2 style="background-color: gray;">Heading Section</h2>
<p style="background-color: pink;"> Paragraph Section</p>
</body>
</html>


Example : For Font, Color and Size
  • The font-family, color, and font-size properties defines the font, color, and size of the text in an element :
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family: verdana;">Heading Section</h1>
<p style="font-family: arial;color: red;font-size: 20px;"> Paragraph Section</p>
</body>
</html>


Example : For Text Alignment
  • The text-align property specifies the horizontal alignment of text in an element :
<!DOCTYPE html>
<html>
<body">
<h1 style="text-align: center;">Heading Section with Center-aligned</h1>
<p> Paragraph Section</p>
</body>
</html>


Output:

Heading Section

Paragraph Section

Heading Section

Paragraph Section

Heading Section with Center-aligned

Paragraph Section

What is Internal CSS
  • When using internal CSS, you must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage.
  • Place your CSS Code between <style>and </style>
  • Be sure you know the correct format(syntax) of CSS code.
How to use Internal CSS
Internal CSS can be used as:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
How to implement Internal CSS
Example shows how to implement Internal CSS:
Example :
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

What is External CSS
  • When using CSS it is preferable to keep the CSS separate file from your HTML.
  • Placing CSS in a separate file in our project.
  • External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
  • This CSS file is then referenced in your HTML using the <link> instead of <style>.
How to use External CSS

External CSS Can be used as:
<head>
<link rel="stylesheet" type="text/css" href="styleName.css">
</head>
How to implement External CSS

Example shows how to implement external CSS:
Example :
<head>
<link rel="stylesheet" type="text/css" href="styleName.css">
</head>

   
All Rights Reserved with Project code