DEV Community

Dhanush P
Dhanush P

Posted on

Cascading Style Sheets(CSS)

#webdev #css #frontend

Introduction to CSS

  • CSS stands for Cascading Style Sheets.
  • CSS used to describe the presentation of a HTML document.
  • It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing and positioning.
  • CSS styles are applied to the HTML element using selectors.

CSS Syntax

  • CSS syntax consists of a selector and a declaration block.
  • The selector targets an HTML element, and the declaration block contains property value pairs. 
selector {
   property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example:

p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Types of CSS

  • There are three major ways to apply CSS to web pages: Inline, Internal and External CSS.

1. Inline CSS

  • It is used to apply CSS styles directly to the HTML tags by using the “style” attribute.
  • The style attribute is a global attribute that can be used with all HTML tags.
  • Inline CSS is used to apply a unique style to a single HTML element.

Example: Using Inline Style to Apply CSS
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

2. Internal CSS

  • It uses the <style> tag, placed under the <head> section, and all the CSS properties are written under the <style> tag.
  • It is used to define a style for a single HTML page.
  • This styles affects all matching elements in that document.

Example: Using Internal Style to Apply CSS

<!DOCTYPE html>
<html>
<head>
    <title>Internal Style</title>
    <style>
        body {
           background-color: lightblue;
        }
        h1 {
           font-size: 40px;
           color: navy;
           text-align: center;
        }
    </style>
</head>
<body>
    <h1>Example for Internal Style Sheet</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. External CSS

  • External CSS is written in a separate file, which is saved with a .css extension, and linked to the HTML file by using the <link> tag in the <head> section.
  • CSS file must not contain any HTML code.

Example: Use External Style to Apply CSS
// index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Example for External Style Sheet</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

// style.css

body {
  background-color: lightcoral;
}
h1 {
  font-size: 50px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

What is Selectors?

  • Selectors are used to target the HTML elements on our web pages that we want to style.
  • Used to select HTML elements based on tag name, class, id, or attributes.
  • It helps apply styles like color, font, spacing, and layout.

Selector Types(Basic)
1.Element selector h1, p, body
2.Class Selector .class-name
3.Id selector #id-name
4.Global selector * (apply this for entire website)

CSS Properties:

  1. border: 2px solid blue; - Allows you to define an outline around an HTML element.
  2. margin: 5px; - Used to create space outside of element's border.
  3. padding: 5px; - Used to create space inside of element's border.
  4. text-align: center; - Specifies the horizontal alignment of text in an element.
  5. text-decoration: none; - Specifies the decoration added to text.
  6. border-radius: 10px; - Defines the radius of the element's corners.
  7. display: grid; - How an element is displayed on a webpage.
  8. grid-template-columns: 1fr 2fr; - Defines the number and size of columns in a grid layout.
  9. justify-content: space-around; Aligns the flexible container's items

Top comments (0)