In CSS, what is the purpose of a selector, and how does the id selector differ from the class selector?

Todaynews September 09, 2024

                      What is CSS?

  1. CSS stands for Cascading Style Sheets.
  2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
  3. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
  4. External stylesheets are stored in CSS files.



  • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.


Example
<html>

 <head>
    <style> body { background-color: lightblue; } </style>
 </head> 

<body>
    <h1>Hello, World!</h1> 
    <p>This page has a light blue background color.</p> 
</body>

 </html>




  • A CSS rule consists of a selector and a declaration block.

Structure:

selector {
    property: value;
}


Example:

p {
    text-align: center;
}

1.Selector: Points to the HTML element you want to style. For example, p points to paragraph elements.

2.Declaration Block: Contains one or more declarations surrounded by curly braces {}.

3.Declaration: Each declaration includes:
   (i)A CSS property name (like color, font-size, etc.).
(ii)A value (like blue, 16px, etc.) for that property.

4.Multiple Declarations: Declarations are separated by semicolons inside the block.


CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: 
  1. Simple selectors (select elements based on name, id, class)
  2. Combinator selectors (select elements based on a specific relationship between them)
  3. Pseudo-class selectors (select elements based on a certain state) 
  4. Pseudo-elements selectors (select and style a part of an element) 
  5. Attribute selectors (select elements based on an attribute or attribute value)


 


  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example :
<p id="para1">This text will be centered.</p>

 #para1 {
text-align: center;
}


  • The class selector selects HTML elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the class name.
Example : 

<p class="center">This text will be centered.</p>


.center {  text-align: center;
}
  • You can also specify that only specific HTML elements should be affected by a class.
Example : 
<p class="center">This text will be centered and red.</p>

p.center {
 text-align: center;  color: red;
}



  • The universal selector (*) selects all HTML elements on the page.

 Example : 

* {
     text-align: center;
     color: blue;
   }




  • The grouping selector selects all the HTML elements with the same style definitions.
































  • The descendant selector matches all elements that are descendants of a specified element.
  • The descendant selector in CSS allows you to target and style elements that are nested (or "descended") within other elements.






<div> <p>This paragraph is inside a div and has a yellow background.</p>
 <p>Another paragraph inside the same div, also with a yellow background.</p> </div>

 


  1. External CSS : With an external style sheet, you can change the look of an entire website by changing just one file. 
  2.  Internal CSS : An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside 
  3.  Inline CSS : An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.







  • CSS comments are not displayed in the browser, but they can help document your source code.
  •  Comments are ignored by browsers.
  •  A CSS comment placed inside the <style> element, and start with /* and end with */.

 Example :

 /* This is a single-line comment */

 p { color: red;}

  •  Colors are specified using predefined color names, or RGB, HEX Values.
  •  RGB Value : In CSS, a color can be specified as an RGB value, using this 
  • formula: rgb(red, green, blue)
  •  Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. 
  • For example, rgb(255, 0, 0)

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>RGB Example</title>
    <style>
        body {
            background-color: rgb(240, 240, 240); /* Light gray background */
        }
        h1 {
            color: rgb(255, 99, 71); /* Tomato red color */
        }
        p {
            color: rgb(50, 150, 50); /* Medium green color */
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with a medium green color.</p>
</body>
</html>









<!DOCTYPE html>
<html >
<head>
 
    <title>HEX Example</title>
    <style>
        body {
            background-color: #f0f0f0; /* Light gray background */
        }
        h1 {
            color: #ff6347; /* Tomato red color */
        }
        p {
            color: #329932; /* Medium green color */
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with a medium green color.</p>
</body>
</html>































                    CSS Backgrounds


  • The CSS background properties are used to add background effects for elements. 

  •  In these chapters, you will learn about the following CSS background properties:

  1. Background-color
  2. Background-image
  3. Background-repeat
  4. Background-position
  5. Background-attachment


                                                             1.Background-color


  •  It is used to add background color of an element.

Example :

Body {

Background-color : Blue;

}

Opacity / Transparency

  • The Opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent.

Example :

div { background-color: green;  opacity: 0.3;} 



 <html>

<head>

 <title>Background and Opacity Example</title>

    <style>

       /* Container div with green background and opacity */

        div p{

            background-color: green;

            opacity: 0.3;

        }

    </style>

</head>

<body>

    <h2>CSS Background and Opacity Example</h2>

    <!-- Box with a green background and opacity applied -->

    <div>

        <p>This box has a green background with 30% opacity.</p>

    </div>

</body>

</html>


 Background Image

  • The background-image property specifies an image to use as the background of an element.
  • By default, the image is repeated so it covers the entire element.

Example :

body { background-image: url(" ganpat.jpg ");}



 Background Image Repeat


  •  By default, the Background-Image property repeats an image both horizontally and vertically.
  • If the image is repeated only horizontally (background-repeat: repeat-x;) the background will look better.

Example :

body {background-image: url(" ganpat.jpg ");

           background-repeat: repeat-x;

}





  •  By default, the Background-Image property repeats an image both horizontally and vertically.
  • If the image is repeated only horizontally (background-repeat: repeat-x;) the background will look better.


Example :

body { background-image: url(" ganpat.jpg ");
            background-repeat: repeat-x;}







 Example : 

body { background-attachment: fixed; }

Property Values :







  •  The CSS border properties allow you to specify the style, width, and color of an element's border.

Example :

P {

border-style : solid;

}

  •  Dotted : Defines a dotted border
  • Dashed : Defines a dashed border
  • Solid : Defines a solid border
  • Doubled : Defines a double border
  • Groove : Defines a 3D grooved border. The effect depends on the border-color value.
  • Ridge : Defines a 3D ridged border. The effect depends on the border-color value
  • Inset : Defines a 3D inset border. The effect depends on the border-color value
  • Outset : Defines a 3D outset border. The effect depends on the border-color value


  •  This property specifies the width of the four borders.
  • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

Example :

p { border-style: solid;

 border-width: 5px;

border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */}






1. CSS Margins

▶  Margins are used to create space around elements, outside of any defined borders.


▶ With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
    
        
               
       ▶  Margin-top
       ▶  Margin-bottom
       ▶  Margin-left
       ▶  Margin-right


▶ EXAMPLE

       ▶<html>
<head>
<style>
h1{

margin-top:50%;
margin-left:50%;
background-color:blue;
width:70;
height:50;

}

</style>
</head>
<body>

<h1>hello</h1>


</body>

</html>


▶ OUTPUT

hello


2. CSS Padding



▶ Padding is used to create space around an element's content, inside of any defined borders. With CSS, you have full control over the padding.

▶ There are properties for setting the padding for each side of an element (top, right, bottom, and left). 

        ▶ Padding-top
        ▶ Padding-bottom
        ▶ Padding-right 
        ▶ Padding-left

▶In CSS, the term "box model" is used when talking about design and layout. 
▶The CSS box model is essentially a box that wraps around every HTML element. 
▶It consists of: margins, borders, padding, and the actual content. 

The image below illustrates the box model.








▶ Content - The content of the box, where text and images appear.
▶ Padding - Clears an area around the content. The padding is transparent.
▶ Border - A border that goes around the padding and content .
▶ Margin - Clears an area outside the border. The margin is transparent.


▶ EXAMPLE

<html>
<head>
<style>
p{
border-style:solid;
border-width:20px;
border-color:green;
margin-top:50%;
margin-left:50%;
padding-left:50px;
padding-top:50PX;
padding-right:50PX;
padding-bottom:50px


}


</style>
 


</head>

<body>



<p>hello</p>
</body>
</html>

▶ OUTPUT


 



1. CSS Text 



  •  CSS has a lot of properties for formatting text.
  •  Text Color : This property is used to set the color of the text.
  •  The color is specified by
 Example : 
  • body {  color : red; }

 CSS Text Alignment : 
  • This property is used to set the horizontal alignment of a text. 
  • A text can be left or right aligned, centered, or justified.
Example :
 H1{
 Text-align : center; 
 }

2.Text-Decoration:


 Selector{ Text-Decoration :velue }

  1. Underline: A line beneath the text, often used for emphasis or hyperlinks.
  • Example:
  1. CSS: text-decoration: underline;

  1. Overline: A line placed above the text, though less commonly used than underlining.

    1. Example: This is overlined text.
    2. CSS: text-decoration: overline;

  2. None: Removes any text decoration, often used to remove default link underlines.

    1. CSS: text-decoration: none;


3.Text Transformation


Text transform refers to the CSS property that changes the capitalization or appearance of text. It’s commonly used to control how text is displayed without altering the underlying HTML or actual content. The most commonly used text-transform values are:

  1. Uppercase: Converts all letters to uppercase (capital) letters.

    • Example: THIS IS UPPERCASE TEXT.
    • CSS: text-transform: uppercase;

  2. Lowercase: Converts all letters to lowercase.

    • Example: this is lowercase text.
    • CSS: text-transform: lowercase;

  3. Capitalize: Capitalizes the first letter of each word.

    • Example: This Is Capitalized Text.
    • CSS: text-transform: capitalize;

  4. None: Keeps the text as it is, without changing its capitalization.

    • Example: This is default text.
    • CSS: text-transform: none;

This property is helpful for applying styling that needs to conform to a specific format, such as titles or labels.


1. letter-spacing

  • Definition: Specifies the space between characters in a text. You can control how much space is added between letters.
  • Syntax:
    letter-spacing: value;
    The value can be in units like px, em, rem, etc. Positive values increase the space, while negative values decrease it.
  • Example:
    p {
      letter-spacing: 2px;
}
    This increases the space between characters by 2 pixels.

2. line-height

  • Definition: Specifies the height of a line. It's useful for controlling the spacing between lines of text.
  • Syntax:
    line-height: value;
    The value can be a number (multiplier of the font size), a unit (e.g., px, em), or a percentage.
  • Example:
    p {
      line-height: 1.5;
}
    This sets the line height to 1.5 times the size of the text.

3. text-indent

  • Definition: Specifies the indentation of the first line in a block of text.
  • Syntax:
    text-indent: value;
    The value can be in units like px, em, or percentages.
  • Example:

    p {
  text-indent: 30px;
}
    This indents the first line of a paragraph by 30 pixels.

4. white-space

  • Definition: Specifies how white-space inside an element is handled. It controls whether white-space characters like spaces, tabs, and newlines should be treated as part of the content or ignored.
  • Syntax:

    white-space: normal | nowrap | pre | pre-wrap | pre-line;
  • Example:

    p {
  white-space: nowrap;
}
    This prevents the text from wrapping and keeps it on a single line.

5. word-spacing

  • Definition: Specifies the space between words in a text.
  • Syntax:

    word-spacing: value;
    The value can be in units like px, em, rem, etc.
  • Example:
    p {
  word-spacing: 5px;
}
    This increases the space between words by 5 pixels.






 








Todaynews

Posted by Todaynews

Post a Comment

0 Comments

Post a Comment