CSS Functions and Pseudo Selectors

CSS Functions and Pseudo Selectors CSS supports the following functions:
  1. calc() function
  2. url() function
  3. rgb() function
  4. rgba() function
  5. -webkit-gradient() function


Transform functions:
  1. rotateX()
  2. rotateY()
  3. rotateZ()
  4. rotate()
  5. cubic_beizer_function()


The units of measurements like padding and margins is:
  1. px -> pixel (1px = 0.128mm)
  2. pt -> points
  3. in -> inches
  4. cm -> centimeters
There are two more units of measurement like em and rem which are discussed in https://thewebdesk.blogspot.com/2023/02/em-and-rem.html


The "none" value:-

The "none" value is written whenever you don't want a property of any HTML elements.
For example:
a { border:none;text-decoration:none;}
The above CSS code snippet will not dispaly a brder for the anchor tag and there will be no underline for the hyperlink


To center an element horizontally:
Use {margin :0 auto}
This will set the top and bottom margins to 0 and auto to left and right margins meaning that the margins will be equal in length and value will be the "auto" variable as implemented by the browser.
To center an element vertically: use
p{vertical-aklign:middle}

Pseudo selectors:-

Pseudo selectors are a subdivision of CSS normal selectors.
For example, if you want the anchor (<a>) tag to behave differently like change in the link color, us e the
a:hover { color:red}
Similarly,
a:visited {color:brown}
a:active {color:purple}

The syntax for writing CSS pseudo selectors is <tag_name>:<pesudo>

ul:nth-child():-
The nth child pseudo selector selects the nth child element of the unordered list.
The nth-child pseudo sleector accepts two special two specioal oaarmeteres in additioin to the integer.
These paramereters are even and odd.
As the name name suggests, the nth-child(even) selects all the even numbered list items and the nth-child(odd) selects all tghe odd numbered list items.
Thus,we can achieve a striped list or table.

The url function accepts only one parameter in string format ,i.e., inside quotation marks eg,


    div {
    background-image :url("http://wwww.xyz.org/gau.png');
    }



Comments

Popular posts from this blog

Laravel | PHP | Basics | Part 2

Apache Hadoop | Running MapReduce Jobs

Parallel Database design, query processing