Skip to main content

What is CSS?

Cascading Style Sheet (CSS),it defines the styles for HTML elements or how an HTML element to displayed.

 There are three ways to use CSS in an HTML file.
  •    Inline CSS
    • by using a style attribute with html tag
  •    Internal CSS
    • using a <style> element in the HTML <head> section
  •    External CSS
    • using one or more external CSS files


Inline CSS Example


<html>

 <body style="background-color:lightgrey">

 <h2 style="color:red">Hello</h2>

 </body>

 </html>

So here we used the style as inline for the <body> and <h1>element.Remember the syntax for inline,

style="property:Value"
If you want to give multiple property's just separate by a semicolon(;).

Internal CSS
  • Internal - using a <style> element in the HTML <head> section
<html>
<head>
<style>
body {background-color:lightgrey}                   
 **changes the background color to grey
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
If we need to identify an element uniquely use an id attribute with element.
To apply style for the corresponding id, use ‘#idname’ in style part.

<style>

body{background-color:lightgrey;}

#div1,#div2{color:red;               
     font-size:20px;
     background-color:pink;}

**applying same style for div 1 and 2 by using id(#div1 #div2)
**use a # symbol followed by id name inside the style tag
**any name you can use without starting with a number.

#div3{background-color:yellow;}   
          
**here #div3 is the id name of the third div

</style>
</head>

<body>
hello
<div id="div1"> hello its a test</div>
<div id="div2"> hello its a div test</div>
<p> hello just an example</p>

<div id="div3" > new div</div>

</body>

External CSS
  • External - using one or more external CSS files
All the css codes are keeping in an external file and save it by .css format (style.css)
Same css style can apply to multiple html pages.
Link to the required html file by following tag and attribute
<link rel=”stylesheet” href=”styles.css”>

href= “cssfilename” //general format.


Comments

Post a Comment

Popular posts from this blog

Java Tutorial Part 3 (Features of Java)

Simple: Java is designed to be easy to learn. syntax is based on C++ Object Oriented:   In Java, everything is an Object. Java can be easily extended since it is based on the Object model Platform independent:   Java code can be run on multiple platforms  Unlike many other programming languages including C and C++, when Java is compiled, it is not compiled into platform specific machine, rather into platform independent byte code. This byte code is distributed over the web and interpreted by virtual Machine (JVM) on whichever platform it is being run.   Secure:   With Java's secure feature it enables to develop virus-free, tamper-free systems.  Java program cannot harm other system thus making it secure Java provides secure way to access web applications Java provides secure means of creating internet applications Robust Java encourages error free programming by being strictly typed and performing compile time and ru...
Post a Comment
Read more

HTML Tutorial Part 1

HTML - Hyper Text Markup Language which is used to create webpages. Common HTML Terms Elements or Tag An html element or a tag is similar to a command in programming language,here it defines the content or structure in a web page. Elements have to create by using a angle brackets. Example :  <html> <head> Tags most commonly occur in pairs of opening and closing tags. (<html> </html>) See the general structure of an html program. <html> <head> <title> Sample program</title> </head> <body> Actual body contents go here </body> </html> All html elements need to keep in between <html> </html> tags. <head> specifies the heading of html web page. <title> keep inside the <head> tag, the content in between <title>  and </title> would be the title displays on title bar of your browser. The page contents lies in between <body> and...
Post a Comment
Read more

HTML Video and Audio

Before HTML5, there was no standard for showing videos on a web page. Before HTML5, videos could only be played with a plug-in (like flash). The HTML5 <video> element specifies a standard way to embed a video in a web page. To show a video in HTML, use the   <video>  element: < video   width= "320"   height= "240"   controls >     < source   src= "movie.mp4"   type= "video/mp4" >     < source   src= "movie.ogg"   type= "video/ogg" > Your browser does not support the video tag. < /video > The   controls   attribute adds video controls, like play, pause, and volume. It is a good idea to always include   width   and   height   attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </v...
Post a Comment
Read more