HTML and CSS Basic courses (10) style with class and ID for div

This class is mainly to review the contents of the previous lesson, will use Div to create a few circles, let class and ID to set their style.

The attributes involved:

Display:inline-block

border-radius:100%;

margin-left:5px

will be speaking in the course of the following

Stylesheet.css

/*add your CSS below!*/  
      
div {  
    display:inline-block;  
    margin-left:5px;  
    height:100px;    
    width:100px;  
    border-radius:100%;  
    border:2px solid black;  
Friend {  
    border:2px dashed #008000;  
}  
. Family {  
    border:2px dashed #0000FF;  
}  
. Enemy {  
    border:2px dashed #FF0000;  
}  
#best_friend {  
    border:4px solid #00C957;  
}  
#archnemesis {  
    border:4px solid #CC0000;  
}

Index.html

<! DOCTYPE html>  
 
More Wonderful content: http://www.bianceng.cn/web/Html/
 
Effect Chart:
 
 
As you can see from the effect, class friend and ID Best_friend, as well as enemy and archnemesis, are both referenced by a Div, and the result is best_friend, which shows that the ID has a higher priority than class.