Introduction to CSS

Gather, organize, and share content that interests you.

Loading...

CSS

Cascading Style Sheets

CSS

CSS Stands for “Cascading Style Sheets”.

CSS is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, font size, etc.

CSS form the presentation layer of the user interface. It tells the browser how the element is to be presented to the user.

Why css?

CSS removes the presentation attributes from the structure allowing reusability, ease of maintainability, and an interchangeable presentation layer.

HTML was never meant to be a presentation language.

CSS allows us to make global and instantaneous changes easily.

Using style sheets

CSS is applied to a web page using three different methods:

Inline style

Internal style sheet

External style sheet

We will be using External Style Sheets.

Inline style

Applies styles directly to the elements by adding declarations into the Tags.

<p style=“color: red;”> This is a paragraph </p>

<p style=“font-size: 30px;”> This is another paragraph </p>

Internal style sheets

Applies styles to HTML by placing the CSS rules inside the tag <style> which is written inside the <head> tag.

<head>

<style type=“text/css”>

p{ color: red; }

</style>

</head>

External style sheets

Applies styles as a separate file with a .css extension. The file is then referenced from inside the <head> section by a link to the file.

<head>

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”/>

</head>

Where mystyle.css is the name of my CSS file.

Syntax

Declaration

body { Background-color: black;

color: green; }

Selector

PropertyValue

Css Selectors

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

Element Selector

ID Selector

Element selector

All the paragraph on the page will be aligned centered and color will be red.

Element Selector selects based on the element name.

For Example, You can select all the <p> elements on a page like this:

p {

color: red;

Text-align: center;

}

Id selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be 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.