CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started.
Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to yellow:
p {
color: yellow;
}
To link a CSS file to HTML page, we use link tags as shown.
< link href="style.css" rel="stylesheet">
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Selecting Using ID
#para1 {
text-align: center;
color: blue;
}
In this example only div elements with class="box" will be blue and center-aligned:
div.box {
text-align: center;
color: blue;
}
You can read more about CSS basics Here
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- Content - The content of the box, where text and images appear.
- Padding - Clears an area around the content. The padding is transparent.
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
Here's an example:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
The default layout of elements as per their type as listed above is called the Normal Flow of a document
We have position property of CSS to override the Normal flow.
This pairs with the CSS offset properties (left,right,top,bottom) to set how many pixels(or any other unit) away the element has to be positioned from where it is in the Normal Flow.
It accepts the following values.
position: static;
Static positioning is the default that every element gets. It just means "put the element into its normal position in the document flow — nothing special to see here."position:relative;
This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page. position:absolute;
Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides.position:fixed;
This works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport. position: sticky;
This is basically a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it's scrolled to a certain threshold (e.g., 10px from the top of the viewport), after which it becomes fixed.
They help you make your site responsive to different screen size.
The @media can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
@media screen and (min-width: 900px) {
div {
width:100px;
}
}
You can test your positioning skills on this website.
In order to animate an element, you need to add the Animation properties in its styling.
The actual appearance of the animation is defined by the @keyframe rule.
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties.
This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation,
which is done using the @keyframes at-rule. The sub-properties of the animation property are:
Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a
percentage to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation.
div{
width:100px;
height:100px;
position:relative;
background:yellow;
animation-name: move;
animation-timing-function: linear;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes move{
0%{
left:0;
}
50%{
left:90vw;
}
100%{
left:0;
}
}
FlexBox makes it easier to design flexible responsive layout structure without using float or positioning.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand)
to fill additional space or shrink to fit into smaller spaces.
To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of
display on the parent element of the elements you want to affect.
.flex-container{
display: flex;
flex-direction: column;
}
The element we've given a display value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page,
but its children are laid out as flex items.
When elements are laid out as flex items, they are laid out along two axes:
- The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
- The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
Flexbox provides a property called flex-direction that specifies which direction the main axis runs
(which direction the flexbox children are laid out in). By default this is set to row.
One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children
will overflow their container, breaking the layout.
One way in which you can fix this is to add the following declaration to your flex-container rule
flex-wrap: wrap;
Flexbox also has a feature for changing the layout order of flex items without affecting the source order.
This is another thing that is impossible to do with traditional layout methods.
- By default, all flex items have an order value of 0.
- Flex items with higher specified order values will appear later in the display order than items with lower order values.
- Flex items with the same order value will appear in their source order. So if you have four items whose order values have been set as 2, 1, 1, and 0 respectively, their display order would be 4th, 2nd, 3rd, then 1st.
- The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.
You can read more about FlexBoxes in detail here.
Made With ❤️ by PT