There are different ways you can stylize text in css. Like making text bold.
I can also make text indented. Choose line heightword spacing, text decoration, AND MAke lowercase/uppercase
'font-weight' property needs to have a weight that is imported for the font in case one has imported a font. Can import fonts from 'google fonts'. In the 'font-family' property you write a series of fonts (in case the font is not available in the browser then it picks the next in line.)
For color can use name ('red') or rgb ('rgb(255, 0, 0)') or hex ('#ff0000') or hsl ('hsl(0, 100%, 50%)').
Width/Height can be adjusted using vw/vh (20vw is width 20% of screen), px (pixels on screen) and % (% of parent element). Resize window to see how they act differently.Calc can be used as so: 'width:calc(20vw-10px);'
Margin -> Border -> Padding -> Content. Shorthand: border/margin/padding: top right bottom left; .
Shorthand: 'border: [width,px] [style] [color];'
block element (p)
inline element (span) inline element (a)
In the following made block elements (div,p,h[#]) into inline and inline (a,img,span) into block. Block: skip line for next element, take whole width of screen-default. Inline: on same line,up/down margins not resppected. Inline-Block: same as inline but with up/down margins respected.
Both 'div's have the same width and height written for them. They both have the same margins and padding. These make the first 'div' bigger, so orignal width/height aren't true. With 'border-box' it adjusts the size so that the original width/height (space takes by element) stay true.
In the html you can see the order of the elements:
display:none; (the element is gone, doesn't take space)
opacity:0; (the opacity is transparent)
visibility:hidden; (the element still takes space but is no longer seen)
Text on Image
Text on Image
The first image has a repeat property.
---
'background-repeat: repeat-x;' repeats once only on x axis.
'background-repeat: space;' has space between images.
'background-repeat: round;', when repeated, there won't be 1/2 or 1/3 of the image leftover, it will be rounded.
---
The first image has 'background-size:contain;'
The second and third have 'background-size: cover;'.
We will be seeing the effects of the float property using the images. The first image has a float to the left. The second has a float to the right. However, this paragraph has cleared the right float, therefore it is to it as if the image doesn't have a right float.
There is also 'overflow:hidden;' -> makes so that overflowing elements are hidden. 'overflow:auto' -> makes so parent element adjusts to fit float children (what is done here)
Remember parent ( in this case grandparent div, 'content' div) has property position:relative;
I am a paragraph with 'position:relative;' myself. Therefore I can move relative to my original position.
I am a paragraph with a span that is absolute. I have position:absolute; - bottom:0; And thus, it moves to the first parent that has the relative property (div-'content')
There is also 'position:fixed;' which stays in the same place relative to the viewport (Like the background image and the navbar).
---
There is also 'position:sticky; (top:0;)' which sticks to the page as the user scrolls past it.
Change screen size and see how we change. This is done with media queries. Elements can look and act differently depending on the scree size selected.
It is usually better to start with the default being the smallest screen size and the media queries adjusting for the bigger screen.
Also, you can pick a media query for landscape when it comes to phones.
As you can see the middle image is above the other two images, this is by using the 'z-index' property. The lower the index, the more behind it is.
This is going to be a paragraph that will be affected by various pseudo elements. I can for example affect the first line of the paragraph or the first letter. Add something before or after the paragraph as well. Also stylize selection even for differet elements
Pseudo elements have been added to the left paragraph.
---
Select some text from a paragraph/span element and see that it's stylized.
I'm first (paragraph) element I'm span element
I'm second paragraph element I'm span element
This is a link This is second linkTry hovering over the paragraph, spans and links to see how pseudo classes work
Hover over elements to see Transform effects.
Hover over elements to see Transition effects.
Refresh page to see Animations.
Go to Font Awesome webpage and you can get icons fromt there. Just remember to add the needed link in the 'head' element of the html.
Can add shadow using 'text-shadow:[]' and 'box-shadow:[]' property.
Attribute selectors allow you to select all elements that have a certain attribute. This is useful especially for styling forms (give all text inputs a gray background ex.)
This is a paragraph with the property: 'word-wrap:break-word;'. This is so that when there is a veryveryveryveryveryveryverylongword it breaks apart instead of overflowing.
This is a paragraph and inside I have a span I'm the Span who has property: 'writing-mode: vertical-rl;'
Various text effects. Hover over the first h4 element to see the overflowed text that's hidden.
Attribute selectors allow you to select all elements that have a certain attribute. This is useful especially for styling forms (give all text inputs a gray background ex.)