Cascading Style Sheets (CSS) is a design language. It
simplify the presentation of web pages. CSS take care of the look and feel of a web page. CSS help control the color of the text, the style of fonts, spacing between paragraphs, background images and other effects. CSS enable presenting same content on different devices like mobiles , tabs, Web TV and desktops. CSS is combined with HTML and XHTML.
CSS Syntax
Selector: is an HTML element like <h1> for style to be applied.Property: is an attribute HTML element like width or border
Value: Values are assigned to attributes/properties. color:red etc.
Inline CSS
<p style="color:red;margin-left:10px;">This is a paragraph.</p>
Internal Style Sheet
Internal styles are defined in the <head> section of an HTML document, by using the <style> tag.
<head>
<style type="text/css">
body {background-color:brown;}
p {color:yellow;}
margin-left:10px;
</style>
</head>
External Style Sheet
An external style sheet is used to apply same style to many pages. As each page links to a common style sheet, you can change look and feel of all web pages by changing the external css.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Importing an external style sheet
<head>
@import "mystyle.css";
</head>
Universal selector
The css renders the content of every element in black.
* {
color: #000000;
}
The Descendant Selectors: style rule will apply to <em> element only when it lies inside <ul> tag.
ul em {
color: #000000;
}
The Class Selectors:
All the elements having "black" will have text in black.
.black {
color: #000000;
}
Renders the text in black for <h1> elements with class name "black"
h1.black {
color: #000000;
}
<div class="centerbold">
This content will be styled by the class centerbold.
</div>
ID Selectors:
All the elements having same id will be formatted.
Renders the content in black for every element with id "black"
#black {
color: #000000;
}
Renders only the H1 with id ="black"
h1#black {
color: #000000;
}
Multiple Styling:
define multiple styles of single element, class or id.
h1 {
color: red;
margin-bottom: 1.1em;
text-transform: lowercase;
}
Grouping Selectors:
You can apply a style to many selectors in one go.
h1, h2, h3 {
color: #EFEFEF;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
You can combine various class selectors together as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
.svg/512px-Valid-css-v_(W3C_Markup_Validation_Service).svg.png){kind=link}
No comments:
Post a Comment