CSS

Profile Picture

saxenadivya0007

Friday, 2024-07-26

CSS allows web developers to separate the content of a webpage from its design, making it easier to update and maintain websites. By using CSS, developers can control the layout, colors, fonts, and other visual aspects of a website with ease. This helps create a consistent and professional look across all pages of a site. Additionally, CSS allows for responsive design, making websites adapt to different screen sizes and devices. Overall, CSS is an essential tool for creating visually appealing and user-friendly websites.


Basics of CSS


Syntax

A CSS rule consists of a selector and a declaration block:

css
Copy code
selector {
  property: value;
  property: value;
}


  • Selector: Specifies the HTML element(s) to be styled.
  • Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.


Example

css
Copy code
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  font-size: 20px;
  color: grey;
}


In this example:

  • The body selector sets the background color of the entire page to light blue.
  • The h1 selector changes the color of all <h1> elements to navy and centers the text.
  • The p selector changes the font size of all <p> elements to 20 pixels and the color to grey.


Types of CSS


  1. Inline CSS: Used within an HTML element's style attribute.
  2. Internal CSS: Defined within a <style> tag in the HTML <head> section.
  3. External CSS: Linked via a separate .css file.


Inline CSS

html
Copy code
<p style="color: blue;">This is a blue paragraph.</p>


Internal CSS

html
Copy code
<head>
  <style>
    p { color: blue; }
  </style>
</head>


External CSS

Link to an external stylesheet:

html
Copy code
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>


In the styles.css file:

css
Copy code
p {
  color: blue;
}


Selectors

Selectors define which HTML elements the CSS rule applies to. Common types include:

  • Element Selector: Selects elements based on their tag name (e.g., p, h1).
  • Class Selector: Selects elements with a specific class (e.g., .classname).
  • ID Selector: Selects an element with a specific ID (e.g., #idname).
  • Attribute Selector: Selects elements based on an attribute and its value (e.g., [type="text"]).


Example

css
Copy code
/* Element selector */
h1 {
  color: red;
}

/* Class selector */
.blue-text {
  color: blue;
}

/* ID selector */
#main-header {
  font-size: 2em;
}

/* Attribute selector */
input[type="text"] {
  border: 1px solid black;
}


How did you feel about this post?

😍 🙂 😐 😕 😡