-
Notifications
You must be signed in to change notification settings - Fork 5
CSS Guidelines
What is CSS? CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how elements must be rendered on screen, on paper, or in other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
Where can I learn more about CSS? Here is a link for the tutorial. You can find all the required information on this tutorial page. Also for beginners here is a link to the youtube channel where there are various tutorial videos for CSS.
How can I use CSS to create a separate hover style? The :hover selector is used to select elements when you mouse over them.The :hover selector can be used on all elements, not only on links. When you move your mouse over an element we can make that element change its color , background color, font and font size. Following is the example for hover style.
<!DOCTYPE html>
<html>
<head>
<style>
a.hover:hover {color:#ffcc00;}
</style>
<body>
<p><b><a class="hover" >This link changes color</a></b></p>
</body>
</html>
If we want to display a small box over besides an element when we hover over it then we could use the following code.
<html>
<head>
<meta charset=utf-8 />
<style>
a.info{
position:relative; /*this is the key*/
color:#000;
top:100px;
left:50px;
text-decoration:none;
text-align:center;
}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:-60px;
width:15em;
border:5px solid #0cf;
background-color:#cff; color:#000;
text-align: center;
padding:10px;
}
a.info:hover span:after{ /*the span will display just on :hover state*/
content:'';
position:absolute;
bottom:-11px;
width:10px;
height:10px;
border-bottom:5px solid #0cf;
border-right:5px solid #0cf;
background:#cff;
left:50%;
margin-left:-5px;
}
</style>
</head>
<body>
<a href="#" class="info">Hover over this <span>ELEMENT</span></a>
</body>
</html>
This code will display popup a small box besides the element when we hover over it.
How can I use JQuery to programmatically add or remove a style? jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically.
Following is a small example for add and remove class. In this example we create a small class which highlights a line with green color. There are two buttons at the end. One button adds the highlight class while the other button removes the highlight class.
<html>
<head>
<style type="text/css">
.highlight {
background:green;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<p id="line">This is paragraph 1</p>
<button id="addClass">Add highlight</button>
<button id="removeClass">Remove highlight</button>
<script type="text/javascript">
$("#addClass").click(function () {
$('#line').addClass('highlight');
});
$("#removeClass").click(function () {
$('#line').removeClass('highlight');
});
</script>
</body>
</html>
Here $('#line').addClass('highlight') adds the class highlight while $('#line').removeClass('highlight') removes that class.
What's the advantages of using class selectors to style elements instead of using id selectors? The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. Each element can have only one ID and each page can have only one element with that ID. Whereas you can use the same class on multiple elements and use multiple classes on the same element. Suppose we have to create multiple boxes on a page with specific height and width. We could just use the class and create a style for it and use this class to create elements on our page. This way we can have same style for multiple elements.
What's the best way to use CSS to create alternating styles on alternating rows of a table? To create alternating styles on table rows the best way is to use JQuery. We could also use this on 'li' elements. We could just add this style for the table rows
tr:nth-child(odd){ background-color:#eee; }
tr:nth-child(even){ background-color:#fff; }
In the above code we are changing the color for alternate rows in the table.
In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:
li:nth-child(5n) {font-weight: bold}
This says that every 5th list item is bold. In other words, the items numbered 5, 10, 15, 20, 25, etc., will be bold.