CSS (Cascading Style Sheets)
CSS means cascading Style Sheets
CSS is the language we use to style an HTML Documents
Using CSS, we can display HTML elements on paper, screens, and other media.
External stylesheets are stored in the CSS file
CSS Example:-
body {background-color: lightblue;}h1 {color: white;text-align: center;}p {font-family: verdana;font-size: 20px;}
CSS Selector
CSS Selectors are use to find or select the html elements we want to style
Select element base on name, id, Class
#id - Select the element with id ="Firstname"
.class - select all the element with class= "intro"
Element.class - p.intro - select only <p> element with class ="intro"
3 ways to apply CSS
1. External CSS
In an external style sheet, we can change the look of an entire website by changing just one file.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
stylesheet is external style sheet
2. Internal CSS
An internal style sheet may be used if one single HTML page has a Unique style
in the internal style sheet, it's defined inside the <style> element, within the head section
3. inline CSS
In inline style, we can apply style for a single element
add the style attribute to the relevant element.
CSS colour
you can set the background, text, and Border for HTML elements
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
RGB value
In case colour can be specified as an RGB value
RGB(red,green,blue)
every parameter defines the intensity of the colour between 0 to 225. using parameters value we can set colours
RGB(106,90,205)
Hexa colour
A colour can be specified using a hexadecimal value in the form
#rrggbb - #ff0000
Sometime we use 3 digit hex code in the css source
#rgb - #f0c
HSL value
a colour can be displayed using hue, saturation and lightness (HSL).
HSL(hue, saturation,lightness)
Hue is a degree on the colour wheel from 0 to 360.
saturation and lightness is a percentage value, 0% to 100%
ex. HSL(0,50%,100%)
CSS background properties
background-color
background-image
background- repeat
background - attachment
background - position
Example :-
body {background-color: #ffffff;background-image: url("img_tree.png");background-repeat: no-repeat;background-position: right top;}
*CSS Border
CSS properties allow us to specify the style width, and colour of an element border.
border type -( dotted, dashed, solid, double, groove, ridge, inset, outset, none hidden)
Border-width set as a specified value: thin, medium, thick
p.one {border-style: solid;border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */}
*CSS margins
Margins are used to create space around the elements, outside of any border
setting the margin arounde elements(Top,right,bottom,and left)
margin-top:100px
*CSS padding
padding is used to genreate space around the element Content, inside if any defined border
div {padding: 25px 50px 75px 100px;}
*CSS height and width
this properties is used to to set height and width of element
div {height: 200px;width: 50%;background-color: powderblue;}
CSS Box Model
all html elements consider as boxes.
the css bo model is essentially a bo thats wraps around html element it Consists :margins, border,padding, and content.
In <div> elements have 350px width-
320px (width)+ 20px (left + right padding)+ 10px (left + right border)+ 0px (left + right margin)= 350px
CSS outline style
The outline is a line drow outside the element's border.
outline properties -
outline-style
outline-color
outline-width
outline-offset
CSS Text
Text-color -colour property is used to set the colour of the Text
*Text Alignment
The Text-align property is used to set the horizontal alignment of a Text.
Text-align - left, right, center of justified
*Text-direction - used to change the text direction of an element
*Text-transformation - property used to specify uppercase and lowercase of latter in a Text.
p.lowercase {text-transform: lowercase;}
*text-shadow - property add shadow to Text
CSS font -
font-family - select right font for Text in our website.
some font types- serif ,cursive,fantasy
.p1 {font-family: "Times New Roman", Times, serif;}
CSS Icons - Icons can be added to our HTML page using an icon library
... Next Page
* If you found this article useful, share it.*
MS SQL Server interview questions for developers ~ SoftCodeLearner
Join telegram group - https://t.me/softwareCodeLearner
No comments:
Post a Comment