Q. CSS
CSS stands for Cascading Style Sheets
CSS is a language that describes the style of an HTML document
CSS describes how HTML elements should be displayed.
Q. Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page
The style definitions are normally saved in external .css files.
Q. CSS Syntax
The selector points to the HTML element you want to style.
To group selectors, separate each selector with a comma.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon
Q. CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
The element Selector
The id Selector
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The class Selector
To select elements with a specific class, write a period (.) character, followed by the name of the class.
Descendant Selector
div p {background-color: yellow;}
selects all<p>elements inside<div>elements
Child Selector
div > p {background-color: yellow;}
selects all <p> elements that are immediate children of a <div> element:
CSS [attribute] Selector
a[target] {background-color: yellow;}
a[target="_blank"] {background-color: yellow;}
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
selects all <a> elements with a "target" attribute
eg.
<a href="http://www.disney.com" target="_blank">disney.com</a>
Q. CSS At-rule
An at-rule is a CSS statement beginning with an at sign, '@'
They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents.
Q.CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
Syntax
selector:pseudo-class {property:value;}
eg.
a:hover {color: hotpink;}