CSS for Design
Beginners Guide to CSS
Managing and creating a space, applying colors and learning the fundamentals of CSS you’ll be able to do anything from an existing CSS to writing your own.
What is CSS?
CSS Stands for Cascading Stylesheets. It is the fundamental part of web design, without it you can only display content, text and white background in the HTML Document but with CSS you can style your HTML Document and Take it to the next level!
Where do CSS live?
CSS basically lives in 3 places but we choose wherever we want her.
- Internal CSS
- Inline CSS
- External CSS
CSS Syntax
CSS Looks like this given below figure!
CSS Values and Units
We use CSS property values not only using keywords like {color : red;} but also using numerical values or alphabetical values. Also some numerical values have units.
Units are of two types —
Relative and Absolute — Relative values contain %, rem, em, vw, vh, etc. which are not fixed and flexible according to the screen size while Absolute unit values contain px, cm, mm, pt, etc. which are fixed and aren’t flexible according to screen size.
Some of the CSS properties with Relative and Absolute unit values —
width: 80%;
height: 100vh;
border-width: 5px;
animation-iteration: 5;
line-height: 1.5;
The color property values in CSS
We have 4 value types in CSS for colors —
Color Keyword — red, blue, green, gray, brown, orange, pink, etc.
Hex Code — These are codes of colors to be used. They contains the numbers from 0–9 and A-F. For example — #000 which is a black color, #fff which is a white color, #f52e5d which is a pink shade, etc.
Rgb/Rgba — These are color codes which are formed from red, blue & green (rgb) and rgba conatins an alpha value which is for opacity of color. These are 3-comma separated values between 0–255 or 0% — 100%.
For example — rgb(0,0,0) which is a black color, rgb(0,0,0,0.5) which is a black color with 50% of opacity, rgb(255, 255, 255) which is a white color, etc.
Hsl/Hsla — These are color codes with are formed from hue, saturation and lightness(hsl) and hsla contains an alpha value which is for opacity of color.
For example — hsl(270deg, 60%, 70%) which has 270deg of hue, 60% of saturation and 70% of lightness, hsla(270deg, 60%, 70%, 0.6) contains an opacity of 60%.
Are you thinking that you need to remembers all these code??
Not at all you have some websites you can get the codes from. Here are some of them —
https://css-tricks.com/examples/HSLaExplorer/
CSS Selectors, Inheritance and Specificity
Selector word refers to the the type of selection of an element through which we can apply styles to something. There are so many CSS Selectors. They are of different types —
Universal Selector (*)— This applies style to every element in the body.
Type Selector () — This applies to every element of that type.
Class Selector(.) — This applies to every element with that particular class.
Id Selector (#) — This applies to only one element with that particular id.
Descendant Selector ()— This applies to every given element inside that selector.
Grouping Selector ( , )— In this we can group so many elements with a comma and use the style which will be applied to every element selected.
Combining Selector — In this we can choose combined selectors. When we have two classes in the same HTML element.
Child Selector (>) — This selects every given child element inside that particular parent element.
Adjacent Sibling Selectors (+) — This selects only first element after that particular parent element.
General Sibling Selectors (~) — This selects every element after that particular parent element.
We can also write color: inherit or any values to inherit if we have that same property and value labeled in it’s parent element. It will take that value from it’s parent element using inherit value.
Specificity — CSS Elements have priorities according to which they style an element. Here’s how they rank!
Id selector overwrites the class selector.
Class selector overwrites the type/ element selector.
Type selector overwrites the universal selector.
Descendant selector overwrites the type selector and not class or id selector.
If even then also we want an element to not overwrite then we have !important keyword but this considered as a bad practice because then we have a fixed value and we want everything to be flexible. So better be careful with using the selectors.
CSS Pseudo-class selectors, pseudo elements and links
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Lets see some links and pseudo elements —
:link — This style is added to every link that has a link i.e. an href attribute.
:hover — This style is added to every linkwhen we hover over that element using mouse.
:active — This style is added to the link which is active i.e. when we click any link.
:focus — This style is added to the link that is focused.
:visited — This style is added to every link which we have visited.
Pseudo elements —
::after — is used when we want to add any content after an element
::before — is used when we want to add any content before an element
::first-letter — is used when we want to style only the first letter of that particular element
::selection — is used when we want the color to be that as we select the element using mouse.
::marker — is used in lists to style the markers before a list item.
::placeholder — is used to style the placeholder of input element.
Also there are soo many pseudo elements that we can use to select a particular part of an element and customize it. Checkout the MDN Docs for more.
CSS Box Model
The box model which creates the layouts in the web page.
The first thing in Box Model is display property
display: block;
display: inline-block;
display: inline;
Block means in a box as a blocked element and Inline means in a single line.
Inline Block means in a single line but each in the form of block.
Then we have 5 CSS Properties that makes a box model —
Width, Height, Margin, Padding & Border
That’s how we write it in code using some longhand and shorthand properties.
CSS Typography for the web
Typography means the readability and styling of text in CSS.
We have some properties and font family to improve that.
You can choose any font from fontsinthewild.com and import them in your HTML or CSS document.
Some of the typography properties in CSS are —
The meaning of them is understandable by their name.
CSS Floats
Floating of elements and creating layouts are done with float property of CSS.
float: left; — Shifts the element to the left
float: right; — Shifts the element to the right
clear: both; — Clears the float property when added to the element that we don’t want to float.
Sometimes using float-left to two elements in the container collapses the container’s height, then we need to add overflow: hidden; property to the container which solves everything.
CSS Position and z-index
Positioning in CSS is an integral part. Position property contains relative, absolute, sticky, static and fixed.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
An element with position: relative; is positioned relative to its normal position.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
An element with position: absolute; is positioned relative to the nearest positioned ancestor.
An element with position: sticky; is positioned based on the user's scroll position.
The top, right, bottom, and left properties are used to position the element.
Output —
CSS Flexbox
Flexbox is ideal when you want the items to be in a single line i.e. in rows.
For creating a flexbox you have display: flex; or display: inline-flex; property
Output —
As you do flex, items will be in one line. Now we have more properties to make flexbox flexible according to us and screen size.
The properties that we use in the flex container —
flex-direction: column; — This does all the items to display as a column i.e. in a single vertical line
flex-wrap: wrap; — This allows items to be in multiple rows as the screen size changes. This is actually used to build responsiveness.
justify-content: center; — This allows items to be at the center horizontally.
align-items: center; — This allows items to be at the center vertically.
The properties that we use in the flex item —
flex: grow shrink basis; — This contain three properties in flex.
flex-grow: 1; — This determines how the flex items will expand if there’s extra space in the container.
flex-shrink: 1; — This determines how flex items will shrink if there isn’t enough space in the container.
flex-basis: 100px; — This determines the initial width of the flex items.
CSS Grid
Grids are ideal for layouts that contain rows and columns.
For this we use display: grid; or display: inline-grid; property.
As we do display grid, nothing changes. It remains as it is
After this we have some properties to make it a grid actually.
There are two types of grids explicit and implicit grids.
Explicit Grids use grid-template-columns and grid-template-rows
Implicit Grids use grid-auto-columns and grid-auto-rows
When a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.
Also we have some more properties to make grids more advanced.
gap: 10px; — This allows grid-items to have a gap of 10px.
CSS Responsive Design & Media Queries
There are 3 factors for designing responsive —
Fluid Layout — means using relative values and units i.e. use 50% instead of 500px.
Flexible Images — means using responsive picture elements, sizes attribute, srcset attributes & the CSS property of max-width: 100%;
Media Queries — uses the @media rule to include a block of CSS properties only if a certain condition is true.
CSS keyframes
The @keyframes rule specifies the animation code.
They are used like to — from and 0% — 100%
to or 0% specifies the initial state of animation and from or 100% specifies the end of animation and we can also add anything in between.
CSS Variables
Variables in CSS? Yes you read it write. We use :root a global selector that contains all the properties that we gonna use in the elements.
And in every element you want that property just write var( — white-color);
If you want to change a particular color in the whole page then just change it once in the global selector and it will affect everywhere you have mentioned it.
That’s how we write and use it in any element we want to add that particular style to.
For a Detailed Video Tutorial, Watch this series of CSS in our YouTube Channel — CroCoding
Conclusion
After completing this tutorial, you should have a solid foundation for coding in CSS.
Now, you can practice building a HTML & CSS Project.
Once you’re confident with HTML & CSS, you can move to JS for interactions.
