CSS Building Blocks

A style sheet is a text file that contains one or more rules that determine, through property and value, how certain elements in your web page would be displayed. CSS can be created outside of a web page and can be applied to all the pages of a web site at once. A style sheet has following constructs -

  • Style sheet
  • Rule
  • Selector
  • Declaration
  • Property
  • Value

Curly braces, Colons, and Semi-colons are used to mark the beginning and ending of each part, separating them from each other. The following rule shows the parts of a style sheet and the special characters that separate them. 

SELECTOR –> body { <- Declaration Block Start
                   width: 400px; <- Declaration
       PROPERTY -> color: #FFF; <- VALUE
            } <- Declaration Block End

Things to remember :-


In CSS, A style rule has two main parts – the selector and the declaration block.


In CSS, a selector is the HTML element or elements to which a CSS rule is applied


In CSS, Comments can be put between /* and */.


Example – example1.html



</html>


<header>


   <link rel="stylesheet" type="text/css" href="example1.css">


</header>


<body>


<h1>What is this ?</h1>


<img src="Picture 021.jpg" width="300" height="175"/>


<p>A lovely <em>beautiful</em>


Christmas tree.</p>


<p><small>&copy; by Ramdhari.</small></p>


</body>


</html>


exmaple1.css


p {


     color: green;


     font-family: "Trebuchet MS", "Helvetica", sans-serif;


     font-weight: bold;


}


img {


     float: right;


     margin-right: 100px;


}


Keep the html and css file in same directory and open the html in a browser and play with the property, value and check that in the browser.


The sample html and css file can be found here.

Comments

Post a Comment

Popular posts from this blog

Palindrome program in Java using BufferedReader

import java.io.*; class Test { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); System.out.print("\nEnter a String : "); String str = br.readLine(); String rev = ""; int n = str.length(); for(int i=n-1 ; i>=0 ; i--) { rev = rev + str.charAt(i); } if(str.equals(rev)) System.out.println("\nGiven string is a palindrome"); else System.out.println("\nGiven string is not a palindrome"); } } Output 1 Enter a String : ABCDDCBA Given string is a palindrome Output 2 Enter a String : abcdabcd Given string is not a palindrome
Read more
Generics Array Java does not permit the construction of generic array. Suppose, for example, that we want to design a class that has an array field public class Table<AnyType> { private AnyType[] contents = new AnyType[5]; ... } It's hard to understand, but this is illegal! A workaround is to construct an array of objects with a type-cast: public class Table<AnyType> { private AnyType[] stack = (AnyType[]) new Object[5]; ... } source - http://www.cs.cmu.edu/~adamchik/15-121/lectures/Collections/collections.html
Read more

OOPS: Decomposition and Abstraction

When we write a a program and if the the code is expected to be less than few hundred of lines then we can afford to write a monolithic program but if the number of lines increase it becomes difficult  to maintain that program or adding new features to that program.  so how to handle this ? In order to write a program for a problem , the problem should be broken into multiple smaller problems and then each smaller problem should be solved  and make sure that solving all such smaller problem solves the actual , bigger problem. the process of breaking a problem into multiple smaller problem efficiently involves Decomposition and Abstraction. Definitions Decomposition- How to decompose large programming problems into small ones is called decomposition Abstraction - Abstraction is a way to do decomposition productively by changing the level of detail to be considered. In each iteration the irrelevant information can be removed. The process of abstraction can be seen as an app...
Read more