CSS: Cascading Style Sheet
Introduction:
Cascading Style Sheet 3: version.
Resealed in 1996 and maintained by W3C.
Used to change or alter the appearance (look & feel) of html
elements(makeover).
CSS only provides only styles but not tags.
Style is a group of properties or is a rule.
Width=val height=val <- html attributes
Width:val; height:val; <- CSS properties.
Scopes Of CSS:
How many ways to define CSS ? :
We can define styles in 3 places (scopes), those are:
Inline CSS
Internal CSS
External CSS
Inline CSS(1st Approach:)
Html Tags and CSS properties are both both defined within the same line.
Syntax:
<tag style=” property1:value; property2:value;….”>
</tag>
Note: Unique style or personal styles.
Note:
The tags that are visible to your eyes you can apply the CSS.
CSS is applied on the Elements not on the Tags.
Element: Output but Tags: sourcecode.
For Inline-elements some of the CSS properties(like width, height,) may
not work as the size depends upon the element length.
1. background-color: used to change the background-color.
2. Color: used to change the text color of the elements.
3. border-radius: used to make the element container border round.
4. border: used to add border .
5. outline: used to set the outline.
6. font-size: used to set the font size.
7. Border: used to set Border
Border-top:
Border-bottom:
Border-left:
Border-right:
8.
9. Border-radius: used to set border radius , you can change the shape of
the element(like images) by changing the value and size(height &
width).
Border-top-radius:
Border-bottom-radius:
Border-left-radius:
Border-right-radius:
[Link] :
Font-family: ‘font style’.
If the first font family is supported by the browser, then the
browser display that font style, but if not supported then you can
add another option to get displayed .
Font-size: parameters(em/px/rem(dependency)):
rem(dependency):responsive size according to the parent
tag(<body>).
Font-weight: Used to apply bold format and also used to remove It.
Font-weight: bold /normal;
Font-style: Used to apply appearance as italic or normal.
Used to apply italic format and also used to remove it.
Font-style=italic /normal.
[Link]-decoration: Used to change the pre defined styles of the elements.
Ex:- Mostly Used for removing the underline/overline/line-
through, in the <anchor> tag.
12. Underline: Used to add underline, you can change the style of
Underline.
Like:- Syntax: text-decoration:dotted underline/double
underline/wave underline/
[Link]: Used to change the cursor style while moving over element.
cursor : pointer/zoom-in/help/
[Link]: Used to change the image filter propertirs like,
blur/contrast/saturation.
[Link]:(Pseudo Element): Used to apply any element after/before any
element.
Can Be applied on the element that are inside Opening tag and Closing
Tag.<tag></tag>.
16.
17.
Internal CSS(2nd Approach):
Html tags and CSS styles are designed in the same program, but not in same
line.
Internal CSS can be placed in the <style> tag. <style> tag should be sub tag of
the <head> tag. (but we can also write it anywhere in the program.)
Syntax:
<style>
<tag >{
Property:value;
Property:value;
….
}
Note:
personal style but repeatedly applied.
External CSS(3rd Approach):
CSS code is defined in separate file and should be saved with
extension(“[Link]”).
HTMl code is written and saved in different html file, and CSS properties
are written in another separate file and saved as CSS file.
Use <link> tag for mapping css file to html file.
Syntax:
<link rel=”stylesheet” href=”[Link]”/>
Link relation:
Note:
After completion of the css page ..save this file with a name with “.css”
extension in the same location as the original HTML file.
If all 3 – types of CSS are applied on the same html code, then the
External CSS act first and Inline CSS acts at last, keeping the changes as
in Inline type.
The CSS applying and execution order can be decided after watching the
order in the Source code.
Selectors:
Selector Is a block (group of properties) .
{
block
}
Selector is style rules.
Selectors are used to Override the styles for Elements.
Selectors are used to define for the Elements.
Selectors should be defined within Internal or External type.
SYNTAX:
Selector
{
Property:value;
Property:value;
…..
}
Types:
1. Universal:( * ):
Used todefine/ apply the common styles for all elements.
*{
background-color:pink;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS
</title>
<link rel="stylesheet" href="[Link]">
<style>
*{
background-color:pink;
}
</style>
</head>
<body>
<div>
<h3>My Selector CSS program</h3>
</div>
</body>
</html>
2. Tag: (word):
Used to define/to apply common styles for all elements of a specific tag.
tag{
background-color:pink;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS
</title>
<style>
h3{
background-color:blue;
}
input{
width="200px";
height="30px";
border=2px solid blue;
}
</style>
</head>
<body>
<div>
<h3>My 1st Selector CSS program</h3>
<h3>My 2nd Selector CSS program</h3>
<h3>My 3rd Selector CSS program</h3>
<label>Name</label>
<input type="text" >
<br>
<input type="password">
<br>
<input type="date">
</div>
</body>
</html>
3. Id:( # ):
Same as the inline CSS and used as the alternate of Inline CSS, but more
efficiently.
Also used to apply the CSS properties foe a particular element.
Invalid format:
Two elements with the same Id can cause trouble , as the system can not
decide which one is to apply CSS properties.
Assigning two id to one element is also a wrong representation.
Mapping: (matching).
Using attribute (id) we can map to element.
<Tag Id attribute=”id selector”>
#id {
background-color:black;
}
4. Class: ( . ):
Total element is divided in to groups and CSS properties are applied to
each group separately.
Mapping:
Using “class attributes” we can map to elements to class selectors.
.classname {
Property:value;
}
Two elements with the same class can be possible .
Assigning two class to one element is also a valid representation.
You can apply two classes styles on one tag also.
The first used in the <style> tag , class is applied first for the styles.
Order of designing depends on the order of application of [Link]
requirement pf mapping Order.
Summary:
N Elements => All these N numbers of element should follow the same
style => So apply (Universal Selector).
Specific Number Of tags will follow the same style => So follow
(Tag Selector).
Multiple same types of tags will follow the different styles => apply
(ID selector).
All elements are divided in to number of groups, Every group they have
their own style => Use (Class selector).
*Special Selectors:
*Child Selector: (descended selector):
Used to define / to apply common style for child position elements, grand
child position element , great grand child position element so on.
(parent tag) (child tag)
{
Property:value;
}
This tag representation suggest that the child tag belongs to that parent
tag .
*Attribute Selectors:
Attribute selector is used to apply/define common styles for elements
based on attribute specification.
Syntax:
1-
[attribute]
{
Property:value;
}
2-
tag[attribute]
{
Property:value;
}
3-
[attribute name=value]
{
Property:value;
}
*Group Selectors(group of selectors):
Used to define/apply common style for other selectors.
The main advantage is, it is used to reduce the code redundancy.
Syntax:
Group Of tag Selectors:
Tag1,tag2,tag3,…..tag’n’
{
Property:value;
}
Group Of ID Selectors:
id1,id2,id3,…..id’n’
{
Property:value;
}
Group Of Class Selectors:
.c1,.c2,.c3
{
Property:value;
Group Of Attribute Selectors:
-> (any element having either one of these attributes are css applied ).
[width] [height]
{
Property:value;
Group Of “combination” of Selectors:
tag,#id,.class
{
Property:value;
}
*:Pseudo Selectors:
[Link] Classes: ( : )
Pseudo classes are predefined selectors.
The selectors are applied on elements while the situation met or or an
operation performed/triggered by the user.
Symbol:-“:”
Syntax:
:p-class
{
Property:value;
}
The browser applying the properties blindly to the whole page, to 90-99%
of the [Link] the application depends upon the situation.
Combinator:
*/tag/id/child/dichild/
Pseudo Class Lists:
1. Focus: Required to apply changes when cursor coming to the element.
2. Blur: Required to apply changes when cursor coming out of the
element.
3. Link:
4. Active: Shows that which anchor tags that are currently active.
5. Visited: Shows that which anchor tags that are already visited.
6. Hover: Applies the property when over the element(link).
7. Is: Used to apply the properties on the elements that are,
8. Not:
9. First child: Apply the properties on the first child element.
[Link] child: Apply the properties on the Last child element.
[Link] Child: Apply the properties on the n-th child element. Also comes
with (odd) and (even) order child.
You can do mathematical operations on “n” for the finding of position of
element. Ex:-(3n+4).
NOTE: Certain order is required when applying all the pseudo elements .This
order is called
[Link] Elements: ( : : )->
=> The Pseudo Selector for apply the properties to some part of the
page.
=> Syntax:
Combinator :: pseudo-element
{
Property:value;
}
List:
Before(::)-
Used to apply any extra element before some elements.
After(::)-
Used to apply any extra element after some elements.
Marker(::)-Used to set the properties for only (lists/summary).To change
the properties of the numbers.
Placeholder(::)
Used to apply properties on elements that are input elements to
change the placeholder.
First-letter(::)-Used to set the properties for the first letter of any
element.
First-line(::)-Used to set the properties for the first line of any element.
Selection(::)-Used to apply the properties when the elements are get
selected in the web page.
Margin and Padding:
Padding:
Used to add space inside the parent element.
Margin:
Used to add different size of separations/gaps to the elements.
There are two types of margin:
1. Absolute(Measurement):
Used to display the element at a particular area.
2. Relative(Measurement):
Used to apply
*New pseudo class Selectors:
:root- Is a pseudo class ,that introduced un CSS [Link] to declare CSS
variable.
Syntax: declare variable
Variable syn:
--varname:value;
Syntrax: use/call variable
Property:var(--varname)
:column/column :
BOX Model in CSS:
Order : content>padding>border>margin.