martes, 31 de agosto de 2021

CSS walk 1 Selectors, Box Model

CSS walk Selectors, Box Model


Selectors

The workspace will have two files index.html, and /css/styles.css

index.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS course</title>
    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
    <h1>h1 text for css selectors</h1>
    <h2>h2 text for css selectors</h2>
    <h3>h3 text for css selectors</h3>
    <h4>h4 text for css selectors</h4>
    <h5>h5 text for css selectors</h5>
    <h6>h6 text for css selectors</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis velit fuga 
    quaerat, <a href="#">ut mollitia cumque?</a> Assumenda dignissimos sapiente cum eos rerum 
    saepe, <span>animi distinctio? Placeat repellat,</span> voluptates unde minus vitae non labore </p>
    <p>mollitia ducimus error quam quas delectus suscipit, voluptas, vel corrupti earum? Quis ea est 
    distinctio sapiente temporibus labore itaque officiis, vero eius illum, fuga ipsum molestiae, nesciunt a amet? 
    In voluptas officiis, voluptate sunt dolorem fugit corrupti enim.</p>
</body>
</html>
 
 css/styles.css
body {
    background-colorlightskyblue;
}

index.html in browser 


 Select all the elements with * and set some properties

* {
    margin0;
    padding0;
}

...

 

Selection by element, select the h3 element.

h3 {
    colororangered;
}

 







 

Selecting more elements h3,h2,h6

h3,h2,h6 {
    color#FF5555;
}

 ...

 

 
 
 
 
 
 
 
 
 
 
 
 
 
Select the p element, in this case the two parragraphs will be selected
 
p {
    color:steelblue;
}
 
...
 

 
 
 
 
 
 
 
 
 
 
 
 
 
To select only the second <p>
 
p ~ p {
    color:steelblue;
}
 
Also this work
 
p:nth-of-type(2) {
    color:steelblue;
}
 
...
 

 
 
 
 
 
 
 
 
 
 
 
 
 
To select the first <p> element
 
p:first-of-type {
    color:steelblue;
}
 
Lets put an anchor outside and before the paragraphs to play with them and select only the anchors inside any <p>.

p a  {
    font-size30px;
}
 
...
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
Selecting an element using his class 

To select the second <a> add a class to it and then make reference to it by the class.

    <p>mollitia ducimus error quam quas delectus suscipit, voluptas, vel corrupti earum? Quis ea est 
    distinctio sapiente temporibus <a href="#" class="second-anchor">labore itaque officiis</a>, vero eius illum, fuga ipsum molestiae, nesciunt a amet? 
    In voluptas officiis, voluptate sunt dolorem fugit corrupti enim.</p>
 
.second-anchor {
    font-size30px;
    color:tomato;
}
 
...

 
 
 
 
 
 
 
 
 
 
 
 
 
 
The class="second-anchor" can be used in the other element <p> just adding the class to the first <p> element
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
Also the "id" can be used instead of a class but only is allowed to be used one time. but in my lab this work when used more than one time.

#using-id-anchor {
    font-size30px;
    color:rgb(173201172);
}
 
Selecting an anchor by coincidence of attribute.

modifying index.html
    <h5>h5 text for css selectors</h5>
    <h6>h6 text for css selectors</h6>
    <a href="https://jalbertomr.blogspot.com">ankor outside p</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis velit fuga
 
styles.css
a[href="https://jalbertomr.blogspot.com"] {
    font-size30px;
    color:teal;
}
 
...

 

Box Model CSS


 Lets work with the following index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS course</title>
    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
  </head>
  <body>
    <h1>Box Model CSS</h1>

    <a href="https://jalbertomr.blogspot.com">this is an anchor</a>
    <a href="#">the second anchor</a>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos incidunt
      voluptas dignissimos nostrum iusto ipsa assumenda, quam id esse harum.
      Voluptatum pariatur dolorum officia dolorem provident, deleniti sequi
      nostrum, ipsam maxime rerum nam odio, quod facilis commodi quia nihil
      eius?
    </p>
    <div>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. , dolores
        libero aut inventore doloremque, Libero, quaerat porro ad dolores
        eligendi non consequatur necessitatibus obcaecati deserunt error.
        Praesentium ipsa quasi sed qui eius hic molestiae adipisci, expedita
        nostrum commodi.
      </p>
    </div>
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. veritatis vel!
        Dolorum ipsa veniam laudantium eum dolor perspiciatis minima pariatur
        suscipit? Repudiandae reiciendis et laboriosam deserunt expedita facilis
        minima provident sit doloremque! Debitis perspiciatis ut excepturi
        praesentium!
      </p>
    </div>
  </body>
</html>

 
the browser will look like this
 

Apply the next css file

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 200px;
  display: inline-block;*/
}

p {
  backgroundcornflowerblue;
  /*width: 50%;
  display: inline-block;*/
}

div {
  /*width: 300px;*/
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  /*display: inline-block;*/
}


We are applying to the elements anchor, paragraph, div background colors to follow the modifications we do to them. We are applying to the div element the margin, padding and border that the inspector of the browser can confirm. 
 
The browser will show

 Applying height, width and display: inline-block

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  height5px;
  width200px;
  displayinline-block;
}

 

the anchor height is only five px, the width is increased and with display: inline-block this change is applyied.

with just block

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  height5px;
  width200px;
  displayblock;
}

the anchors are together


but increasing the height the text fit inside it.

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  height30px;
  width200px;
  displayblock;
}

the aspect is corrected
 

changing display to inline
 
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  height30px;
  width200px;
  displayinline;
}
 
the height is adjusted to the text
 
 

And the height is irrelevant. increasing font-size...

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  height30px;
  width200px;
  font-size50px;
  displayinline;
}
 
...
 

With width: 100% and block
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  width100%;
  displayblock;
}
 
...

 Now we get a block and two inline-block
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  width100%;
  displayblock;
}

p {
  backgroundcornflowerblue;
  width50%;
  displayinline-block;
}

div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  displayinline-block;
}
 
the Result
 

 Now with 3 inline-block
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 100%;*/
  displayinline-block;
}

p {
  backgroundcornflowerblue;
  width200px;
  displayinline-block;
}

div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  displayinline-block;
}

 
The a, p, and div are fitted in one line
 

Changing to inline-flex
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 100%;*/
  displayinline-flex;
}

p {
  backgroundcornflowerblue;
  width200px;
  displayinline-flex;
}

div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  displayinline-flex;
}
 
...
With inline-flexbox
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 100%;*/
  display: inline-flexbox;
}

p {
  backgroundcornflowerblue;
  width200px;
  display: inline-flexbox;
}

div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  display: inline-flexbox;
}
...

 
With inline-block
a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 100%;*/
  displayinline-block;
}

p {
  backgroundcornflowerblue;
  width200px;
  displayinline-block;
}

div {
  width300px;
  height120px;
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  displayinline-block;
}
 
The p is greater than div. Is showed the browser in two sizes, the adjust of the block is noticed.
 
 
 
Increasing the browser size
 

 Releaseing the height of the div it fits automatically to the paragraph

a {
  backgroundcadetblue;
  border1px solid rgb(6112116);
  /*width: 100%;*/
  displayinline-block;
}

p {
  backgroundcornflowerblue;
  width200px;
  displayinline-block;
}

div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  /*border-right: 20px solid rgb(64, 117, 214);
  border-bottom: 30px solid rgb(91, 136, 219);
  border-left: 40px solid rgb(141, 165, 211);*/
  displayinline-block;
}
 
...

 Lets apply different borders to the div
div {
  width300px;
  /*height: 120px;*/
  backgroundhsl(21665%73%);
  margin10px 50px;
  padding10px 15px 20px 30px;
  border10px solid rgb(50107212);
  border-right20px solid rgb(64117214);
  border-bottom30px solid rgb(91136219);
  border-left40px solid rgb(141165211);
  displayinline-block;
}

...



 
 
eot

No hay comentarios:

Publicar un comentario