cascading style sheets (CSS)

CSS is short for Cascading Style Sheets and is sometimes called “style sheets” or “styles”.
You can use CSS to change the design of your page by adding colours or changing the size and shape of HTML elements.
You can also use CSS to change where things are positioned. In fact, there are many different things you can do with CSS to change the look and feel of your page.
eg:

<p style=”css-property: value;”>Hello world</p>

The value of our style attribute is set using the equals sign (=) and enclosed in double quotes (” “).
We apply CSS to our HTML tag by setting the value of the style attribute to CSS. CSS is a very simple programming language to write.
It’s always split into two parts: a property and a value

CSS syntax

CSS has a simple syntax and uses a number of English words to specify the names of various style properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
Selector;
A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Selectors can be selected in general or can be specifically selected.
Selectors are generally an id or class value, or an element like p, div etc.

Within CSS, selectors are followed with curly brackets, {}

eg:
p{….}

Figure below shows the syntax of Working with Selectors:

NOTE

The first step is to become familiar with the different types of selectors.
We’ll start with the most common selectors: typeclass, and ID selectors.

CSS properties and values

When you write CSS you always have to use both a property and a value.
The property tells your browser what part of the HTML element you want to change.
The value tells your browser exactly what to change it to.

CSSWhat does it mean?Example values
propertyThe thing you want to
change
background-color;
height;
valueWhat you want to
change it to
red; 200px;

 

When you use CSS you divide the property from the value by inserting a colon (:).At the end of the value, you use a semi-colon (;).
If the CSS is more than one word, you join the two words using a hyphen (-). I
f you don’t use the right syntax, your browser won’t be able to decode your instructions. Your style attribute should always be written like this
style=”CSS-property: value;”

CSS selectors

Type Selector; Type selectors target elements by their element type. The following code shows a type selector for division elements as well as the corresponding HTML it selects. eg: a{} p{} Class Selector; Class selectors allow us to select an element based on the element’s class attribute value. Class selectors select a particular group of elements rather than all elements of one type. We can apply the same styles to different elements at once by using the same class attribute value across multiple elements. Within CSS, classes are denoted by a leading period, ., followed by the class attribute value. eg: CSS:- .awesome{……….} ID Selector; ID selectors are even more precise than class selectors, as they target only one unique element at a time. ID selectors use an element’s id attribute value as a selector. Within CSS, ID selectors start with a # sign, followed by the id attribute value. eg: CSS:- #ankitpathshala{…..}

Horizontal bar graphs represent the data horizontally. It is a graph whose bars are drawn horizontally. The data categories are shown on the vertical axis and the data values are shown on the horizontal axis

External, Internal, and Inline CSS

External Css;

The best practice for referencing our CSS is to include all of our styles in a single external style sheet, which is referenced from within the element of our HTML document
<linkrel=”stylesheet”href=”main.css”>the element is used to define the relationship between the HTML file and the CSS file.
Because we are linking to CSS, we use the rel attribute with a value of style-sheet to specify their relationship. Furthermore, the href(or hyperlink reference) attribute is used to identify the location, or path, of the CSS file.
Using a single external style sheet allows us to use the same styles across an entire website and quickly make changes site wide.

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

eg:
<head>
<style>
body {
background-color: linen;
}

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

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 element.
The style attribute will contain the css property.
eg:
<p style=”color: red;”>This is a paragraph.</p>

Exercise 1.1

In the emulator below you can see the different types of CSS methods applied
Make changes to each colour and see when the colour of the heading and paragraph changes.

See the Pen PageReset by Ankit (@AnkitPathshalaCoding) on CodePen.

Exercise 1.2

In the coding environment below.
Add Css to heading, paragraph, and body of the css.
Choose any one of the primary colours for each