Now we all know how to set up a general web page using HTML.We have covered that areas in previous post introduction to HTML.Now its time to add some styles.
Basically CSS is a way of adding style to specify rules about how you want to apply styles one over the other to your paragraphs ,headings ,texts , images etc in web pages.CSS and HTML work hand in hand.
CSS helps us to separate the style from content.There are mainly 2 ways of adding style to your website .Once is by specifying the property and value inside the style tag and other by using a CSS file. Categorizing we say the types as inline, embedded or internal and external CSS.
So in case of inline CSS you insert a style sheet (here using the style attribute)and within that you can apply styling.Format is as given below.
<h1 style="color :green; background-color; white; " > ...... </h1>
The embedded or inline CSS are defined inside the <style> element inside the head section of HTML document.
<head> <style> h1{
color: green ;
background-color ; white ;
} </style></head>
Using the external CSS method you can put the styling rules in file with .css extension .And then it is attached to your HTML document using the <link> element as given below.
The basic syntax of styling an element of the html document , is as follows.You find specify the element that you what to style,Then you create curly brackets next to the element and then mention your property and values as key-value pairs.
h1 { /* selector - This is a comment */
color: green ; /* property : value */
background-color ; white ;
}
This declaration block thus contains more than one styling to the heading itself ,which implies you can apply any number of styling to a single element ,separated by semicolons.So ,the styling is all provided as above for each elements and it is save with .css extention.Now you link this using code below.
<link rel="stylesheet" href="style.css" >
Ids and classes help you more to style mutltiple elements. For styling a element with is id ,you provide a #idname and for classes you just you .classname .As mentioned below,
Let top be an id and section be a class then ,for styling all elements with this id and class.
#top { .section {
property : value ; property : value ;
} }
is used.Remember than an id or class name must never start with a number.
Now if you want to select a class which is inside another id or class(descendant selectors) then this is the way to specify it :-
#top .section p{
property : value;
}
A child element in the page takes all properties of its parents element in the document .This is inheritance.
Next we will be dealing with some text CSS elements and make you capable for styling your web pages .
Keep Reading !!
0 Comments