Essental CSS Concepts

CSS
ESSENTAL CSS CONCEPTS

So in this section we are going cover essential CSS concepts, we need to understand to
build beautiful web pages.
You’ll Learn
 Various ways to provides CSS
 Normalizing CSS
 Selectors
 Colors
 Gradients
 Borders
 Shadows
If you want learn CSS well and become a new JOB DEVELOPER, don’t miss any lessons in this
section.
1- Providing CSS
Let’s talk about three different ways to providing styles.
- Embedded We can use Embedded stylesheets, so we embedded or include

our styles in our html documents
- External stylesheets We can also External stylesheets which means make
our styles in separate files. this have couple benefits.
- Inline styles and we can also use inline styles and with this we can apply a
styles directly to a particular HTML element.
Let’ create paragraph in our HTML document (index.html) .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS</title>
<style>
Here we add our Styling
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
So we have couple element to work with. Next we go to the style section element
<style> </style> and define a rule for our paragraphs.
I am going to the color (orange)

<style>
p {
color: orange;
}
</style>
Save the changes and back to the browser.
<style>
p {
color: orange;
}
</style>
What we have here Embedded stylesheet there is two problems with this style,
a first problems is that they not scalable, so if we have multiple pages, we want our
paragraph to be orange with this approach we have to copy all the styles that we
have here and put them in to Avery single web page. And that is if tomorrow we
decide to change the color of paragraphs, we have to go to every single web page.
And make modification. So this approach is not scalable.
the second problems with this approach is that we have every import concept in
computer science called (Separation of Concerns). So we have different modules for
different concerns.
As we leaned (HTML & CSS) we use HTML to
structure web pages and we use CSS to style them.
These are two different concerns, so we should
separate them.
Let me gave an example.
Thinking of supermarkets in supermarket we have different section with different

types of products, we have section for food, another section for cleaning products,
and imagine if we have supermarket with only single section all the products in the
single section, we could not find anything in that supermarket.
So we want to organize our code like well organize supermarket, this where we use
external stylesheets
External stylesheets, so we take all this style and put them in separate file.
So create a new file called (styles.css), we can call anything the name doesn’t
matter.
Now let’s go to index.html page and link HTML Document with CSS stylesheet, to do
that we use <link> element.
<link rel="stylesheet" href="" />
This element has two attribute

- (rel) relation which determines the type of resource we are
linking this document to in this case (stylesheet).
- (href) here we type relative or absolute URL.
So we are currently in index.html and our external stylesheet is in the same folder
so here we can type (style.css)
<link rel="style
sheet" href="style.c
ss" />
Now save the changes, back to

browser. We have same result.
So these are two different ways provide styles, but they is third way we can use
(Inline styles) to apply styles to particular HTML elements.
So let’s say I added these two paragraph here.
I want make first paragraph (blue) but only the first paragraph, every HTML
element has style attribute and this where we can write one or more styles. So we
can set the color to blue and add (;) semicolon so we can type second CSS property,
so we can say font-weight to bold. Don’t worry about this we will talk it.
<p style="color: blue; font-weight: bold">Lorem ipsum dolor sit amet.</p>
Save the changes, and back to the browser.

So the first paragraph is blue and bold.
2- Normalizing CSS
So as u probably know we have different kind of browsers out there, unfortunately
different browsers render some HTML elements differently.
Now to address this issue, we use popular stylesheet called Normalize CSS
(normalize.com), what this stylesheet does it provide basics default styles for some
HTML Elements,
so they exotically
the same way in
different
browsers.
Normalizing.css
makes browsers
render all
elements more
consistently and
in line with modern standards. It precisely targets only styles that need normalizing.
so go the https://necolas.github.io/normalize.css/ and download it
- Now back to our project we currently have our styles.css file
here. And we add another stylesheet.
- To organize CSS stylesheet make a new folder and add both of
them.
- Let’s go to index.html update the link URL also

<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="css/styles.css" />
- Before like styles.css first we should link normalize.css. so we use link

element.
<head>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
3- Basic Selectors
In CSS we have few different ways to select elements or styling proposes. We can
select by (Type, ID, Class, Attributes)
First let’s get the terminology we write here

body {
margin: 10px;
}
- Body: what we write here is called selector, because this is how we select an
element, now in this example we are selecting an element by its Type which is
the (Body) element. But we can also select an element by its ID.
- We can select elements by their type, class, attribute or ID.

So in index.html let’s create a section by ID of products
<body>
<section id="products"></section>
</body>
Now to style this element, we can go to our stylesheet (style.css) type

(#products) when it’s start by # hash mark so that means we are selecting
by ID.
#products{

}
- We can also select elements by their class for example, in we go the

index.html and add three article in products section with the class of products
<body>
<section id="products">
<article class="product"></article>
</section>
</body>
Now to style each article element we can go to our stylesheet

(.product)
.product{
}
- And here is question for You. What is different between ID and CLASS?
Here is the answer
ID selectors are the most specific selectors because we cannot have

multiple elements with the same ID. Class and attribute selectors are less
specific because we can have many elements with the same class and/or
attributes. Element selectors are the least specific selectors.
So in the real world we cannot have two people with same passport
number.
- So these are the most common way to select elements by (ID, Class,
attributes).
So this is all about basic selector.
4- Relational Selector
We have learned how to select element using basic selector, but we can also select
elements base on the relationship with other elements. Let me show what I mean.
- I am going create <section> with id of products, in this section I am going

add a paragraph <p> with five words.
</section>
Now let’s say we want to style this <p> paragraph, one way is to do it by
given ID or Class, but there is another way, we can start from <section>,
because this section has already id, we can start here and then select <p>
paragraph element here. So our markup will be cleaner.
We go to our stylesheet
(style.css) start with
product section then we
select the paragraph
element.
#products p {
color: orange;
}
So we combining two different selectors, here we say (color: orange),

this is an example of relational selector.
- This rules will be applying to any paragraph elements, inside the product
section.
For example: we add an <article> with <p> paragraph

< section id
=" products">
<p>Lor
e m ipsum do
lo r sit amet
.< /p>
<artic
le >
<p>L
orem ipsum dolor sit amet.</p>
</article>
</section>
This second paragraph also be take (orange) color.
both
paragraph
are orange
- But what if we want to style only the first paragraph , to do that we have, to
type a greater then (>) symbol in between these two selector.
#products > p {
color: orange;
}
See only
First paragraph
Orange
- We have another relational

selector for selecting sibling so
back to index.html, after the
<section>, let’s add one more <p>
paragraph.
<section id="produ cts">
<article>
</article>
</section>
If we want to style this new paragraph element, it’s come after the section.
To do that we add pulse (+) between these two selectors.

#products + p {
color: orange;
}
This will select the paragraph element that comes immediately after the
products section.
If we add another paragraph element, the second element will be not

orange take look.
<article>
</article>
</section>
See only
the third
paragraph
is orange
- But what if we want to style all paragraph come after the <section> we can
replace the pulse (+) symbol with Tilde (~) symbol, now this will select all the
paragraph that are general sibling of the products section.
#products ~ p {
color: orange;
}
See both these

Paragraph is orange
So relational selectors have nice cleaner markup because we don’t have to assignee (ID,
CLASS), to style html elements, but we have two problems with relational selectors.
1- They can be fragile, because they are depended on the location of this
elements in the DOM, so if we move elements around our styles will
break.
2- The second problems they are Not as fast as basic selectors, don’t think
too much about this.
5- Pseudo – class Selectors
Another group of selectors called pseudo selectors, the concept of pseudo selectors
is very useful.
- Let’s define an <article> with two <p> paragraph with some text
<article>
<p class="first">Lorem ipsum dolor sit amet.</p>
</article>
Let’s say we want style the first paragraph and make the font bigger
and italic, here is one way to do it, we can give to this paragraph class
(first) name.
Let’s give the styling.

article .first {
font-size: 140%;
font-style: italic;
}
That’s what
We get.
- We don’t have this (.first) class, because it is unnecessary, it CSS we

Pseudo Classes. That are automatically apply by the browser, so Pseudo
Classes are not real classes, we didn’t define, the browser apply by
default.
I am going to remove the class attribute from paragraph.
<article>
</article>
Back to stylesheet, instead of using (.first) class, we are using a Pseudo

class. All Pseudo class start with colon (:) , here we type :first-child.
article :first-child {
font-size: 140%;
font-style: italic;
}
Look same result

before, and we didn’t
have to assignee a class
to the first paragraph.
What we have here is

called Pseudo class selector, just like we have Class selectors, we also have
Pseudo Class selector, this(:first-child) selector is very useful, but it a little
bit have problems. Let me show you what I mean.
Back to our markup let’s add <h2> heading here, and see what happen.
<article>
<h2>Heading</h2>
<p>Lorem ipsum do
lor sit amet.</p>
</article>
See the first paragraph is

no longer style, the style
we define that apply to the
Heading, because the
Heading is first child of this
article
Let’s verify this (right click) on Heading (go to inspect)
Look it the rules that we define here, this rules are applying to heading
because it is the first-child of the article element.
article :first-child {
font-size: 140%;
font-style: italic;
}
so this is the problems with (: first-child) selector, if we move element

around our CSS rules may break.
So here we can use anther Pseudo class selector call (: first-of-type)

let’s see how this works.
article :first-of-type {
font-size: 140%;
font-style: italic;
}
Look both the Heading and first paragraph got the style we just
define
What’s going here let’s (inspect) the Heading element.
In this <article> we have one heading and two paragraph, this Pseudo
Class selector (:first-of-type) is apply the first element of the different
type, here we have first Heading that’s why this rules is apply to this
element, down the Heading we have two paragraph, and the first
paragraph is receive the style that we just define.
- Back to the stylesheet we want this rules to apply only to the first paragraph
in the article, so here we should specify the paragraph type.
article p:first-
of-type {
font-
size: 140%;
font-
style: italic;
}
Look the first

paragraph is atelic, but the
Heading is not.
So this how (:first-of-type) works , we have two other selectors called
(last-child and last-of-type).
If we want to style the
last paragraph in this
<article> we can say.
article p:last-
of-type {
font-
weight: bold;
color: golden
rod;
}
Look the last

Paragraph is
Bold and goldenrod color
Here we can also use

last-child
article p:last-
child {
font-
weight: bold;
color: goldenro
d;
}
We get the
Same result
- Sometimes we style elements base on the position in the container for
example, let’s say we have Table of List, and we want to highlight all the
(odd) or (even) items. So let’s create.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
So back to stylesheet so here we use

another Pseudo Class selector called
(nth-child() ) this class is like
function in programming,
between parentheses we pass a value
or agreement, if we add (odd), the rules will target all odd items in the
list.
ul li:nth-child(odd) {
color: deeppink;
}
Note that all the odd items

Are pink
- We can also use the (even) to select all event items

ul li:nth-child(even) {
color: deeppink;
}
Note that all the even items
Are pink
So this is all about Pseudo Class next we will learn about Pseudo Elements
6- Pseudo – element selectors

Sometimes we want to styles a part of an element, like the first letter or the first
line of the paragraph this where we are using the Pseudo element selectors.
Let me show how they work.
Let’s define a paragraph with some text.

<p>
Lorem ipsum dolor sit amet consectetur adipisi cin
g elit. Odit, unde?
Consequatur quam rerum incidunt repellat atqu e t
emporibus, nihil, et eius
consequuntur id vel! Perferendis aliquam exerc ita
tionem id qui quis eum.
</p>
Now we want to style the first letter of this

paragraph. So I am selecting the (L) and add it in to <span> . and also give class
(first-letter),
<p>
<span class="first-letter">L</span> ipsum dolor sit amet consectetur
adipisicing elit. Odit, unde? Consequatur quam rerum incidunt repellat
atque temporibus, nihil, et eius consequuntur id vel! Perferendis aliquam
exercitationem id qui quis eum.
</p>
and then we go to the stylesheet and define a rule for this class.
.first-letter {
font-size: 140%;
font-weight: bold;
}
We have seen this style in lot of books.
Note: this first steps are completely unnecessary, because in CSS we have bench of
Pseudo elements for this reason.
So remove the <span>

<p>
Loipsum dolor sit amet consectetur adipisicing elit. Odit, unde?
Consequatur quam rerum incidunt repellat atque temporibus, nihil, et eius
consequuntur id vel! Perferendis aliquam exercitationem id qui quis eum.
</p>
Back to the CSS stylesheet

- Instead of this class (.first-letter) so we type (p) to target the paragraph then
use double colon (::) and then (p::first-letter) , we use single colon (:) for
selecting Pseudo Classes and double colon (::) for pseudo elements.
p:first-letter {
font-size: 140%;
font-weight: bold;
}
Save the
changes,
We get same result before and we didn’t have to add <span> to our markup
- We have another Pseudo element for selectin the first line of the paragraph, so we
use
(p::first-line)
p::first-line {
font-weight: bold;
}
-
If
we select some text by default the background of the selected text become blue.
So we can change it by using the Pseudo element .
::selection {
background-color: palegoldenrod;
}
- We have another Pseudo element for inserting Content before the content of the
element. Let me show what I mean.
p::before {
content: "...";
}
p::after {
content: "...";
}
7- Selectors Specificity
We end of situation, where more than one rule can target a given element and these
rules can have conflict in styles, let me show how browser finger out, what rules
should be applying.
- So let’s define <article> and inside this <article> let’s define <h1> with class
of (highlight).
<article>
<h1 class="highlight">Heading Highlighting</h1>
</article>
- Now back to our stylesheet, let write a couple different rules.
h1 {
color: deeppink;
}
.highlight {
color: dodgerblue;
}
So now both these rules target this <h1> element.
<article>
<h1 class="highlight">Heading Highlighting</h1>
</article>
But which rules is gone apply.
- This is where the selector specificity (Weight) comes to play, each selector has
what we call selector specificity or (Weight). If multiply rules target the same
element the browser will apply the rule that is more Specific.
Multiply Rules More Specific
Element
Element
Lookup this triangle
this what we call the
Specificity Triangle at
the top of this triangle
the (ID selector),
because as you know
we cannot have two
element with same ID
so the ID selector is
very specific, we can
only target a single
element, below the ID
selector we have (Class & attribute selectors) these selector are less specific,
because we can have multiple element with same class or attributes, at next
level we have the (Element selector) because we can have many element a
given type.
- Back to our stylesheet which selector do things more specific the second
selector (. highlight) because we can have many <h1> element but not all this
<h1> element may have the class of (highlight).
h1 {
color: deeppink;
}
.highlight {
color: dodgerblue;
}
so the class selector is more specific.

You see our
heding
dodgerblue
color
- Let me show you something go to the (Inspect), right click on the heading text,
go to inspect .
Apply selector
Overwrite selector
Here in the right side we can see the class selector apply to this element
that set color to (dodgerblue). Below this selector we have element
selector that set color to (deeppink) but this property declaration is cross out.
Because this is overwritten other property declaration.
- Another way to target this element is using the (ID) selecter, so here is our
markup, let’s give this element (ID) of (products) .
<article>
<h1 id="products" class="highlight">Heading Highlighting</h1>
</article>
Now back to our stlysheet, here we can deffine a ruels, with element with ID
of (#products),
#products {
color: green;
}
Now this selector is the most spicfice selector, so our (Heading) is green.
- What if
we
have
two
selectors with equla specificty for exampel

#products {
color: green;
}
#products {
color: brown;
}
Which rules do you think will be apply, the ruls that come last . look 
- Let me show you something very cool in (VSCode), if we hover our mouse
over a selector, we can see its weight or Specificity.
here we have three nu
This first number of left, r

ID selector, in this case we
don’t have ID selector.
The number in the Middle, represent the number of

Class or attributes selectors, again we have Zero
(0), because we don’t have class or attributes
And finally the number on the Right represent, the

number of Element selectors, here we have one
element selector, that why we have one here.
h1 {
color: deeppink;
}
So the specificity of this element is One, and compare this with specificity of
others selectors.
The specificity of this element is (0,1,0) because

we have one Class selector, the total number is
(10)
.highlight {
color: dodgerblue;
}
The reason is our Heading is green is because of the third rules we have apply here
The specificity of this element is (1,0,0) it is
one hundred (100)
#products {
color: green;
}
- So here we can select an element with class of (.highlight) and the id of (#products), so
here we have one Class selector or one ID selector.
.highlight#products {
color: dodgerblue;
}
The specificity of this is (110), so

now this style will be applying. 
8- Inheritance
One of the important concept in CSS, you need to understand the concept of
Inheritance, which means some CSS property by-default inherit value from their
parents, let go a few examples.
- Let’s define a paragraph <p> with some text, now let’s add the
<strong>.
<p>Lorem ipsum <strong>dolor</strong> sit amet</p>
- Back to our stylesheet let’s define a rule for our paragraph <p> element
p {
color: dodgerblue;
}
look
our
<strong> element is blue even though, we didn’t set its color,
this color inheritance in the action.
So the <strong> element is currently being child of our paragraph <p>

element and it has inherited the color property.
Let’s verify this, go to the Inspect
These are the property that are

inherited from the paragraph (Parent)
element
- So with inheritance we didn’t come and set property on Strong element like
this.
strong {
color: dodgerblue;
}
Inheritance help us write less code, but what in this case, we want to stop
the inheritance, we don’t want to inherit this value. So we set value to
(initial). This set the color property to default color which is (black)
p {
color: dodgerblue;
}
strong {
color: initial;
}
- Now let’s look the property that doesn’t get inherited, so her in the paragraph
let’s set the border property.
p {
color: dodgerblue;
border: 1px solid black;
}
strong {
color: initial;
}
We have border
around our
paragraph, but there is no border around strong element, but if we want to
inherit the border to strong element, so we set border to (inherit). Now we can
say we inherit the border property.
p {
color: dodgerblue;
}
strong {
color: initial;
border: inherit;
}
9- Colors
Now let’s talk about colors, in CSS we have a few different ways to represent colors,
we can use by their (Named
colors, RGB Values, HSL Values,
and Hexadecimal Values).
Let’s see
these in action
- So I am going to define a <div> with class of (.box) , now let’s define a rules
give our (.box) width 200px and height 200px and background-color.
<div class="box"></div>
. box{
wi dth: 200px;
he ight: 200px;
background-color: rgb(230, 205, 16) ;
}
RGB (Red, Green, Blue) we can use RGB value to set background-color, and
RGB values start from zero (0) up to (255) (0-255)
Save the changes, and here is what we get.
- And we have another function is called RGBA() Which stand for lpha, so
with this value we can add an extra value and alpha channel used for
transparency. The value for the alpha channel is a decimal point number
between 0 mean (completely transparent) and 1 mean (completely opaque).
so if we use value like (0.5), our box transparent.

.box {
width: 200px;
height: 200px;
background-color: rgba(230, 205, 16, 0.5);
}
so if we have something under, for example image so that image will be visible.
This is very popular technique we use in CSS.
- We can also use Hexadecimal value, hexadecimal is

one of the numeric system, we have Binary systems
that content digits (0,1), and we have Decimal systems
that content digits (0-9) and these are the systems
that represent numbers, Hexadecimal systems is
another systems that content digits (0-9,a-f) ,
number and letters.
We can represent any number in the world using any of these systems.
Lookup this (#e6cd10) Hexadecimal value here we have six (6) characters and
every two characters represent, one of the numbers in the RGB system, so (e6)
represent (Red) and (cd) (Green) and (10) is (Blue), that is the concept behind
this. So instead of using RGB values we can use Hexadecimal value.
.box {
width: 200px;
height: 200px;
background-color: #e6cd10;
}
We have some others color systems also but more useful are
these, most people use Hexadecimal systems, and
Named Colors
because its short and more readable.
10-Gradients
We have learned about Colors, now let’s talk about Gradients, Using the linear-
gradient() and radial-gradient() functions, we can create gradients in CSS. Gradients
are images so they cannot be used as the value of background-color property. We
can use them as the value of background-image or background properties.
- Back to our styles.css sheet, to create gradient we add linear-gradient function

and pass two colors, we can say (dodgerblue,yellow)
<body>
<div class="box"></div>
</body>
.box {
width: 200px;
height: 200px;
background: linear-gradient(dodgerblue, yellow);
}
Here I am using Name colors, but we can also use Hexadecimal colors and
RGB colors
Look we get this beautiful transition from

Blue to Yellow, and by default the transition
is from Top to Bottom, but we can easily change it.
- To change from Top to Bottom, back to our function as the first value or the
first argument, we supply the direction, we can say (to right).
.box {
width: 200px;
height: 200px;
background: linear-gradient(to right, dodgerblue, yellow);
}
Look our gradient start from the left and

goes to the right. We can also target, bottom to right
.box {
width: 200px;
height: 200px;
background: linear-
gradient(to bottom right, dodgerblue, yell
ow);
}
Now look our transition start top left, and goes to the bottom right.
- We can also supply more than two colors at end here,

.box {
width: 200px;
height: 200px;
background: linear-
gradient(to top right, dodgerblue, yellow,
tomato);
}
So this all about linear-gradient
- In CSS we have another type gradient called

(radial-gradient), let’ add it.
Here we call (radial-gradient) function, we give
to colors we can say (white, orange).
.box {
width: 200px;
height: 200px;
background: radial-gradient(white, orange);
}
Look in the middle, we have white circle, and orange

color gradient
- We also have online tools to create

Gradient, they help us easily create
Gradient, and generate the CSS code, here
in google search for (gradient generator),
there is many tools out there, the one that I personally like is
(cssgradient.io). it’s very easily tool use it.
11- Borders
Now let’s talk about Borders, this property takes three values, the first
value border size (10px) and the second value is the start of the border
(solid), the third value is to set the border color (dodblue)
.box {
width: 200px;
height: 200px;
background: orange;
}
- We
can
also
change the border styles to dotted

.box {
width: 600px;
height: 200px;
background: orange;
border: 10px dotted black;
}
- Another popular styles is dashed
.box {
width: 600px;
height: 200px;
background: orange;
border: 10px dashed black;
}
- Border radius (border-radius) is use to make border rounded styles.

.box {
width: 600px;
height: 200px;
background: orange;
border-radius: 40px;
}
See we have around border

- If we want to make circle, so we set value (100%)
.box {
width: 200px;
height: 200px;
background: orange;
border-radius: 100%;
}
See circle, and we can also

Use (50%), for circle
- We can also create others shapes like (starts, triangles,etc)

.box {
width: 200px;
height: 200px;
background: orange;
border-radius: 100% 0 0 0;
}
- To use more shapes, we can search it

Online in google (css shapes)
12- Shadows
In CSS we can easily add shadows around elements using the (box-
shadow) property and add a few values,
- the first value is horizontal destines of the shadow to the element, if we
use positive value (10px) this will move shadow to the right, and if we use
negative value (-10x) this will move the shadow to the left .
the second value is vertical destines of the shadow to the element, if we use
positive value (10px) this will move the shadow to the bottom, and if we use
the negative value (-10px) this will move the shadow to the top.
.box {
width: 200px;
height: 200px;
background: orange;
box-shadow: 10px 10px;
}
Look we have move 10px right and 10px

down
- if we want to change the color

.box {
width: 200px;
height: 200px;
background: orange;
box-shadow: 10px 10px tomato;
}
See the shadow color changed

- now what if we want to make this shadow a little bit softer, so here we can
add a third value.
.box {
width: 200px;
height: 200px;
background: orange;
box-shadow: 0px 0px 30px tomato;
}
See the box-shadow now is softer
CSS Cheat Sheet
Basic Selectors
article All article elements
.product Elements with the product class
#products The element with the ID of products
a[href=“…”] Anchors with the given href
a[href*=“google”] Anchors whose href contains google
a[href^=“https”] Anchors whose href starts with https
a[href$=“.com”] Anchors whose href ends with .com
Relational Selectors
#products p All p elements inside #products
#products > p All p elements that are direct children of
#products + p #products
#products ~ p The p element immediately after #products
(sibling)
All p elements after #products (siblings)
Pseudo-class Selectors
article :first-child The first child of article elements
article :first-of-type The first occurrence of elements of different type
article p:first-of-type The first p element inside article elements
article :last-child
article :last-of-type
article :nth-child(odd)
article :nth-child(even)
Pseudo-element Selectors
p::first-letter The first letter of every p element
p::first-line The first line of every p element
::selection Any selected element
p::before To insert content before the content of p elements
p::after To insert content after the content of p elements
Colors
#fcba03 Hexadecimal value
rgb(252, 186, 3) RGB value
rgba(252, 186, 3, 0.5) Semi-transparent RGB value
hsl(44, 98%, 50%) HSL value
hsla(44, 98%, 50%, 0.5) Semi-transparent HSL value
Gradients
background: linear-gradient(blue, yellow);
background: linear-gradient(to bottom right, blue, yellow);
background: linear-gradient(45deg, blue, yellow);
background: linear-gradient(45deg, blue, yellow 30%);
background: radial-gradient(white, yellow);
background: radial-gradient(circle, white, yellow);
background: radial-gradient(circle at top left, white, yellow);
Borders
border: 10px solid blue;
border-width: 10px 20px 30px 40px; /* top right bottom left */
border-radius: 5px;
border-radius: 100%; /* full circle */
Shadows
box-shadow: 10px 10px;
box-shadow: 10px 10px grey;
box-shadow: 10px 10px 5px grey;
Terms
Embedded stylesheets Pseudo-element selectors
External stylesheets Radial gradients
Hexadecimal colors Relational selectors
HSL colors RGB colors
Inheritance Selectors
Inline styles Selectors specificity
Linear gradients Separation of concerns
Normalizing CSS
Pseudo-class selectors

Essental CSS Concepts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Essental CSS Concepts

Uploaded by

Copyright:

Available Formats

CSS

ESSENTAL CSS CONCEPTS

- Embedded We can use Embedded stylesheets, so we embedded or include

Let’ create paragraph in our HTML document (index.html) .

I am going to the color (orange)

Save the changes and back to the browser.

Let me gave an example.

Thinking of supermarkets in supermarket we have different section with different

This element has two attribute

Now save the changes, back to

Save the changes, and back to the browser.

- Let’s go to index.html update the link URL also

- Before like styles.css first we should link normalize.css. so we use link

First let’s get the terminology we write here

- We can select elements by their type, class, attribute or ID.

Now to style this element, we can go to our stylesheet (style.css) type

- We can also select elements by their class for example, in we go the

Now to style each article element we can go to our stylesheet

Here is the answer

ID selectors are the most specific selectors because we cannot have

So this is all about basic selector.

- I am going create <section> with id of products, in this section I am going

So we combining two different selectors, here we say (color: orange),

For example: we add an <article> with <p> paragraph

This second paragraph also be take (orange) color.

- We have another relational

To do that we add pulse (+) between these two selectors.

If we add another paragraph element, the second element will be not

See both these

5- Pseudo – class Selectors

Let’s give the styling.

- We don’t have this (.first) class, because it is unnecessary, it CSS we

Back to stylesheet, instead of using (.first) class, we are using a Pseudo

Look same result

What we have here is

See the first paragraph is

Let’s verify this (right click) on Heading (go to inspect)

so this is the problems with (: first-child) selector, if we move element

So here we can use anther Pseudo class selector call (: first-of-type)

What’s going here let’s (inspect) the Heading element.

Look the first

Look the last

Here we can also use

So back to stylesheet so here we use

Note that all the odd items

- We can also use the (even) to select all event items

6- Pseudo – element selectors

Let’s define a paragraph with some text.

Now we want to style the first letter of this

We have seen this style in lot of books.

So remove the <span>

Back to the CSS stylesheet

- Now back to our stylesheet, let write a couple different rules.

So now both these rules target this <h1> element.

But which rules is gone apply.

Multiply Rules More Specific

so the class selector is more specific.

selectors with equla specificty for exampel

This first number of left, r

The number in the Middle, represent the number of

And finally the number on the Right represent, the

The specificity of this element is (0,1,0) because

The specificity of this is (110), so