HTML/CSS Notes

 HTML/CSS Notes

https://www.udemy.com/share/101Wtc3@nrNru_7FItWgNYr9dsbt2PchCQu8-S9Szxzf-m98o07RxMT0dFWclmQPFJAgQney/

global setting


* {
  /* border-top: 10px solid #1098ad; */
  margin: 0;
  padding: 0;
}



responsive image



    .post-img {
  width: 100%;
  height: auto;
}



responsive container


.container {
  width: 800px;
  /* margin-left: auto;
  margin-right: auto; */
  margin: 0 auto;
}


position

    
    absolute
    relative




h2 {
  /* background-color: orange; */
  position: relative;
}

h2::before {
  content: "TOP";
  background-color: #ffe70e;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -10px;
  right: -25px;
}








body {
  color: #444;
  font-family: sans-serif;

  border-top: 10px solid #1098ad;
  position: relative;
}
    


    button {
  font-size: 22px;
  padding: 20px;
  cursor: pointer;

  position: absolute;
  /* top: 50px;
  left: 50px; */
  bottom: 50px;
  right: 50px;
}
    

Html

<button>❤️ Like</button>




link



a:link {
  color: #1098ad;
  text-decoration: none;
}

a:visited {
  /* color: #777; */
  color: #1098ad;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline orangered;
}

a:active {
  background-color: black;
  font-style: italic;
}


display


    block element - newline added
    inline element -  no newline. sequentially added
    inline-block - inline + block


float


    height is 0.   one of the layout design
    
    left, right


clearing float


 <header class="main-header">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>
      </header>





h1 {
  float: left;
}

nav {
  float: right;
}



In this case, we have child elements (h1 and nav ) in the header that is not a float property. hence we need to clear it to avoid the side effect

the absolute and relative position will not cause this kind of issue. we need to choose which one is needed for our use case float or position




work around 1 - Not recommended



      <header class="main-header">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>

        <div class="clear"></div>
      </header>




h1 {
  float: left;
}

nav {
  float: right;
}

.clear {
  clear: both;
}



Work around 2: using clearfix recommended

      <header class="main-header clearfix">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>

        <!-- <div class="clear"></div> -->
      </header>


css

.clearfix::after {
  clear: both;
  content: "";
  display: block;
}







Anyhow, the float model is deprecated. This is for learning purposes.






Comments

Post a Comment

Popular posts from this blog

Django Server setup with Apache with mod_wsgi in Centos 9

Image
Description Python application needs to be configured with apache webserver to publish the host. The reason for mod_wsgi is the middleware which talks between python application and Apache   Overall Flow        installing the httpd service and modwsgi sudo yum install httpd mod-wsgi sudo systemctl start httpd sudo systemctl status httpd sudo systemctl enable httpd httpd -v sudo systemctl restart httpd systemctl status httpd.service Adding the user [root@localhost ~]# adduser dj_adm [root@localhost ~]# passwd dj_adm Changing password for user dj_adm. New password: Retype new password: passwd: all authentication tokens updated successfully. [root@localhost ~]# Create the virtual environment using python3 [dj_adm@localhost ~]$ virtualenv -p python3 ~/virtualenvs/dj-env created virtual environment CPython3.9.10.final.0-64 in 696ms   creator CPython3Posix(dest=/home/dj_adm/virtualenvs/dj-env, clear=False, no_vcs_ignore=False, global=False)   seeder FromAppD...
Read more

Mysql Installation on CentOS 9

 Mysql Installation on CentOS 9  Installing MYSQL package [root@localhost ~]# sudo dnf install mysql-server CentOS Stream 9 - BaseOS                         10 kB/s | 3.2 kB     00:00    CentOS Stream 9 - AppStream                      17 kB/s | 3.3 kB     00:00    CentOS Stream 9 - Extras packages                12 kB/s | 3.5 kB     00:00    Dependencies resolved. ================================================================================  Package                       Arch      Version             Repository    Size ================================================================================ Installing:  mys...
Read more

Install mysql8 on centOS 9 and integrating with Django

Image
 Description Our application data (live or prod app) will be loaded into RDBMS(Mysql). So we are integrating mysql with django     Install mysql8 on centOS 9 This is available in the appSteam repo [root@localhost ~]# sudo dnf install mysql mysql-server -y Last metadata expiration check: 0:00:21 ago on Fri 08 Apr 2022 07:27:09 AM IST. Dependencies resolved. ===================================================================================================================================================================================================================  Package                                                        Architecture         ...
Read more