Css Introduction
Css stands for Cascading Style Sheet.Is a language used in styling webpage. It describe how HTML elements are to be displayed in the browser
Below is the pseudo classes syntax:
css selector{
css property : value ;
}
Below are example of how css is been used to style Html elements.
body {
background-color : blue ;
}
h1 {
Color : aqua ;
}
p {
color : red ;
}
In the above css code the body element is given the background-color of blue.And the h1 element is given the color of aqua then the p element color of red.
Css Selectors
Css Selectors Are css selector that allows you to select Html elements you want to style. The css selectors are divided into different categories.Which are as follows:
- Universal selectors-The universal selector allows you select all the Html element in the webpage.
- Element selectors-The element selector allows you to select the Html element you want to style.
- Id selectors-In id selectors you select the value of the id attribute of a Html element you want to style.
- Class selectors-In class selectors you select the value of the class attribute of a Html element you want to style.
- Attribute selectors-The attribute selectors allows you to select Html element with specified attribute like target attribute,name attribute,value attribute,e.t.c.
Universal selectors
Universal selectors
In id selectors you select the value of the id attribute of a Html element you want to style.
It is been represented as "*".
Below is the example of how to use universal selector in css.
universal selector syntax:
*{
css property : value ;
}
Element selectors
Element selectors
The element selector allows you to select the Html element you want to style.
It is been represented as "Name of element".
Below is the example of how to use element selector in css.
element selector syntax:
name of element{
css property : value ;
}
Id selectors
Id selectors
In id selectors you select the value of the id attribute of a Html element you want to style.
It is been represented as "#".
Below is the example of how to use id selector in css.
id selector syntax:
#css selector{
css property : value ;
}
Class selectors
Class selectors
In class selectors you select the value of the class attribute of a Html element you want to style.
It is been represented as ".".
Below is the example of how to use class selector in css.
class selector syntax:
.css selector{
css property : value ;
}
Attribute selectors
Attribute selectors
The attribute selectors allows you to select Html element with specified attribute like target attribute,name attribute,value attribute,e.t.c.
It is been represented as "element[name of attribute]".
Below is the example of how to use attribute selector in css.
attribute selector syntax:
element[name of attribute]{
css property : value ;
}
Pseudo Classes
Pseudo Classes Are classes added to css selectors that change the state or style Html element.This classes include:
- hover: it change the state of element when mause cursor is over the element.
- active: it change the state of element when element is been clicked
- after: The CSS ::after pseudo-element inserts some content after the content of the specified element.
- before: he CSS ::before pseudo-element inserts some content before the content of the specified element.
NOTE: For ::before and ::after pseudo element to function you need to add the css content property.
::before & ::after syntax
css selector::after/::before {
content : "value" ;
}
Below is the pseudo classes syntax:
css selector:pseudo class {
css property : value ;
}
Css:hover pseudo class
it change the state of element when mause cursor is over the element.
Example
h1{
color : red ;
}
h1:hover{
color : yellow ;
}
In this code above the h1 element is given a color of red but we applied hover that change it state from red color to yellow color.
Result
Header
Css:active pseudo class
it change the state of element when mause cursor is clicked over the element.
Example
h1{
color : red ;
}
h1:active{
color : yellow ;
}
In this code above the h1 element is given a color of red then we applied active pseudo element that change it state from red color to yellow color when you click the element.
Result
Header
Css Box Model
Box Model a container that contains multiple properties including borders, margin, padding, and the content itsel. It is used to create the design and layout of web pages.
Below are properties of box model
- Content:-The content of the box, where text and images appear
- Border:- Clears an area around the content. The padding is transparent
- Padding:-A border that goes around the padding and content
- Margin:-Clears an area outside the border. The margin is transparent
Example
div{
background-color : gray ;
width : 300px ;
margin : 20px ;
padding : 20px ;
border : 10px solid green ;
}
Result
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quasi sapiente aliquam inventore. Laborum sint similique repudiandae officiis, maxime quaerat reiciendis, illum ullam error nostrum eaque labore cupiditate expedita dolorem.
In the result above the outside space around the div container is the margin property which is set to 20px, then the inside space around the div container is the padding property set to 20px, and the green line that covers the div container is the border property which is set to 10px solid green,and the writting inside the div container is the content.
Css Units of measures
Units Of Measures The css units are used to give length to Html elements. Many css properties can take units such as width,margin,paddind,height etc.
Length is a number followed by a length unit, such as 10px, 2em, 2rem, etc.
- px:-Pixels, or px , are one of the most common length units in CSS. In CSS, 1 pixel is formally defined as 1/96 of an inch.
- em:-defines the size of an element relative to its parent's font size.
- rem:-In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element.
- %:-The percentage ( % ) unit scales an element relative to the size of the element's parent.
Example
div{
background-color : red ;
width : 30px ;
height : 30px ;
}
h1{
color : blue ;
font-size : 3em ;
}
Result
Header
Css Colors
Css Color are specified using predefined color names, or RGB, HEX,values.
In CSS, a color can be specified by using a predefined color name:
Red
Blue
Green
Yellow
Indigo
RGB value
An RGB color value represents RED, GREEN, and BLUE light sources.
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
rgb(255, 0, 0)=Red
rgb(0, 0, 255)=Blue
rgb(60, 179, 113)=Green
rgb(255, 255, 0)=Yellow
rgb(86, 5, 145)=Indigo
HEX value
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
#ff0000=Red
#0000ff=Blue
#3cb371=Green
#ee82ee=Yellow
#4B0082=Indigo