DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on

CSS Part 2

#webdev #css #beginners #tutorial

Descendant Selectors:

  • Selects all elements inside another element (any level).
  • It selects both direct child and nested child. 
<div>
    <p>This is paragraph 1</p>
    <section>
        <p>This is paragraph 2</p>
    </section>
</div>

div p {
    color: red;
}
Both paragraphs become red.
Because both are inside `<div>`.
Enter fullscreen mode Exit fullscreen mode

Child Selectors:

  • Selects only direct children. 
<div>
    <p>This is direct child</p>
    <section>
        <p>This is nested child</p>
    </section>
</div>

div > p {
    color: blue;
}
 First paragraph alone -This is direct child, becomes blue.
Enter fullscreen mode Exit fullscreen mode

CSS Colors:

  • Used to change text color. 
p{
  color:red;
}
Enter fullscreen mode Exit fullscreen mode

CSS Background:

  • Used to style background of elements.

Background Color: 

div {
    background-color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

Background Image: 

div {
    background-image: url("image.jpg");
}
Enter fullscreen mode Exit fullscreen mode

Background Repeat: 

div {
    background-repeat: no-repeat;
}
Enter fullscreen mode Exit fullscreen mode

Background Size: 

div {
    background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

Background Position: 

div {
    background-position: center;
}
Enter fullscreen mode Exit fullscreen mode

CSS Fonts:

  • It is used to control how text looks.

Font Family:

  • Changes the style of font. 
p {
    font-family: Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Font Size:

  • It controls text size. 
p {
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Font Weight:

  • It controls thickness. 
p {
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Font Style:

  • It makes text italic. 
p {
    font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

letter-spacing, word-spacing, and text-transform: 

p {
letter-spacing: 3px;
word-spacing: 8px;
text-transform: uppercase; 
}
Enter fullscreen mode Exit fullscreen mode

CSS Text Styling: 

p {

    color : green;                /* Text color*/
    text-align: center;           /* Text Alignment*/
    text-decoration: underline;   /* Text Decoration*/
    text-transform: uppercase;    /* Text Transform */
    word-spacing: 10px;           /* Word Spacing */
    letter-spacing: 2px;           /* Letter Spacing */
}
Enter fullscreen mode Exit fullscreen mode

CSS Box Model (margin, border, padding, content):

Content:

  • Actual text or image.

Padding:

  • Space between content and border.

Border:

  • Line around padding.

Margin:

  • Space outside the border. 
<div class="box">Text inside a box</div>

.box {
     width: 200px; 
    height: 200px;
    padding: 50px;  
    border: 5px solid green; 
    text-align: center; 
    background-color: gray;
    color: white;
    margin: 20px; 

}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)