CSS(Cascading style sheet)
CSS is the language we use to style and align our HTML elements.
CSS was introduced in 1994 by Haykon wium lie.
First version of CSS was introduced in 1996(CSS1)
CSS2-1998
Current version of CSS is CSS3-1999
It is style sheet language which is used to describe the look and formatting of documents
written in markup language.
It is generally used with html to change the style of web pages and UI.
Commenting in CSS:-- /*-----*/
How to add CSS to HTML
[Link] style sheet :
We will use style attribute in the tagline itself
<p style : ” color: red”>Hello CSS</p>
[Link] style sheet :
We have to use <style > tag in the <head> section of HTML
documnet
Example:
<style>
p{color : value}
</style>
[Link] style sheet :
We have to create external file with .css extension and we need
to link that CSS file to HTML file using <link> tag
<link rel=”stylesheet” href=”./[Link]”/>
@import
@import rule is used to link one CSS within another CSS..
Syntax:- @import url(“cssfilepath”)
Selectors
Selectors are used to target the HTML elements
A CSS selector selects the HTML element(s) you want to style.
Syntax :
Selector{
property: value;
property: value;
}
Types of CSS Selectors
1. Simple Selector
2. Combinator Selector
3. Attribute Selector
4. Pseudo class Selector
5. Pseudo Element Selector
[Link] Selectors
I. Id selector (#)
II. Class selector (.)
III. Universal Selector (*)
IV. Element Selector (tag)
V. Grouping Selector(,)
[Link] SELECTOR (#)
Unique id attribute within the page is selected
Core attribute selector
Selected by symbol “#” followed by id name
SYNTAX: #id_name{
css properties
}
2. CLASS SELECTOR (.)
Core attribute selector ,with specific class.
The character to access in css file “ . “
Multiple class name can be called using comma
SYNTAX: . class _ name{
/* css properties*/
}
3. UNIVERSAL SELECTOR(*)
Select all elements in html page.
All the elements within a body tag.
Symbol of selector: “ * “
SYNTAX:
*{
properties
}
4. TYPE/ ELEMENT SELECTOR(tagname)
Selects particular element with specified tagname.
Call by type of tag.
SYNTAX:
element name{
properties
}
5. GROUPING SELECTOR(,)
We can group the multiple selectors and we can do styling
#heading,.para,button{
Properties
}
NOTE: PRIORITY ORDER =====
{ “ ID > CLASS > TYPE/ELEMENT >UNIVERSAL “}
Combinator Selectors
We will combine and target the elements
Types of combinator selectors
I. Descendent selector(space)
II. Child selector(>)
III. Adjacent sibling selector(+)
IV. General sibling selector(~)
[Link] SELECTOR (space)
A CSS selector can contain more than one simple selector.
Between the simple selector we can use combinator
Combines two selectors are such that elements are matched by
second selector are selected if they have ancestor.
(parent,parents’s parent, parent’s parents’s parent)
Selector utilities a descendents combinator are called
descendent selectors.
Syntax: Selector1_Selector2{property declaration}
Div p{ prop:val;}
[Link] selector(>)
The child selector selects all the elements that are the children
of a specified element
It is placed between 2 CSS selectors,matches only those
elements matched by second selector and direct child.
Syntax:
selector 1 > selector 2 { properties }
Ex:
Div>p{prop : val}
3. Adjacent sibling selector (+)
The adjacent sibling selector is used to select an element that is
directly after another specific element.
Sibling elements must have the same parent element, and
"adjacent" means "immediately following".
Syntax :
former_element + target_element {style properties }
4. General sibling selector(~)
The general sibling selector selects all elements that are next
sibling of a specified element.
The general sibling combinator (~) separates two selectors.
Syntax :
former_element ~ target_element {
style properties
}
Pseudo classes
A CSS pseudo-class is a keyword added to a selector that specify a
special state of the selected element.
For Example: It can be used to
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• Symbol for pseudo class selector is ‘:’
Selector:pseudo-class{
property:value;
}
In pseudo class selectors we have 2 types
[Link] pseudo class selectors
Link: used to style the unvisited link
Visited: used to style the visited link
Active: used to style the active link
Focus: used to style the text filed when we focus that
Hover: used to style the element when mouse hover on the
element
a:hover - style the element when mouse hover on the element
a:link - style the unvisited link
a:visited - style the unvisited link
a:active – style the active link
input:focus – style the focused text field
[Link] pseudo class selectors
• first-child
• last-child
• nth-child
The :first-child pseudo-class matches a specified element that is the
first child of another element.
The :last-child pseudo-class matches a specified element that is the
last child of another element.
The :nth-child(n) selector matches every element that is the nth child
of its parent.
We can target only even children using nth-child() by passing even or
2n in parenthesis
We can target only odd children using nth-child() by passing odd or
2n+1 in parenthesis
Selector:nth-child(even){ Selector:nth-child(even){
Property Property
} }
n can be a number, a keyword (odd or even), or a formula
(like an + b).
Pseudo Elements
A CSS pseudo-element is used to style specified parts of an element.
Symbol for pseudo element selector is ‘::’
For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element
selector::pseudo-element{
property:value;
}
:: first-line : styles the first letter of the element
:: first-letter: styles the first line of the element
::before : adds the content before the actual content
::after: adds the content after the actual content
::marker: style the list style type
::selection : style the selected content on the webpage
Attribute selector
Attribute provides extra information to the tag.
In this attribute selector we are targeting the elements based on
attributes
Targeting using attribute name
Selector[attribute]{
property}:value
}
Targeting using attribute name and value
Selector[attribute=“value”]{
Property:value
}
