1800 419 9397
Job Oriented Training
Tutorials On How To Implement CSS
Getting An Idea About Understanding Style Sheets
The first and foremost thing one needs to understand is that a single style certainly would not transform a web page into work of art. It may make the paragraphs red but certainly for properly infusing a website with great design, there are various styles which need to be adapted. A style sheet can be of two types- internal or external which depends on the style information which is located in the web page itself or a separate file which is linked to the web page.
Internal Or External—How To Choose
In most cases, an internal style sheet is certainly a collection of styles which is part of the web page’s code. It will always appear right between opening and closing HTML <style> tags right in the page’s <head> portion. Always remember that <style> tag is HTML, not CSS. Its work is to tell the web browser the information which is contained within the tags which is the CSS code and certainly not HTML. HTML5 will simply require<style> for opening tag of an internal style sheet.
Here is the example:
<style>
h1 {
color: #FF7643;
font-family: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>
</head>
<body>
<!-- The rest of your page follows... -->
External Style Sheets
An external style sheet is nothing apart from a text file which will contain all the CSS rules. It will never have any HTML code so there is no need for including the <style> tag. Right in the end, the file name will end with the extension .css. Most of the time, external style sheets are way for going as they make creating web pages easier and updating the websites faster. An external style sheet will collect all the style information in a single line of code. One can also attach same external style sheet right to every page in the website giving a unified design. It will also give a complete site makeover as easy as editing a single text file.
How To Link A Style Sheet With The Use Of HTML
HTML5 will require less code so it is recommended to use HTML5. Different doctypes will require two attributes:
- rel= “ stylesheet” will indicate the type of link in this case a proper link to the style sheet.
- href points right to the location of the external CSS file right on the site. The value of the property is the URL and they will vary depending on where one keep the CSS file. It will work same like the src attribute one can use when there are adding images right to the page or href attribute of a link which will point to another page.
How To Create An Internal Style Sheet:
<head>
<style>
h1 {
color: #666666;
font-size: 3em;
margin: 0;
}
</style>
</head>
How To Create An External Style Sheet
Since it will group all the styles right to the top of the page, an internal style sheet will make it lot easier and accordingly maintain rather than online style.
body {
width: 80%;
padding: 20px;
margin: 0 auto;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #E1EDEB;
}
This rule will apply right to the body tag- the tag which will hold all the content visible right in the web browser window. This style will create a box right for the page content which is 80 percent as compared to the width of the browser window and certainly will little space right inside the moves text right from the edge of the box to the centers of the box on the page. Finally, the box will get a light blue background color along with the transparent black drop shadow.
Selectors: Helping To Identify What To Style
Every CSS style usually has two basic parts: a selector as well as a declaration block. The declaration block will carry formatting properties- text color, front size and so on- but these are just pretty stuff. The magic of CSS usually lies in the selector. By telling CSS what one want to format, the selector will give full control of the appearance of the page.
Tag Selectors: Page-Wide Styling
Tag selectors are also called type or element selectors and they are certainly very efficient styling tools as they are applied to the occurrence of the HTML tag right on the web page. One can make sweeping design changes to the page with very less effort. For example, when one will format every paragraph of text right on the page with the use of same front, size, color, one may merely create with a style with the use of p or ( in the <p> tag) as the selector. In short, a tag selector will redefine how a browser will display a particular tag.
In the CSS rule, tag selectors are easy to spot as they bear exact same name right as the tag which they style- p, h1, table, img and so on. Tags selectors will have their downsides, however. Now take the example that you want some paragraphs to look different from other paragraphs. A simple tag selector will certainly would not do it since they do not provide enough information for web browser for indentifying the difference right between <p> tags which one wants to highlight in purple, bold and large type from the <p> tags which you want in simple normal black text. With CSS, there are several ways for solving this problem with the most important being class selector.
Class Selectors: Pinpoint Control
When one want to give one or more elements then let’s have a look that is different from related tags on the page- for example, one or two images on a particular page with red border then it will leave majority of other images unstyled- then the right option will be to use a class selector. A class selector can be created by giving it a name and then applying it right to the HTML tags which one wish to format. Take example, one can create a class style named .copyright and one can apply it to the paragraph which will contain the copyright information without any affect from other paragraph. One will probably notice that these class selector’s names are usually .copyright and .special. There are few rules while naming a class:
- All class selector names must start with a period. That is how web browsers will spot a class selector in the style sheet.
- CSS will permit only numbers, letters, hyphens and underscores in the names of class.
- Right after the period, the name must start with a letter. For example, .9lives is not a valid class name but .crazy8 is. One can have classes named .copy-right and .banner_image but certainly not.-bad or._ as_bad.
- In most cases, class names are case sensitive. For example, CSS considers .SIDEBAR.
- .sidebar has two different classes.
Apart from the name, one can create class styles very like tag styles. Right after the class name, simply slap right on declaration block which will contain all the styling which one will desire:
.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}
Say you create a class .special that you’ll use to highlight particular page elements. To add this style to a paragraph, add a class attribute to the <p> tag, like so:
<p class="special">
ID Selectors: Specific Page Elements
CSS usually reserves the right to ID selector for identifying a unique part of a page like a banner, navigation bar or identifying in the main content area. Very like a class selector, one can create an ID by giving it a name in the CSS and then applying it by adding the ID to the page’s HTML code. So the difference is ID selectors will have some specific uses in JavaScript-based on the lengthy web pages. Otherwise there are compelling reasons to use IDs over the classes are few.
The example will provide background color and width and height for the element:
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
For applying IDS in HTML is very similar to applying classes but also to use a different attribute named logically enough, id. For example, apply the style above to a <div> tag and one would write this in the HTML:
<div id="banner">
Styling Groups Of Tags
Sometimes, one will need a quick way for applying the same format to different elements. For example, the header on the page will share the same color and font. Creating a separate style for each header h1, h2, h3, h4 and so on is too much work now if you want to change the color of all the headers then there are six different styles to update. The better approach is to select a group selector then apply a style for multiple selectors at the same time.
How to construct group selectors
To effectively work with selectors as a group, one need to simply create the list of selectors which are separated by commas. For styling all the heading tags with same color, just create the following rule:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
The Universal Selector (Asterisk)
Just think of a group selector as shorthand for applying the same style properties for several page elements. CSS also provides a sort of group selector or known as- the universal selector. An asterisk (*) is universal selector used shorthand for selecting single tag. Like for example, one would want all the tags right on the page for appearing in bold type. The group selector will look something like:
a, p, img, h1, h2, h3, h4, h5 …yadda yadda… { font-weight: bold; }
But with asterisk, it is much shorter way to tell the CSS for selecting the HTML tags right on the page:
* { font-weight: bold; }
Also Read,
