Intro to CSS

1. Intro to CSS#

image.png

1.1. What is CSS?#

  • CSS stands for Cascading Style Sheets

  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media

  • 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

  • Sample to show different CSS

1.2. CSS Syntax#

image.png

  • The selector points to the HTML element you want to style.

  • The declaration block contains one or more declarations separated by semicolons.

  • Each declaration includes a CSS property name and a value, separated by a colon.

  • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

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

1.3. Insert CSS#

There are three ways of inserting a style sheet:

  • Inline CSS

  • Internal CSS

  • External CSS

1.3.1. 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.

  • Example

    <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

1.3.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 the <style> element, inside the head section.

  • Example

    <!DOCTYPE html>
<html>
<head>
        <style>
        body {
        background-color: linen;
        }

        h1 {
        color: maroon;
        margin-left: 40px;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

1.3.3. External CSS#

  • With an external style sheet, you can change the look of an entire website by changing just one file!

  • Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

  • Example

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

1.3.4. Cascading Order#

What style will be used when there is more than one style specified for an HTML element?

  • All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

    1. Inline style (inside an HTML element)

    2. External and internal style sheets (in the head section)

    3. Browser default

1.4. CSS Comments#

  • Comments are used to explain the code, and may help when you edit the source code at a later date.

  • Comments are ignored by browsers.

  • A CSS comment is placed inside the <style> element, and starts with /* and ends with */

  • Example

    /* This is a single-line comment */
p {
color: red;
}

  • Comments can also span multiple lines:

    /* This is
a multi-line
comment */

p {
color: red;
}

1.5. CSS Selectors (basic)#

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)

This page will explain the most basic CSS selectors.

1.5.1. The CSS element Selector#

The element selector selects HTML elements based on the element name.

  • Example

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

1.5.2. The CSS id Selector#

  • 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

    #para1 {
text-align: center;
color: red;
}

1.5.3. The CSS class Selector#

  • 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

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

  • You can also specify that only specific HTML elements should be affected by a class.

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

1.5.4. The CSS Universal Selector#

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

  • Example

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

1.5.5. All CSS Simple Selectors#

Selector

Example

Example description

#id

#firstname

Selects the element with id="firstname"

.class

.intro

Selects all elements with class="intro"

element.class

p.intro

Selects only <p> elements with class="intro"

*

*

Selects all elements

element

p

Selects all <p> elements

element,element,..

div, p

Selects all <div> elements and all <p> elements
Contents