Tips For Learning Css Lecture 1
Study CSS.
Css Definition.
Cascading Style Sheets, or CSS, are used to specify how HTML elements should appear on screens, paper, or in other media.
What are the three CSS types.
The following list of three CSS types includes: CSS inline. Embedded or internal CSS. outside CSS.
Here's what you'll learn:
Box Type.
CSS displays everything as a box. So, one of the fundamental building blocks of CSS is understanding how the CSS Box Model functions.
Here Are Coding For Box Type.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
Selectors.
You must choose an element before applying CSS to it. You can examine them in this module. CSS offers you a variety of ways to do this.
Here Are coding For Selector.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
THE CASCADE.
Sometimes an element may be subject to two or more CSS rules that conflict. Learn how the browser choose which to use in this module and how to influence this decision.
CSS Colors.
Predefined colour names or RGB, HEX, HSL, RGBA, HSLA values are used to specify colours.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
CSS Borders.
CSS border properties allow you to specify the border style, width, and colour of an element.
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.dashed {border-style: dashed;}
CSS Border Width.
The width of the four borders is specified by the border-width property.
The width can be specified as a specific size (in px, pt, cm, em, and so on) or as one of three pre-defined values: thin, medium, or thick:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
CSS Shorthand Border Property.
It is also possible to specify all of the individual border properties in one property to shorten the code.
The border property is a shorthand property for the individual border properties listed below:
border-width
border-style (required) (required)
border-color.
CSS Margins.
CSS margin properties are used to create space around elements that are not bound by any defined borders.
You have complete control over the margins with CSS. There are properties that allow you to specify the margin for each side of an element (top, right, bottom, and left).
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
.png)
Comments
Post a Comment