CSS
The language that we use to style an HTML document is CSS. CSS specifies how HTML elements should appear.
CSS syntax
selector{ property : value;}
- the selector means who = who do you want to change
- property means what = what do you want to change
- value means how = how do you want to change
always keep your property: value pair in alphabetical order
h1{
color: red;
font-size: 200px;
}
CSS box model
css box model is a series of positioning properties designed to help with layout
Each of the property works in a different way and positons the items with different spacing
The box model is the most commonly used way to position items
Padding
- the space between the content and border
CSS Paddings - Individual sides
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
works on clockwise pattern (top right bottom left)
for example,
padding: 50px 30px 50px 80px;
/* is equal to */
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
Border
- border is the divider between padding and the margin.
- It can be styled using a CSS property called border.
<p style="border:5px solid red;">Red border</p>
CSS border style
border-style property specifies what kind of border to display.Learn more about border-style from here
Margin
- Margins are used to create space around elements, outside of any defined borders.
CSS Margins - Individual sides
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
works on clockwise pattern (top right bottom left)
for example,
margin: 100px 100px 150px 80px;
/* is equal to */
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
CSS selectors
selectors are ways of grabbing and manipulating HTML
Different selectors have different application
Element selector
you can select entire elements without any special characters
This applies to all of the elements with that tag on the page
it ranks on the bottom of the specificity index
Class selectors
select elements with a certain class name
can be used on any and all elements with that class name
can be used multiple times and is select with "." symbol
Id selectors
select elements with a certain Id
can be used on any and all elements with that id name
unlike classes, it can be only used on one element at a time,
and is selected with the "#" symbol. However it is possible to use
multiple time
ID vs Class selectors
ID selectors are a little bit different from the class selectors although they do
have some similarities
you will use the ID to identify element where there is an only a single one of them on a particular page
particular ID only be used once on the page.
you cant have more than one id for particular elements
id overrides the class and class override the element
inline CSS override id and class
inline style > ID > CLASS > element/tag
ID can only be used once while class can be used multiple times
pseudo selectors
a special type of selector that is used commonly for the interactivity of the website.
only is visible when something is done on the Website.
:hover
:first-child
:last-child
:nth-child(n)
:only-child
:link
:visited
Advance selectors
Adjacent sibbling selectors
h2 + a{
color:red;
}
General common combinator/selector
/* every button that is after the text area but they are in the same parent */
textarea ~ button {
color: pruple;
}
Child selectors
every single li inside ul
ul > li {
color:tomato;
}
Descendent selectors
/* descendent selectors */
ul li {
color: mediumseagreen;
}
Attribute selectors
The [ attribute ] selector is used to select elements with a specified attribute.
a[attribute="value"] {
background-color: yellow;
}
Types of attribute selectors
img[src^="../images/"] {
border: 10px solid black;
width: 300;
height: auto;
}
img[src$="../images/"] {
border: 10px solid black;
width: 300;
height: auto;
}
img[src*="../images/"] {
border: 10px solid black;
width: 300;
height: auto;
}
h2[class~="article-subtitle"] {
background: black;
color: rgb(0, 255, 123);
}
CSS comments
Comments on css starts with /* and ends with */
/* single line */
/*
multi
line
*/
CSS colors
CSS text color
<p style="color:Tomato;">Hello there!! This text is in tomato color</p>
CSS border color
<p style="border:5px solid Tomato;">Hello there!! My border is in tomato color</p>
CSS background colors
<h1 style="background-color:Tomato;">Hello there!! I am tomato color</h1>
body{
background-color:Tomato;
}
CSS background properties
background-color
body{
background-color:Tomato;
}
background-image
body {
background-image: url("some_image.png");
}
background-repeat
body {
background-image: url("some_image.png");
background-repeat: repeat-x;
}
NOTE: To repeat an image horizontally, set background-repeat: repeat-x and to repeat an image vertically, set background-repeat: repeat-y and to not repeat and image set background-repeat: no-repeat;
background-attachment
background-attachment property specifies whether the background image should scroll or be fixed
/* background image will be at fixed position */
body {
background-image: url("some_image.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
/* background image will scroll with the rest of the page */
body {
background-image: url("some_image.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
background-position
background-position property sets the starting position of a background image.
learn more here about all background properties
CSS height and width
Height and width properties are used to set the height and width of an element
CSS font
font size
font-size property sets the size of the text
p {
font-size: 90px;
}
font family
font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers and OS.
p {
font-family: "Times New Roman", "Courier New", Times, serif;
}
font style
/* font-style property is mostly used to specify italic text.*/
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
/*font-weight property specifies the weight of a font*/
p.normal {
font-weight: normal;
}
p.boldd {
font-weight: bold;
}
/*font-variant property specifies whether or not a text should be displayed in a small-caps font*/
p.normal {
font-variant: normal;
}
p.caps{
font-variant: small-caps;
}
Float
The CSS float property specifies how an element should float.
float:right;
float:left;
float:none;
float:inherit;
clear
The CSS clear property specifies what elements can float beside the cleared element and on which side.
clear:right;
clear:left;
clear:none;
clear:inherit;
Display
display:none;
Two different display :
- Inline
- Block
display:inline;
display: inline-block;
CSS position
position property specifies the type of positioning method used for an element.
position: static;
HTML elements are positioned static by default.
"position: static;" is not positioned in any special way; it is always positioned according to the normal flow of the page
div.static {
position: static;
border: 3px solid green;
}
position: relative;
position: relative; is positioned relative to its normal position.
div.relative {
position: relative;
right: 10px;
border: 3px solid green;
}
position: fixed;
position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:20px;
border: 2px solid red;
}
position: absolute;
position: absolute; is positioned relative to the nearest positioned ancestor
div.relative {
position: relative;
width: 500px;
height: 500px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 50px;
right: 0;
width: 400px;
height: 150px;
border: 3px solid red;
}
position: sticky;
position: sticky; is positioned based on the user's scroll position
div.sticky {
position: sticky;
top: 0;
background-color: red;
border: 5px solid green;
}
CSS Flexbox
- flexbox stands for flexible box
- It is a display type that comes to a range of properties allowing you to arrange items easily
- It is an alternative to using displays,floats and other layout properties
Flexbox components
- flexbox element is split into two main parts: the containers and the items
- containers are the parent elements
- flex items are the child elements
Flex direction properties
The flex-direction property defines in which
direction the container wants to stack the flex items.
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
flex-direction: row-reverse;
Flex-wrap properties
The flex-wrap property specifies whether the
flex items should wrap or not.
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
flex-wrap: row wrap;
Justify-content Property
The justify-content property is used to align the flex items:
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
CSS Flex Items
The direct child elements of a flex
container automatically
becomes flexible (flex) items.
The order Property
The order property specifies the order of the flex items.
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Flex-grow Property
The flex-grow property specifies how much a flex item
will grow relative to the rest of the flex items.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
Flex-shrink Property
The flex-shrink property specifies how much a
flex item will shrink relative to the rest of the flex items.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Flex-basis Property
The flex-basis property specifies the initial length of a flex item.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Flex Property
The flex property is a shorthand property for the
flex-grow, flex-shrink, and flex-basis properties.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
Align-self Property
The align-self property specifies the alignment for the selected
item inside the flexible container.
The align-self property overrides the default alignment
set by the container's align-items property.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Shrink, Grow and Basis
The flex-shrink CSS property sets the flex shrink factor of
a flex item. If the size of all flex items is larger
than the flex container, items shrink to fit according
to flex-shrink.
The flex-grow CSS property sets the flex grow factor of a flex item's
main size.
The flex-basis CSS property sets the initial main size of a
flex item. It sets the size of the content box unless
otherwise set with box-sizing.
Grid
- Is more manual providing you with more tools to layout a container
- It is also very focused on providing tool for both dimension(width and height)
whereas flexbox is only focused on width
.grid-container {
background-color: white;
margin: 10px;
height: 500px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto;
/* start end center space-evenly*/
/* justify-content: start; */
/* justify-content: end; */
justify-content: space-around;
align-content: center;
}
.grid-item {
color: white;
font-size: 30px;
text-align: center;
width: 70px;
line-height: 40px;
margin: 10px;
}
Grid coloumn and row gap
grid-column-gap: 100px;
grid-row-gap: 100px;
grid-gap:column row;
Grid column row and area
The grid-column property sets the width of the column of a grid item.
The grid-row property sets the height of the row of a grid item.
The grid-area property sets the area of a grid item. It consists of the width of the column & height of the row of a grid item.
GRID vs Flexbox
- similar to flexbox grid is a display type that can be used to activate certain type of layout feature in container element
- They are both alternative to other layout features available in css.
Top comments (0)