CSS

CSS
CSS Basics
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document
written in HTML.
Desired Appearance
A paragraph with a red text color
CSS Ruleset
p{
color: red;
Anatomy of a CSS Ruleset
p - selector
color - property
red - value
Important Parts of the Syntax
* Each ruleset must be wrapped in curly brackets ({})
* You must use colon (:) to separate the property from its value or values in eac declaration.
* You must use a semicolon (;) to separate each declaration from the next one.
p{
color: red;
width: 500ppx;
border: 1px solid black;
Selecting Multiple Elements
p, li, h1 {
color: red;
}
Types of CSS Selectors
* Element selector
* ID selector
* Class Selector
* Attribute selector
* Pseudo-class selector.
Selectors allow us to grab a particular element within our html page for us to style them or define their
properties.
Element Selector
p{
color: red;
Id Selector
#my-id {
margin: 5px;
Class Selector
my-class {
margin: 5px;
NOTE: id selectors are only applied to a single element (i.e it's a unique identifier) but a class selector
can be applied to different elements in the same class (i.e elements that have similar properties).
Element, Class and ID Selectors
<p class="my-class">Test text</p>
<div id="my-id">Test text 2</div>
Attribute Selector
img[src] {
height: 100;
In the attribute selector above, you want to select all images with a source (src) attribute to them and
then apply that height (having provided the the link to where all those images are located)
Pseudo Selector
a:hover {
color: blue;
What the pseudo selector does is to grab all link elements from the html page and when you hover (i.e.
when that action happens) you apply the color "blue" to the elements.
And attribute selector can be applied in our html as shown:
<img src="images/icon.png" alt="Test" />\
ADDING CSS TO HTML, CSS TIPS
We have three ways to achieve adding CSS to html:
* Inline Styles
* Internal Style
* External Styles
Adding an inline style:
<p style="color: blue;">My Text</p>
Adding an internal style:
<head>
<style>
h1 {
color: blue;
margin-left: 20px;
}
</style>
</head>
Adding External style:
<head>

<link href="styles/styles.css" rel="stylesheet">
</head>
External styles are styles that are in a different location, so you want to link to them, hence you need to
provide a link to where they are located.
* The best practice for styling an html document is the external stylesheet.
* Use inline CSS to make minor modifications to your elements.
* When you specify more than one CSS type to an element, the style for that item follows the cascading
rule.
Note that when you define different styles for the same element, say different colours for same
element, the last one defined will take effect on the element.
Also, we define internal styles in the header tag.
LET'S WRITE OUR FIRST CSS STYLES
Note that we said in applying our external styles, we create another folder, say styles, then create a file
index.css where we are going to put our external styles. Now, for them to be applied, we have to go
back to our html file and link it. An example of linking external styles is shown below:
<link href="./assets/styles/index.css" rel="stylesheet" />
Note that "./" represents our root folder. "rel" regards represents "relationship" and thus must always
be provided after stating the address of the external styles.
Note also that sometimes, we might want to apply different styles to different elements. We can use
inline Styles to do this, but where they are many and we just want to do everything in our external
styles, we use the id selector. Here, we name the elements in our html file using id=" " (and we put the
id name we want within the quotes), and then going to our file containing our external styles (index.css),
we, grab the id from our html page using #footer-p {}, where "footer-p" is the id name we provided in
our html page and then we now provide the styles we want for that particular element inside the curly
brackets. Hence, an id selector can be used to uniquely style a particular element.
Remember just as we said, we can use the class selector to group and style all the elements we want to
style as a block. Here, in our html page, we name the class, then in our index.css (external styles) page,
we denote the class with a dot, say .title (where title is the class name) and we apply all the styles we
want. Note that we can now apply these styles for the class selector for other elements by giving them
the same class name in our html page.
Padding is the space within an element. Margin is the space around an element.
In our external styles file (index.css), we can decide to grab entire html and style it, using:
html, body {
We will define all the styles we want inside the curly brackets.
If we want to grab element inside another element, say to grab an "a" element inside a "nav" element,
we use:
nav a{
In our index.css, we can style a class selector, say we have a class called "main", as shown below:
.main {
If say we have two class selectors, say "main" and "nav" that we want to nest their styling together, we
use:
.nav, .main {
CSS VARIABLES
CSS variables or custom properties reduce repeatability and also allows you to write smarter and more
usable kind of roll sets within your CSS or style sheets.
/* Declare a custom property */
element {
--main-text-color: brown;
}
/* Use in a selector */
selector {
color: car(--main-text-color)
Global Scope
:root {
--main-bg-color: brown;
Note that the global scope will apply to the entire html page.
":root" is the pseudo selector.
"bg-color" us background color
Note that in order to make changes to your website, go to your defined custom properties and change it
there and all changes will be applied to all the elements that will be used in custom properties value.
Advantages of Using CSS Variables
* Easier reading, no repetition.
* Great for creating custom color themes.
* Easy to get started.
CSS Layout (Grid)
CSS layout is defining how different content or different elements and their content are arranged in an
HTML page and how we could actually achieve that with CSS.
We have three main types of layout:
* Block and Inline
* Grid
* Flexbox
Block is where each element is on its own line, then inline is where we have blocks or content next to
each other.
We create a grid container by declaring display: grid or display: inline-grid on an element.
/* Grid display */
.grid-container {
display: grid;
/* Inline grid display */
.grid-container {
display: inline-grid;
Grid Styles
* A parent section container with three div child elements:
<section class="grid-container">
<div>One</div>
<div>Two</div>
<div>Three</div>
</section>
* We now make the . grid-container section a grid container.
/* Grid display */
. grid-container {
display: grid;
Grid Tracks
These are basically the space between different kinds of grid lines.
Grid Columns
Let's add the grid-template-columns property, then defining the size of the column tracks.
/* Grid display */
. grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
Grid Rows
Let's add the grid-template-rows, then defining the size of the column tracks.
/* Grid display */
. grid-container {
display: grid;
grid-template-rows: 200px 200px 200px;
Note that with grid-template-rows you are defining the height of the grid elements, while grid-template-
columns define the width.
The fr Unit
The fr (fraction) unit references a fraction of the available space in the grid container.
/* Grid display */
. grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
You can also mix fixed and flexible sizes as shown below:
/* Grid display */
. grid-container {
display: grid;
grid-template-columns: 200px 1fr 1fr;

}
Note that what the styling "1fr 1fr 1fr" means is that the columns (or rows) divides the available space
equally among themselves.
The Repeat ()
Large grids with many tracks can use the repeat() notation.
/* Without the repeat() notation */
. grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* With the repeat() notation */
. grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
The repeat () notation just improves the way we write. The repeat () notation can also be used to
achieve a lot of styling patterns as shown below.
* Repeat notation can be used for a part of the track listing.
/* With the repeat() notation */
. grid-container {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
We use grid-auto-rows to ensure that tracks created in the implicit grid are of a given size.
/* Using grid-auto-rows */
. grid-container {
display: grid;
grid-auto-rows: 200px;
Grid minmax()
The minmax() function allows one to set the minimum sizes.
/* Using grid-auto-rows with minmax() */
. grid-container {
display: grid;
grid-auto-rows: minmax(100px, auto);
Grid Lines
We have row lines, which indicates where a row begins and ends, and also column lines which indicates
where a column begins and ends.
Grid Cells
These are the specific spaces that have been defined within a grid.
Grid Areas
This refers to cells grouped together.
Grid Gutters
Grid gutters or alleys or spaces between grid cells can be created using the column-gap and row-gap
properties, or the shorthand, gap.
/* Using column-gap and row-gap or gap */
. grid-container {
display: grid;

grid-auto-rows: minmax(100px, auto);
column-gap: 10px;
row-gap: 15px;
CSS LAYOUT (FLEXBOX)
We create a flexbox container by declaring display: flex or display: inline-flex on an element.
/* Flex display */
.flex-containter {
display: flex;
/* Inline flex display */
.flex-containter {
display: inline-flex;
Note that flex is blocked, while inline-flex shows that you can have another inline element next to it.
Flex Direction
Flex provides a property called flex-direction which specifies the direction the flexbox children are laid
out in.
/* Flex direction */
.flex-containter {
display: flex;
flex-direction: column;
We can also lay out flex items in a reverse direction using row-reverse and column-reverse values.
/* Flex direction */
.flex-containter {
display: flex;
flex-direction: row-reverse;
Flex Wrap
We use flex-wrap to prevent flex children from breaking out of their container.
/* Flex wrap */
.flex-containter {
display: flex;
flex-wrap: wrap;
/* Or use the flex-flow shorthand */
. flex-containter {
display: flex;
flex-flow: row wrap;
Flex wrap makes sure that every flex element or every flex item fits within the flexport container as
much as possible without breaking out of it.
Flex Sizing
We sue the flex the flex property to control what propertion of space flex items wake up compared to
other flex items.
/* Flexbox sizing */
.flex-item {
flex: 1;
/* Flexible sizing with min size set */
.flex-item {
flex: 1 200px;
Flexbox Alignment
You can also use the flexbox features the align flex items along the main or cross axis.
/* Flexbox Alignment */
. flex-containter {
display: flex;
align-items: centre;
justify-content: space-around;
You can override the align-items behaviour for individual flex-items by applying the align-self property to
them.
/* Flexbox align-self */
.flex-item: first-child {
align-self: flex-end;
Flexbox Ordering
We use the order property to change the layout order of flex items without affecting the source order.
/* Flexbox Ordering */
.flex-item: first-child {
order: 1;
CSS MEDIA QUERIES
Some of the most common use cases are:
* To conditionally apply styles based on features like device types or screen sizes.
* Building responsive websites.

Targeting media types with media queries
/* Target print devices */
@media print { ... }
/* Target screen and print devices */
@media screen, print { ... }
/* Target specific viewport sizes */
@media (max-width: 768px) { ... }
/* Combine type and/or features */
@media (min-width: 30cm) and (orientation: landscape) { ...}
CSS ANIMATION
Animation makes it possible to animate transition from one CSS style configuration to another.
* They are easy to use for simple animations; you can create them without even having to know
JavaScript.
* The animations run well, even under moderate system load. Simple animations can often perform
poorly in JavaScript.
The animation shorthand property applies an animation between styles.
The animation property is specified as one or more single animations, separated by commas.
/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state |

name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* @keyframes name | duration */
animation: slidein 3s;
CSS @keyframes
* At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign (@).
* The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence.
We can't animate anything if we don't have the @keyframes specified.
@keyframes slidein {
from {
transform: translateX(0%);
to {
translateX(100%);
Examples:
Making text slide along the browser window
p{
animation-duration: 3s;
animation-name: slidein;
from {
margin-left: 100%;
width: 300%;
to {
margin-left: 0%;
width: 100%;
}
* Making it repeat
p{
animation-iteration-count: infinite;
from {
margin-left: 100%;
width: 300%;
to {
margin-left: 0%;
width: 100%;
* Adding another keyframe
p{
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
to {
margin-left: 0%;
width: 100%;
NOTES
* JavaScript is used to add interactivity to the websites and web applications or HTML pages created.
* HTML is the markup language used to define the contents displayed on the pages that make up the
websites and web applications.
* CSS is the styling tool or the styling technology that is used to dictate or define the appearance of
these content (html content) into the web applications or websites.

CSS

Uploaded by

Document Information

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

CSS

Uploaded by

Copyright:

Available Formats

CSS

A paragraph with a red text color

Anatomy of a CSS Ruleset

Important Parts of the Syntax

* Each ruleset must be wrapped in curly brackets ({})

border: 1px solid black;

Selecting Multiple Elements

Types of CSS Selectors

Element, Class and ID Selectors

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

<div id="my-id">Test text 2</div>

And attribute selector can be applied in our html as shown:

<img src="images/icon.png" alt="Test" />\

ADDING CSS TO HTML, CSS TIPS

We have three ways to achieve adding CSS to html:

Adding an inline style:

<p style="color: blue;">My Text</p>

Adding an internal style:

Adding External style:

<link href="styles/styles.css" rel="stylesheet">

* Use inline CSS to make minor modifications to your elements.

Also, we define internal styles in the header tag.

LET'S WRITE OUR FIRST CSS STYLES

<link href="./assets/styles/index.css" rel="stylesheet" />

/* Declare a custom property */

":root" is the pseudo selector.

"bg-color" us background color

Advantages of Using CSS Variables

* Easier reading, no repetition.

* Great for creating custom color themes.

* Easy to get started.

CSS Layout (Grid)

We have three main types of layout:

* Block and Inline

/* Inline grid display */

* A parent section container with three div child elements:

* We now make the . grid-container section a grid container.

grid-template-columns: 200px 200px 200px;

grid-template-rows: 200px 200px 200px;

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: 200px 1fr 1fr;

/* Without the repeat() notation */

grid-template-columns: 1fr 1fr 1fr;

/* With the repeat() notation */

grid-template-columns: repeat(3, 1fr);

* Repeat notation can be used for a part of the track listing.

/* With the repeat() notation */

grid-template-columns: 20px repeat(6, 1fr) 20px;

grid-template-columns: repeat(3, 1fr);

The minmax() function allows one to set the minimum sizes.

/* Using grid-auto-rows with minmax() */

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: minmax(100px, auto);

This refers to cells grouped together.

/* Using column-gap and row-gap or gap */

grid-template-columns: repeat(3, 1fr);

CSS LAYOUT (FLEXBOX)

We create a flexbox container by declaring display: flex or display: inline-flex on an element.

/* Inline flex display */

/* Or use the flex-flow shorthand */

flex-flow: row wrap;

/* Flexible sizing with min size set */

CSS MEDIA QUERIES