CSS is the language we use to style an HTML document. It describes how HTML elements should be displayed. It stands for Cascading Style Sheets. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.
It can control the layout of multiple web pages all at once. External stylesheets are stored in Cascading Style Sheet files.
HTML: What to display
CSS: How to display
3 ways of adding CSS in HTML:
1. Internal
<style>
p
{
color: blue;
}
</style>
2. Inline
has the highest priority
<p style=”color: blue width: 18px>
3.External
<link rel=”stylesheet” type=”text/css” href=”style.css”> it is name of the file
3 basic types of selectors
1. Element Selector
p
{
color: red;
}
2. id Selector
index.html(html file name)
<p id=”para”>paragraph</p>
style.css(file name)
#para
{
color: yellow;
}
3. class Selector
index.html(html file name)
<h1 class=”greencl”>heading</h1>
<p class=”greencl”>paragraph</p>
style.css(file name)
.greencl
{
color: green;
}
4. Priority order
id then class then element selector
5. /* comment */
comment in cascading style sheet
Colors can be specified using
* predefined color names
* RGB
* RGBA
* HEX
* HSL
* HSLA
ColorCodes, With this link you can find all the codes of colors.
rgb (red, green, blue) ranges from 0 to 255
Black: rgb(0,0,0)
White: rgb(255,255,255)
Red: rgb(255,0,0)
Green: rgb(0,255,0)
Blue : rgb(0,0,255)
rgba (red, green, blue, alpha) – 0.0 (fully transparent) and 1.0 ( not transparent at all)
rgba(255,99,71,0.5)
HEX ranges from 0 to f
#rrggbb
Red: #ff0000
Black : #000000
White: #ffffff
HSL(hue, saturation, lightness)
Red: hsl(0, 100%, 50%)
HSLA(hue, saturation, lightness, alpha)
Backgrounds
Mentioned only one example
body {
background-color: blue;
}
- background-image: url();
- background-repeat: no-repeat;
- background-position: right-top;
- background-attachment: fixed;
- background-size: 50px 100px;
Border
- border-style: solid/dotted/dashed/double/groove/outset/inset/ridge/none;
- border-width: 5px;
- border-color: red;
- border-top-style: solid;
- border-top-width: 10px;
- border-top-color: green;
- border-radius: 50px; (for curving the border)
- height: 500px;
- width: 70%;
- max-width: 500px;
- max-height: 300px;
- min-width: 500px;
- min-height: 300px;
Padding
The gap between border and content is padding.
- padding-top: 50px;
- padding-bottom: 20px;
- padding-right: 10%;
- padding-left: 20%;
To be Continued…….
Also, read
The Forty Rules of Love Summary
You are a Badass At Making Money
The Norwegian Wood by Murakami Summary
The Da Vinci Code by Dan Brown Summary