BASIC CSS

. What is CSS?
○ CSS stands for Cascading Style Sheets and is used to style HTML documents.
○ CSS separates the content of an HTML document from its presentation.
○ CSS allows you to control the appearance of text, images, and other HTML
elements.
○ CSS is a powerful and flexible tool that can be used to create stunning and
responsive web pages.
4
. Adding CSS to an HTML document
○ CSS can be added to an HTML document in three ways: in a separate stylesheet file,
in the head section of an HTML document, or inline within HTML elements.
○ Using a separate stylesheet file is the recommended method, as it keeps the CSS
code separate from the HTML code and makes it easier to maintain and update.
○ To link to an external stylesheet file, you can use the <link> tag in the head section
of your HTML document. Example: <link rel="stylesheet" href="style.css">
○ To add CSS code directly to the head section of your HTML document, you can use
the <style> tag. Example: <style> h1 { color: red; } </style>
○ Inline CSS is added directly to HTML elements using the style attribute. Example:
3
<h1 style="color: red;">Hello World!</h1>
. CSS syntax
○ CSS syntax consists of selectors, properties, and values. A selector targets an
HTML element, a property specifies what aspect of the element to style, and a value
sets the value of the property.
◆ Example: h1 { color: red; }
◆ Selector: h1
◆ Property: color
◆ Value: red
○ Multiple properties can be applied to a single selector, separated by semicolons.
Example: h1 { color: red; font-size: 24px; }
2
. CSS selectors
○ CSS selectors are used to target HTML elements for styling.
○ Selectors can target elements based on their tag name, class, ID, or other
attributes.
◆ Example selectors:
◆ Tag name: h1 { ... }
◆ Class: .my-class { ... }
1
 ◆ ID: #my-id { ... }
5
◆ Attribute: input[type="text"] { ... }
. CSS properties
○ CSS properties are used to specify the style of an HTML element.
◆ Common properties include:
◆ color: sets the color of text
◆ font-size: sets the size of text
◆ background-color: sets the background color of an element
◆ margin: sets the margin around an element
◆ padding: sets the padding within an element
◆ border: sets the border around an element
○ Example: h1 { color: red; font-size: 24px; }
. The box model
○ The box model is an important concept in CSS that defines how HTML elements are
rendered on the page as boxes with content, padding, borders, and margins.
○ The width and height of an element are calculated based on its content, padding,
and border.
○ Example: div { width: 300px; height: 200px; padding: 10px; border: 1px solid black; }
. Advanced CSS techniques
◆ CSS supports many advanced styling techniques, such as:
◆ Responsive design: using media queries and flexible layouts to create
websites that adapt to different screen sizes
◆ Animations and transitions: creating dynamic and engaging animations and
transitions using CSS
◆ CSS frameworks: using pre-built CSS frameworks, such as Bootstrap and
Foundation, to create modern and responsive websites more easily.
Flexbox
● Flexbox is a layout model in CSS that allows you to create flexible and responsive layouts.
● Flexbox works by defining a flex container and its flex items.
○ Properties that can be applied to a flex container include:
○ display: set to flex to enable the flexbox layout
○ flex-direction: sets the direction of the flex container (row or column)
○ justify-content: aligns flex items along the main axis
○ align-items: aligns flex items along the cross axis
○ flex-wrap: allows flex items to wrap to a new line when there is not enough space
○ Properties that can be applied to flex items include:
○ flex-grow: specifies how much a flex item should grow to fill available space
 ○ flex-grow: specifies how much a flex item should grow to fill available space
○ flex-shrink: specifies how much a flex item should shrink to fit available space
○ flex-basis: specifies the initial size of a flex item before it grows or shrinks
● Example:
● <div class="container">
● <div class="item">Item 1</div>
● <div class="item">Item 2</div>
● <div class="item">Item 3</div>
● </div>
●

● .container {
● display: flex;
● justify-content: center;
● align-items: center;
● }
●

● .item {
● flex: 1;
● }
Animation
● CSS animations allow you to create animations and transitions in CSS without the need for
JavaScript.
● Animations can be triggered by a user action, such as a hover or click, or they can be set
to run automatically.
○ Properties that can be used for animation include:
○ animation-name: specifies the name of the animation
○ animation-duration: specifies the duration of the animation
○ animation-delay: specifies the delay before the animation starts
○ animation-iteration-count: specifies how many times the animation should repeat
○ animation-direction: specifies the direction of the animation
○ animation-timing-function: specifies the timing function for the animation
○ animation-fill-mode: specifies what happens when the animation is not running (e.g.
retains the final state or reverts to the initial state)
● Example:
● .box {
● width: 100px;
● height: 100px;
● background-color: red;
● background-color: red;
● animation-name: myanimation;
● animation-duration: 2s;
● animation-delay: 1s;
● animation-iteration-count: infinite;
● animation-direction: alternate;
● animation-timing-function: ease-in-out;
● animation-fill-mode: forwards;
● }
●

● @keyframes myanimation {
● 0% {
● transform: translateX(0);
● }
● 50% {
● transform: translateX(100px);
● }
● 100% {
● transform: translateX(0);
● }
● }