CSS Properties

CSS Colors

• CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.

Color Formats in CSS

<div class="hex-color">This div has a Hexadecimal background color.</div>
<div class="rgb-color">This text is in RGB red.</div>
<div class="rgba-color">This text is in RGBA green with 50% transparency.</div>
<div class="hsl-color">This text is in HSL green.</div>
<div class="hsla-color">This text is in HSLA green with 30% opacity.</div>

.hex-color {
     background-color: #FF5733; /* Hexadecimal color */
}
.rgb-color {
     color: rgb(255, 0, 0); /* RGB color */
 }
.rgba-color {
     color: rgba(0, 255, 0, 0.5); /* RGBA color with transparency */
 }
 .hsl-color {
     color: hsl(120, 100%, 50%); /* HSL color */
 }
 .hsla-color {
     color: hsla(120, 100%, 50%, 0.3); /* HSLA color with transparency */
 }

In this example:

• Background Color (background-color):

  • background-color: #ff5733; applies a bright red-orange color to the background using a hex code.

  • The padding of 20px adds space inside the div to make it more visible.

• Text Color (color):

  • color: rgb(255, 0, 0); sets the text color to red using the RGB notation.

  • The font size of 20px increases the text size to make it more prominent.

• Border Color (border):

  • border: 5px solid rgba (0, 255, 0, 0.5); creates a solid green border with 50% transparency using the RGBA notation.

  • The padding: 10px; and margin: 10px; ensure the div has space around it and inside.

• Hover Effects:

  • In the .hover-color class, the background-color: hsl(120, 100%, 50%); applies a bright green background.

  • When hovered, the background color changes to a transparent, lighter green. background-color: hsla(120, 100%, 50%, 0.7);.

Comparison of Color Models

CSS Background

• An element's CSS background is the area behind its content, which may be an image, color, or both. Color, image, position, and repetition are among the elements that you can modify with the background attribute.

CSS Background Property

Background color property

• The background-color property in CSS sets the background color of an element. It can accept a color name, HEX, or RGB values.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla nesciunt perspiciatis ipsum, cumque commodi praesentium possimus vitae amet ratione doloribus culpa dolores dignissimos accusamus quo itaque ipsam quam distinctio totam?
    Cum ipsum, minus distinctio autem ipsam obcaecati reprehenderit velit consequatur debitis dicta vel! Illum expedita illo, nihil sit perferendis ab doloremque qui earum hic ducimus voluptate id vero error quasi.
    Quo eaque itaque minus corrupti asperiores error temporibus, quod dolores perferendis eius, quos magnam officiis a, non ipsam voluptas fugiat. Expedita quia itaque quasi cumque sed porro architecto mollitia aut!
    Veniam doloremque facilis ducimus, debitis eos, molestiae natus molestias expedita aliquam odio corrupti laborum non iure voluptatum excepturi ex eligendi ab ea, blanditiis minus neque? Corrupti, quae hic. Iste, dolores.
    Nesciunt reprehenderit soluta ipsa, quos, corrupti cupiditate consectetur expedita provident in fugit similique explicabo, amet ullam delectus! Placeat eligendi nihil obcaecati quas, vitae illo molestias deserunt atque eius optio? Velit!</p>

p{
    background-color: aqua;
}

Background image property

• The background-image property in CSS is used to set an image as the background of an element. By default, the image is repeated to cover the entire element unless specified otherwise.

Background repeat property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: repeat;
}

Background no repeat property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
}

Background repeat-x property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: repeat-x;
}

Background repeat-y property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: repeat-y;
}

Backgroud attachment property

• The background-attachment property in CSS specifies how the background image behaves when the user scrolls the page. By setting the value to fixed, later we can change it to scroll the background image stays in place and scrolls while the content of the page scrolls.

Background attachment fixed property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Background attachment scroll property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

Background position property

• The background-position property in CSS is used to set the starting position of the background image within the element. You can use values like top, left, center, or specify exact pixel/percentage values to position the image.

Background position left property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-position: left;
}

Background position right property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-position: right;
}

Background position top property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-position: top;
}

Background position bottom property

body{
    background-image: url(https://www.researchgate.net/publication/328101815/figure/fig3/AS:678371700772865@1538747825499/Original-image-of-Lena-200X200-pixels.ppm);
    background-repeat: no-repeat;
    background-position: bottom;
}

NOTE:- Try to chnage into pixel and percentage

CSS Borders

• Borders in CSS are used to create a visible outline around an element. They can be customized in terms of

  • Width: The thickness of the border.

  • Style: The appearance of the border (solid, dashed, dotted, etc.).

  • Color: The color of the border.

Syntax:

/*1px is width thickness and solid is the style of the border and black is the color*/
/*Border shorthand*/
element {
    border: 1px solid black;
}

<h1>This is border</h1>

h1{
    border: 2px solid black;
}

Common Border style

Note: Try to implement border-top, border-bottom, border-left, and border-right with width, color, and style.

CSS Margins

• CSS margins are used to create space around elements outside of any defined borders. We have properties for setting the margin for each side of an element (top, right, bottom, and left).

• CSS margin has properties for specifying the margin for each side of an element:

  • margin-top

  • margin-bottom

  • margin-left

  • margin-right

• CSS margin properties have the following values: auto, px, em, rm, %, and negative values are also allowed.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto mollitia at magnam consequuntur quisquam repudiandae culpa? Molestias reiciendis assumenda adipisci architecto. Mollitia obcaecati fuga, labore impedit sed nesciunt minus autem?
    Quod praesentium consequatur voluptate cumque accusantium voluptas vitae nobis et blanditiis nisi molestiae cupiditate alias eaque aut, quibusdam assumenda commodi. Asperiores dolorem necessitatibus illo magni ad. Quos provident illo beatae.</p>

*{
    margin: 0;
    padding: 0;
}
p {
  border: 1px solid; /*For clarification view*/
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Note: To learn more about margins, you can browse further, but this is enough for basic knowledge to impliment.

CSS Padding

• Padding is used to create space around an element's content, inside of any defined borders. We have properties for setting the padding for each side of an element (top, right, bottom, and left).

• CSS padding has properties for specifying the padding for each side of an element:

  • padding-top

  • padding-bottom

  • padding-left

  • padding-right

• CSS padding properties have the following values: auto, px, em, rm, %, and negative values are not allowed.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto mollitia at magnam consequuntur quisquam repudiandae culpa? Molestias reiciendis assumenda adipisci architecto. Mollitia obcaecati fuga, labore impedit sed nesciunt minus autem?
    Quod praesentium consequatur voluptate cumque accusantium voluptas vitae nobis et blanditiis nisi molestiae cupiditate alias eaque aut, quibusdam assumenda commodi. Asperiores dolorem necessitatibus illo magni ad. Quos provident illo beatae.</p>

*{
    margin: 0;
    padding: 0;
}
p {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Note: To learn more about padding, you can browse further, but this is enough for basic knowledge to impliment.

CSS Fonts

• CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typography

Key Properties of CSS Fonts

• To change fonts style in web design, it’s hard to understand the main CSS font properties:

  • font-family: Specifies the font type.

  • font-size: Increase the size of the text.

  • font-weight: Adjusts the size of the text.

  • font-style: Changes to pre-formatted to formatted of the text (e.g., italic, bold).

  • line-height: Sets the space between lines of text.

  • letter-spacing: Gives the space between characters.

  • text-transform: Controls the capitalization of text.

*{
    margin: 0;
    padding: 0;
}
p {
    font-family: "Arial, Helvetica, sans-serif";
    font-size: 32px; /* Pixels */
    font-weight: bold; /* Bold text */
    line-height: 1.5; /* 1.5 times the font size */
}

• The code apply a black, 32px Arial font to the text “Lorem text” on the page.

• The text is styled using the p element in the HTML.

• Numeric values allow are allow to control over weight like 100 for light, 900 for extra bold.

• The font-style property defines the style of the font, typically bold or normal.

• The line-height property gives the space between lines of text. Increasing line height improves readability, especially for long paragraphs.

Note: To learn more about CSS fonts, you can browse further, but this is enough for basic knowledge to impliment.

CSS Float

• The CSS float property allows an element to be positioned to the left or right of its container, moving it out of the normal document flow.

Syntax

float: none | left | right | initial | inherit;

Property values

CSS Float Left

<div style="font-size:40px; 
                    color:#006400;
                    float:left;">
        CSS float left
    </div>

CSS Float Right

<div style="font-size:40px; 
                    color:#006400;
                    float:right;">
        CSS float right
    </div>

CSS Float None

<div style="font-size:40px; 
                    color:#006400;
                    float:none;">
        CSS float none
    </div>

---

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥