Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sedaklnc/css-refresher-notes
https://github.com/sedaklnc/css-refresher-notes
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/sedaklnc/css-refresher-notes
- Owner: sedaklnc
- Created: 2022-09-14T09:35:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-05T13:20:50.000Z (over 2 years ago)
- Last Synced: 2024-11-08T05:03:52.178Z (about 2 months ago)
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :mushroom: css-refresher-notes :mushroom:
This is a quick refresher of CSS concepts.
|Content No | Content|
|----|-------------|
|1 | [Selectors](https://github.com/sedaklnc/css-refresher-notes#selectors)|
|2 | [Selectors-Pseudo-Class](https://github.com/sedaklnc/css-refresher-notes#selectors-pseudo-class)|
|3| [Css-Pseudo-Elements](https://github.com/sedaklnc/css-refresher-notes#css-psuedo-elements)|
|4 | [Width](https://github.com/sedaklnc/css-refresher-notes#width)|
|5 | [Height](https://github.com/sedaklnc/css-refresher-notes#height)|
|6 | [Border](https://github.com/sedaklnc/css-refresher-notes#border)|
|7 | [Padding](https://github.com/sedaklnc/css-refresher-notes#padding)|
|8 | [Padding-Individual-Sides](https://github.com/sedaklnc/css-refresher-notes#padding---individual-sides)|
|9 | [Margin](https://github.com/sedaklnc/css-refresher-notes#margin-baby_chick)|
|10 | [Background-Repeat](https://github.com/sedaklnc/css-refresher-notes#background-repeat--shell)|
|11| [Text-Align](https://github.com/sedaklnc/css-refresher-notes#text-align-alien)|
## Selectors ##
| Selectors | Example | Example Description |
| :--- | :---: | ---: |
| * | * | selects all elements |
| element | p | select all p elements |
| .class | .number | selects all elements with class = 'number' |
| #id | #userName | select the element with id = 'userName' |
| .classOne.classTwo | .nameOne.nameTwo | selects all elements with both nameOne and nameTwo within the class attributes |
| element.class | div.number | select all div elements with class='intro'|
| element#id | div#number | select all div elements with id='number'|
| element,element | div,p | selects all div and p elements |
| element>element | div > p | select all p elements where the parent is div element|
| [attribute] | [name] | selects all elements with a name attribute |
> It selects all elements with the attr name is 'name' <
```ruby
[name]{
color:red }
This is title
CSS Notes
HTML Notes
JS Notes
```
> Selects all div elements with name is html <
```ruby
div[name='html']{
color:blue }
This is title
CSS Notes
HTML Notes
JS Notes
```
> Selects all span elements inside ul elements and with attr name is css
```ruby
ul span[name='css']{
background-color: brown;
}
- CSS
- python
- ruby
- go
```
> Selects span elements inside ul and with a name attr. containing the word "title". i means it doesnt have case sensitive.(ruby and css will selected)
```ruby
ul span[name ~= 'title'i ]{
background-color: brown;
}
- CSS
- python
- ruby
- go
```
## Selectors Pseudo Class ##
| Selectors | Example | Example Description |
| :--- | :---: | ---: |
| :active | a:active |Matches when an item is being activated by the user.|
| :hover | a:hover | select links on mouse over|
| :link | a:link | represents an element that has not yet been visited |
| :visited | a:visited | represents an element that has already visited |
| :focus | a:focus | generally triggered when the user clicks or taps on en element |
| :target | #a:target | selects the current active #a element|
| :checked | s:checked | selector represents any radio, checkboz, or option element that is checked or toggled|
| :disabled | input:disabled| An element is disabled if it cant be activated |
| :required| input:required | represents any input,select element that has the required attr set on it |
> :focus ->Makes the necessary style definitions when the specified html element is focused.Generally used in input elements.If u want to use with div elements you have to use with tabindex attr. (click tab and watch it)
```ruby
div:focus{
background-color: red;
}
HTML
CSS
JS
PYTHON
```
> :target CSS pseudo-class represents a unique element with an id matching the URL's fragment.
```ruby
:target{
color: cadetblue;
background-color: yellow;
}
- HTML
- PYTHON
- C#
- C
- CSS
- HTML
```
> :not() Defines the style for all html elements except the specified html element.Firstly you have to create specific style for these elements.
```ruby
h3{
background-color: red;
}
:not(h3){
background-color: aquamarine;
}
This is Title
This is content
This is resources
```
> :checked : defines the style when the specified html element is selected. returns to normal when deselected. If you use checked attr it means checkbox is selected
```ruby
input:checked{
width: 20px;
height: 20px;
}
Hobbies
Books
Foods
```
> an element is disabled if it can't be activated.
```ruby
input:disabled{
border: none;
background-color: cornflowerblue;
}
Member-no:
```
> have to enter required info if elements have any required attr.
```ruby
:required{
width: 100px;
border: 10px solid rosybrown;
}
Phone-num:
```
> When you write number between 10 and 20 the number color will be red the others will be default color
```ruby
input:in-range{
color: red;
}
```
## CSS PSUEDO ELEMENTS
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements.
| Name | Description |
| :--- | :---: |
| first-letter | Defines a style to the first character of the specified html element |
| first-line | Defines a style to the first line of the specified html element |
| before | Defines style by assigning content before the specified html element|
| after| Can be used to insert some content after the content of an element.|
| selection|Matches the portion of an element that is selected by a user.|
> How to use ::first-letter -> First letters colors will change which are H and C
```ruby
p::first-letter{
color: red;
}
div::first-letter{
color: rgb(19, 195, 31);
}
CSS
```
> How to use ::first-line ? First-line is responsive pseudo element when you make smaller the website first-line applied to the first line again
```ruby
::first-line{
color: cornflowerblue;
}
HTML is skeleton of the web
```
> ::before psuode element usage as you see below before the weather cond we will see -sun- charachter
``` ruby
button::before{
content: '\2600';
color: red;
}
Weather condition
```
>:: selection usage : when you select the div element's content color will be red
``` ruby
::selection{
color: red;
}
```
## WIDTH
> The width CSS property sets an element's width
| Name | Description |
| :--- | :---: |
| auto | The browser will calculate and select a width for the specified element. |
| % | Defines the width as a percentage of the containing block's width. |
| inherit| Inherits this property from its parent element|
| initial| Sets this property to its default value.|
```ruby
div#bir{
background-color: black;
width: 80%;
}
div#iki{
background-color: red;
width: inherit;
}
div#uc{
background-color: blue;
width: inherit;
}
div#dort{
background-color: yellow;
width: inherit;
}
```
> The output of the above code is the picture below.
## HEIGHT
> Sets the height of html elements.Content is important
| Name | Description |
| :--- | :---: |
| auto | The browser will calculate and select a width for the specified element. |
| % | Defines the width as a percentage of the containing block's height. |
| inherit| Inherits this property from its parent element|
| initial| Sets this property to its default value.|
```ruby
div#main-value{
background-color: aqua;
height: 100px;
}
div#temp-value{
height: 25px;
}
div#one{
background-color: brown;
height: inherit;
}
div#two{
background-color: yellow;
height: inherit;
}
```
output is : an intermediate element is used to avoid the height of the inherited height main element.
## BORDER
> The border shorthand CSS property sets an element's border. Syntax= line-width || line-style|| color. we have to indicate style parameters. but the other parameters if we dont indicate it will set the default value.
| ParamterOne| ParameterTwo| ParameterThree |
| :--- | :---: | :---: |
| :boom: Length| :boom: Style| :boom: Color |
| Length| none |color |
| Initial| hidden | |
| Inherit| solid| |
| Thin| double| |
| | dashed| |
| | dotted| |
| | groove| |
| | ridge| |
| | inset| |
| | outset| |
```ruby
#one{
border: 2px none red;
}
#two{
border: 2px hidden red;
}
#three{
border: 2px solid red;
}
#four{
border: 2px double red;
}
#five{
border: 2px dashed red;
}
#six{
border: 2px dotted red
}
#seven{
border: 2px groove red;
}
#eight{
border: ridge red;
}
#nine{
border: 2px inset red;
}
#ten {
border: 2px outset red
}
This is NONE!
This is HIDDEN!
This is SOLID!
This is DOUBLE!
This is DASHED!
This is DOTTED!
This is GROOVE!
This is RIDGE!
This is Inset!!
This is OUTSET!!
```
Let's get to know the style parameters
## PADDING
Padding is used to create space around an element's content, inside of any defined borders
| Paramter| Description|
| :--- | :---: |
| Length| The size of the padding as a fixed value. |
| %| The size of the padding as a percentage|
| Initial| Returns the inital value |
| Inherit| set to the computed value of the parent element|
lets give an example
If you want to see an image like above we need to do some calculations. Lets start with html code
```ruby
Topic is Padding
```
lets continue with child's style
```ruby
div#two{
width: 108px;
height: 18px;
border: 1px solid red;
padding: 10px;
}
```
> Output is
okey lets cont with calculation. What will be the parent value which id is one.
WIDTH = child width + shild border-left + child border-right + padding = 108 + 10 + 1+1 = 130
HEIGHT = child height + child border-top + child border-bottom + child padding + 18 + 1+1 +10 + 30
RESULT WILL BE
```ruby
div#one{
width: 130px;
height: 40px;
border: 1px solid blue;
padding:30px;
}
```
## Padding - Individual Sides
The padding-top: CSS property sets the height of the padding area on the top of an element.
The padding-bottom: CSS property sets the height of the padding area on the bottom of an element.
The padding-right: CSS property sets the width of the padding area on the right of an element.
The padding-left: CSS property sets the width of the padding area to the left of an element.
LETS DO IT :bird:
```ruby
Padding-top
Padding-left
Padding-bottom
Padding-right
```
HTML part is done and lets see CSS part
```ruby
p#top{
width: 79px;
height: 18px;
border:1px solid red;
padding-top: 25px;
}
p#right{
width: 88px;
height: 18px;
border:1px solid red;
padding-right: 25px;
}
p#bottom{
width: 104px;
height: 18px;
border:1px solid red;
padding-bottom: 25px;
}
p#left{
width: 80px;
height: 18px;
border:1px solid red;
padding-left: 25px;
}
```
what will be the output :eyes:
## MARGIN :baby_chick:
The margin CSS shorthand property sets the margin area on all four sides of an element
| Paramter| Description|
| :--- | :---: |
| Length| The size of the margin as a fixed value. |
| %| The size of the margin as a percentage|
| Initial| Returns the inital value |
| Inherit| set to the computed value of the parent element|
| Auto| set to the computed value of the parent element|
> lets understand better :whale2:
```ruby
div{
border:5px solid red;
background-color: red;
}
```
When we write like this code the output will be
okey as you can see line has space with right to left and top size because of body's margin.If we rewrite code like this
```ruby
body{
margin: 0px;
}
div{
border:5px solid red;
background-color: red;
}
```
> yup its okey right now. So when we write menubar or footer firstly reset the margin
## Background-repeat :shell:
| Paramter| Description|
| :--- | :---: |
| repeat| tile the image in both directions. This is the default value|
| Space| tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges|
| Round|tile the image in both directions. Never crop the image unless a single image is too large to fit. |
| no-repeat|don’t tile, just show the image once|
| repeat-x|tile the image horizontally|
| repeat-y| tile the image vertically|
| initial| returns initial value|
| inherit| set to the computed value of the parent element|
> Lets understand with an example.
```ruby
THIS IS REPEAT
THIS IS Space
THIS IS Round
THIS IS no-REPEAT
THIS IS REPEAT-x
THIS IS REPEAT-y
```
HTML PART IS DONE
CSS PART IS STARTED
```ruby
p#one{
width:800px;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: repeat;
color: brown;
font-size: 60px;
font-weight: bolder;
}
p#two{
width:800px
;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: space;
}
p#three{
width:800px
;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: round;
}
p#four{
width:800px
;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: no-repeat;
}
p#five{
width:800px;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: repeat-x;
}
p#six{
width:800px;
height:300px;
border: 5px solid orangered;
background-image: url('photo.jpg');
background-repeat: repeat-y;
}
```
CSS PART IS DONE..
output will be like below :jack_o_lantern:
## Text-align :alien:
The text-align property is specified in one of the following ways
| Paramter| Description|
| :--- | :---: |
| left| The inline contents are aligned to the left edge of the line box|
| right| The inline contents are aligned to the right edge of the line box|
| justify|The inline contents are justified|
| center| The inline contents are centered within the line box|
Lets give an example
Okey as you can see above the last one and the fourth one both of them are justify. But justify But justify is not clear for small text.Lets code it
```ruby
div#center{
width: 750px;
height: auto;
border: 2px solid red;
text-align:center;
}
div#right{
width: 750px;
height: auto;
border: 2px solid red;
text-align:right;
}
div#left{
width: 750px;
height: auto;
border: 2px solid red;
text-align:left;
}
div#justify{
width: 750px;
height: auto;
border: 2px solid red;
text-align:justify;
}
div#justifyBetter{
width: 750px;
height: auto;
border: 2px solid red;
text-align:center;
}
```