CSS

Basics
Day 1
Agenda

● What is CSS ? ● Opacity

● How to use it ? ● Display property
● What is CSS Selectors ● Layout using Float
● What is style options ● Background Image
● What is the meaning of cascade
● Positions
● What is Specificity
● Lists
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
● CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
CSS Solved a Big Problem

● HTML was NEVER intended to contain tags for formatting a web page!
● HTML was created to describe the content of a web page, like:
● <h1>This is a heading</h1>
● <p>This is a paragraph.</p>
● When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and color
information were added to every single page, became a long and expensive process.

● To solve this problem,On December 17, 1996, the World Wide Web Consortium (W3C)
created CSS.
● CSS removed the style formatting from the HTML page
How to use CSS!
● We can write it as inline styles.
● We can use internal style element to write our styles in html files.
● We can use external style sheet.
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.

● Style has the property and value of the

style needed to be applied.

CSS Syntax
● We have selectors to select the element we want to set style on.
● We have the declaration of the style we need to add which contains the
○ Property : the name of style we need to add like color , font-size , font-family ...etc
○ Value : the value of the property like for color ‘red’ , for font-size : 12px and so on
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.

<style>
h2{
color:red;
}
</style>
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.

● Add external css file to head as following:

<link rel="stylesheet" href="mystyle.css">

Selectors
● To apply CSS to an element you need to select it. CSS provides you with a number of
different ways to do this.
● To understand how selectors work and their role in CSS, it's important to know the parts of a
CSS rule. A CSS rule is a block of code, containing one or more selectors and one or more
declarations.
 Selectors
In this CSS rule, the selector is .my-css-rule
which finds all elements with a class of
my-css-rule on the page. There are three
declarations within the curly brackets. A
declaration is a property and value pair which
applies styles to the elements matched by the
selectors. A CSS rule can have as many
declarations and selectors as you like.
 Selector Types
The most straightforward group of selectors target HTML elements plus classes, IDs, and other
attributes which may be added to an HTML tag.

We can divide CSS selectors into five categories:

● Simple selectors (select elements based on name, id, class)

● Combinator selectors (select elements based on a specific relationship between them)
● Pseudo-class selectors (select elements based on a certain state)
● Pseudo-elements selectors (select and style a part of an element)
● Attribute selectors (select elements based on an attribute or and attribute value)
 Selector Types : Universal/Genanel selector
A universal selector—also known as a wildcard—matches any element, and the following rule
causes every HTML element on the page to have red text.

* {

color: red;

}
 Selector Types : Element Selector
The element selector selects HTML elements based on the element name.

Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}
 Selector Types : Class Selector
A HTML element can have one or more items defined in their class attribute. The class selector matches
any element that has that class applied to it.

Here’s the html element with class name

<p class="my-class"></p>

Style for my-class element

.my-class {

color: red;

}
Selector Types : Class Selector
● Notice how the . is only present in CSS and not the HTML. This is because the . character instructs
the CSS language to match class attribute members. This is a common pattern in CSS, where a

special character, or set of characters, is used to define selector types.

● The value of a class attribute can be almost anything you want it to be. One thing that could trip you

up, is that you can't start a class (or an ID) with a number, such as .

● wrong way to declare class or id

1element.
 Selector Types : ID Selector
● An HTML element with an id attribute should be the only element on a page with that ID value.

Here’s the html element with id name

<p id="my-id"></p>
Style for my-id element
#my-id {

color: red;

Similarly to the class selector ., use a # character to instruct CSS to look for an element that
matches the id that follows it.
CSS Attribute Selectors

The [attribute] selector is used to select elements with a specified

attribute.

CSS [attribute="value"]

● input[type="text"]

● input[type="button"]

● a[target="_blank"]
What are Pseudo-classes?

A pseudo-class is used to define a special state of an element,For example, it can be used to:

● Style an element when a user mouses over it

● Style visited and unvisited links differently

● Style an element when it gets focus

What are Pseudo-classes?

● :link -> selector is used to select unvisited links.

● :visited -> selector is used to select visited links.

● :active -> selector is used to select and style the active link ,link becomes active when you click on it.

● :hover -> selector is used to select elements when you mouse over them.

● :focus -> selector is used to select the element that has focus.

● :first-child -> selector is used to select the specified selector, only if it is the first child of its parent.

● :last-child -> selector is used to select the specified selector, only if it is the last child of its parent.

● :not(selector) -> selector matches every element that is NOT the specified element/selector.
What are Pseudo-elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

● Style the first letter, or line, of an element

● Insert content before, or after, the content of an element
What are Pseudo-elements?

● ::first-line -> used to add a special style to the first line of a text.

● ::first-letter -> used to add a special style to the first letter of a text.

● ::before -> can be used to insert some content before the content of an element.

● ::after -> can be used to insert some content after the content of an element.

● ::marker -> selects the markers of list items.

What is cascading?
Sometimes two or more competing CSS rules could apply to an element. In this module find out
how the browser chooses which to use.

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts
where multiple CSS rules apply to an HTML element.
The cascade algorithm
The cascade algorithm is split into 4 distinct stages :
● Position and order of appearance: the order of which your CSS rules appear
● Specificity: an algorithm which determines which CSS selector has the strongest match
● Origin: the order of when CSS appears and where it comes from, whether that is a
browser style, CSS from a browser extension, or your authored CSS

● Importance: some CSS rules are weighted more heavily than others, especially with the
!important rule type
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)

So, an inline style has the highest priority, and will override external and internal styles and browser
defaults.
Specificity
● If there are two or more conflicting CSS rules that point to the same element, the browser

follows some rules to determine which one is most specific and therefore wins out.
● Think of specificity as a score/rank that determines which style declarations are ultimately

applied to an element.

● The universal selector (*) has low specificity, while ID selectors are highly specific!
Specificity Hierarchy
Every selector has its place in the specificity hierarchy. There
are four categories to define the specificity level of a selector:

● Inline styles - An inline style is attached directly to the

element to be styled. Example: <h1 style="color:
#ffffff;">.
● IDs - An ID is a unique identifier for the page elements,
such as #navbar.
● Classes, attributes and pseudo-classes - This category
includes .classes and [attributes].

● Elements such as h1, div.

 What is style options!
● Color

We can use color option to change the text color like p { color : red } , so all paragraphs will be changed to be red.

● Background-color
We can use background color option to change the background color like div { background-color : red } , so all divs

will be changed to be background red.

 Sizing
● Width

We can use width option to change the element like img { width: 10px } , so image will have width 10 pixels

● Height

We can use height option to change the element like img { height: 10px } , so image will have height 10 pixels
 Spacing
● Padding

Instead of creating space on the outside of your box, like margin does, the padding property creates space on the
inside of your box instead: like insulation.

● Margin

If you want to add space to the outside of an element, you use the margin property. Margin is like adding a cushion
around your element. The margin property is shorthand for margin-top, margin-right, margin-bottom and

margin-left.
Box Model
ُExample
ANALOGY FOR THE CSS BOX MODEL

border

Content area

margin

padding
Sizing
Units

● Px [Pixels]

■ Pixels per screen size to draw the shape on screens

● % [Percentage]

■ Percentage of the actual size

 Border
A border provides a frame for your boxes. In this module find out how to change the size, style and
color of borders using CSS.

● Border : 1px solid green;

The order of values in the border shorthand are border-width, border-style and then, border-color.

● Border-radius : 25px;

To give a box rounded corners

Text
● Font-family:Arial, Helvetica, sans-serif;

● Text-align:center;

● Font-size:10px;

● Text-decoration:underline

● Text-transform:capitalize

● text-shadow: 2px 2px 10px red;

CSS Opacity / Transparency

● The opacity property specifies the opacity/transparency of an element.

● The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent
● Example -> img:hover { opacity: 0.5;}
Display property

● The display property specifies if/how an element is displayed.

● Every HTML element has a default display value depending on what type of element it is. The
default display value for most elements is block or inline.

● We can display item as inline , inline-block , block or none

● We have another property called visibility that also can be used to show or hide elements, but
when using visibility the element will still take up the same space as before. The element will
be hidden, but still affect the layout.
Display ( block & inline ) vs Inline block

● Compared to display: inline, the major difference is that display: inline-block allows to set a

width and height on the element.

● Also, with display: inline-block, the top and bottom margins/paddings are respected, but with

display: inline they are not.

● Compared to display: block, the major difference is that display: inline-block does not add a

line-break after the element, so the element can sit next to other elements.
Thank You!
Lab 1 : Pricing cards style

● Match the cards style but no

need to match the cards to be
aligned behind each other.
Lab 2 : CV style