CSS Notes

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

Why Use CSS?

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>

How To Add CSS?

When a browser reads a style sheet, it will format the HTML document according to the information
in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS - separate CSS files

• Internal CSS - with in the html file
• Inline CSS - with in html opening tags.

External CSS - most preferred way

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.

Internal CSS – sometimes

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.
Inline CSS - maximum try to avoid

An inline style may be used to apply a unique style for a single element.

CSS Syntax

CSS Selectors:

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

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

Tag, class, id

Combinator selectors (select elements based on a specific relationship between them)

Attribute selectors (select elements based on an attribute or attribute value)

CSS Colors:

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color inspiration - https://colours.neilorangepeel.com/category/gray/

CSS Background Color:

The CSS background properties are used to add background effects for elements.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS Borders:

The CSS border properties allow you to specify the style, width, and color of an element's border
CSS Border Style:

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

CSS Margins:

Margins are used to create space around elements, outside of any defined borders.

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

CSS Height, Width and Max-width:

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

The CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element.

It consists of: margins, borders, padding, and the actual content.

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

Important: When you set the width and height properties of an element with CSS, you just set
the width and height of the content area. To calculate the full size of an element, you must also
add padding, borders and margins.

CSS Outline

An outline is a line drawn outside the element's border.

CSS Text format

• Text Color
• Text-align
• Text Decoration
• Text-decoration-line: overline;
• Text-decoration-color: red;
• Text Transformation

CSS Fonts

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to
choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.

Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.

Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.

Cursive fonts imitate human handwriting.

Fantasy fonts are decorative/playful fonts.

.p1 {

font-family: "Times New Roman", Times, serif;

CSS Links

With CSS, links can be styled in many different ways.

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link

• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

CSS List Properties

• list-style-type
• list-style-image property specifies an image as the list item marker
• list-style-position property specifies the position of the list-item markers (bullet points).
• colors/background

CSS Tables

The look of an HTML table can be greatly improved with CSS:

To specify table borders in CSS, use the border property.

If you need a table that should span the entire screen (full-width), add width:
100%
The width and height of a table are defined by the width and height properties

The text-align property sets the horizontal alignment (like left, right, or center)
of the content in <th> or <td>.

The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.

To control the space between the border and the content in a table, use the
padding property on <td> and <th> elements

CSS Layout –
The position Property: The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

CSS Layout –

The z-index Property: The z-index Property, When elements are positioned, they can overlap other
elements.

The z-index property specifies the stack order of an element (which element should be placed in
front of, or behind, the others).

CSS Layout –

Overflow: The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

CSS Layout –

The display Property: The display property is the most important CSS property for controlling layout.

Properties:

o Block - is used to display html elements as block level

o inline - is used to display html elements as inline level
o inline-block - ?
o none - is used to hide an element
o Visibility - it will hide element but occupies element space

CSS Layout –
Overflow: The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

CSS Opacity / Transparency

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

Eg - show text with background - on box with image

CSS Layout - float and clear

The CSS float property specifies how an element should float.

The float property is used for positioning and formatting content e.g. let an image float left to the
text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text). This is
default
• inherit - The element inherits the float value of its parent

• Center the things - padding,

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

• ::first-line Pseudo-element
• ::first-letter Pseudo-element
• ::before Pseudo-element
• ::after Pseudo-element
• ::marker Pseudo-element
• ::selection Pseudo-element
CSS Specificity

What is Specificity?

If there are two or more CSS rules that point to the same element, the selector with the highest
specificity value will "win", and its style declaration will be applied to that HTML element.

Specificity Hierarchy

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

• Inline styles - Example: <h1 style="color: pink;">

• IDs - Example: #navbar
• Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
• Elements and pseudo-elements - Example: h1, ::before

CSS The! important Rule

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific
property on that element!

One way to use !important is if you have to override a style that cannot be overridden in any other
way. This could be if you are working on a Content Management System (CMS) and cannot edit the
CSS code. Then you can set some custom styles to override some of the CMS styles.

CSS flexbox

The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017)
aims at providing a more efficient way to lay out, align and distribute space among items in a
container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’
width/height (and order) to best fill the available space (mostly to accommodate to all kind of display
devices and screen sizes). A flex container expands items to fill available free space or shrinks them
to prevent overflow.

Flexbox layout is most appropriate to the components of an application, and small-scale layouts,
while the Grid layout is intended for larger scale layouts.

Flexbox properties

• display:flex;
• flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap: nowrap | wrap | wrap-reverse;
 • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
| start | end | left | right
• align-items: stretch | flex-start | flex-end | center
• gap: 10px 20px; /* row-gap column gap */
• row-gap: 10px;
• column-gap: 20px;
• order: 5;
• flex-grow: 4;

CSS Media Queries

CSS Media queries are a way to target browser by certain characteristics, features, and user
preferences, then apply styles or run other code based on those things.

Perhaps the most common media queries in the world are those that target particular viewport
ranges and apply custom styles, which birthed the whole idea of responsive design.

A major component of responsive design is creating the right experience for the right device

* For Mobile Devices – 320px — 480px

* iPads and Tablets – 481px — 768px

* Laptops and small screen – 769px — 1024px

* Large screens and Desktops – 1025px — 1200px

* TV and Extra Large Screens – 1201px and more