#4 CSS Box Model, Selector, Absolute/Relative Position

CSS Box Model

• Frame & tag design: <div style="padding:10px;width:300px;border:1px dashed blue;margin-top:5px;margin-bottom:5px"
  • “dashed” can be changed into “solid” for designing solid lines.
    

Selector

p {
    color:green
}

• Selector: apply to

  • any element of a specific type, e.g. font size <h1>.
  • From the picture above, the selector is “p.”

• Property

  • Properties change the elements of your HTML.
  • From the picture above, the property is “color.”

• More examples of selectors

<style type="text/css">
.title{.............}
.content{............}
.keyword{.............}
</style>

Meanwhile, we have to insert <class=”title/content/keyword”> into the division where we need the selector. This is my selector:

• With selector: give different styles, content, keywords a responding selector, so that we can change the same design at every division all at once.
• Without selector: we have to change the design one by one at each division.

CSS Position

• Absolute Position
  • often used by designing a notification area.

.box{
	position:absolute;right:0px;top:0px;
	width:100px;height:100px;background-color:green
}

• Relative Position

  • The box will be positioned basing on where we input the <div class="box"></div>.
    

  • Another example of a relative position in a sentence.
    

Final Web Design

Music of Today: Leave the Door Open by Bruno Mars, Anderson .Paak, Silk Sonic

Like/Share/Follow

If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.
Feel free to comment and share your ideas below to learn together!