CSS

CSS: Introduction

  • CSS stands for Cascading Style Sheets.
  • CSS is a stylesheet language that describes the presentation of an HTML.
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once.
  • External stylesheets are stored in CSS files.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:
  1. The selector points to the HTML element you want to style.
  2. The declaration block contains one or more declarations separated by semicolons.
  3. Each declaration includes a CSS property name and a value, separated by a colon.
  4. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
Example :
In the following example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>

CSS Selectors

CSS selectors are used to find (or select) HTML elements based on their element name, id, class, and more.

1. The element Selector

  • The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-align: center;
    color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>

</body>
</html>

2. id Selector

  • The id selector uses the id attribute of an HTML element to select a specific element.
  • An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  • The style rule below will be applied to the HTML element with id=para1:

<html>
<head>
<style>
#para1 {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>
</html>

3. class Selector

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

<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Grouping Selectors

If you have elements with the same style definitions, like this:

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

h2 {
    text-align: center;
    color: red;
}

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

  • you can group the selectors, to minimize the code.
  • To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:

h1, h2, p {
    text-align: center;
    color: red;
}

Three Ways to Insert CSS

There are three ways of inserting a style sheet:
  1. External style sheet
    • With an external style sheet, you can change the look of an entire website by changing just one file!
    • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
    • An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
    
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    
    
    In mystyle.css file
    
    body {
        background-color: lightblue;
    }
    
    h1 {
        color: navy;
        margin-left: 20px;
    }
    
    
  2. Internal style sheet
    • An internal style sheet may be used if one single page has a unique style.
    • Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
    
    <head>
    <style>
    body {
        background-color: linen;
    }
    
    h1 {
        color: maroon;
        margin-left: 40px;
    } 
    </style>
    </head>
    
    
  3. Inline style
    • 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.
    
    <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>