Css basic Properties ✍🏻
Css Selectors -
1. The Css id selector:-
- The id selector uses the id attribute of an HTML element to select a specific element.
- The id of an element is unique with in a page, so the id selector is used to select one unique element.
- To select an Element with a specify id, write a hash(#) character , followed by the id of the elements.
Output is:-
2. The Css class Selector:-
- The Class Selector selects HTML elements with a specific class attribute.
- To select an element with a specify class, write a period(.) character , followed by the class name.
Output is:-
The Difference between Id and Class:-
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.
ID's are unique:-
- Each element can have only one I'd.
- Each page can have only one element with that Id.
Classes are Not unique:-
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
CSS Rules Overriding:-
We have discussed Three ways to include style sheet rules in a HTML document. Here is the rule to override any Style Sheet rule.
- Any inline style sheet takes highest priority. So, it will override any rule defined in <style>....</style> tags or rules defined inany external style sheet file.
- Any rule defined in<style>....</style> tags will override rules defined in any external style sheet file.
- Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not.
CSS Properties:-
- Display
- Margin and padding
- Color
- Width and height
- Background
- Border
- Float
- Font
- Box-shadow
- Text-shadow
- Border-radius
- Hover effects
- Opacity
- Overflow
1.Text property:-
- Color
- Font-family
- Font-size
- Text-align
- Text-decoration
- Text-transform
- Line-height
- Font-style
- Letter-spacing
- Word-spacing
- Text-shadow
2. Background property:-
- Background-color
- Background-image
- Background-size
- Background-repeat
- Background-position
3. Box-modal property:-
- Width
- Height
- Margin
- Padding
- Border
- Border-radius
4. Layout property:-
- Display
- Position
- Float
5. Other common property:-
- Opacity
- Box-shadow
- Transition
- Overflow
# CSS Text Property:-
CSS Colors - RGB Value
This color value is specified using the RGB() property. This property takes three values, one each for red, green, and blue.This value can be an integer between 0 and 255 or a percentage.
- In Css, a color can be specified as an RGB value, using this formula:
- rgb(red,green,blue).
- Each parameter (red,green,blue) defines the intensity of the color between 0 and 255.
- For example,rgb(255,0,0) is displayed as red , because red is set to its highest value(255) and the other are set to 0.
- To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
- To display the color white, all the parameters must be set to 255,like this: rgb(255,255,255).
- Experiment by mixing the RGB value below:-
Coding :-
<html>
<head>
<style type="text/css">
.king
{
background-color:skyblue;
color:rgb(255,0,0);
}
.bob
{
background-color:yellow;
color:rgb(0,0,0);
}
.tim
{
background-color:green;
color:rgb(255,255,255);
}
</style>
<title></title>
</head>
<body>
<h1 class="king">Welcome to everyone.
</h1>
<p class="bob">Honesty is the best policy.
</p>
<h2 class="tim">Education is best.
</h2>
</body>
</html>
Output is:-
- RGBA color values are an extension of RGB color values with an Alpha channel which specifies the opacity for a color.
- An RGBA color value is specified with:
- rgba(red,green,blue,alpha).
- The alpha parameter is a number between 0.0 (fully transparent )1.0 (not transparent at all).
Coding is :-
Output is:-
Comments
Post a Comment