Css is an acronym for cascading style is a styling language for HTML documents. It is used to define the appearance of the html elements.
In other words, we would call it the make up for the HTML
How do you attach CSS TO HTML?
External css
To attach a css file externally, you need to create a separate file, save it with .css extension and attach it on the head section of your html document. Note that the href attribute is used to define the path to your css file. Thus you must ensure that the pathname is correct.
<html>
<head>
<link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
<!--the body-->
</body>
<html>
Internal css
When using internal css, the styles are defined inside the <style> tags on the head section.
<head>
<style>
body{
background-color: blue;
}
</style>
Inline css
The styles are defined inside the opening tag of the element as follows.
<h1 style="color:red;">This is the first heading</h>
Selectors
Selectors are used to select the code block you want to apply the styles.
syntax;
Selector{
Style: value;
}
They can be divided into five;
1. simple selectors
They include;
-Element name e.g. p, h1, span, div
<p>Content</p>
p {
color: red;
}
-Id e.g. #title, #first-par. Note: that the id name should start with a # symbol.
e.g;
<p id='first-par'>Content</p>
#first-par {
color: red;
}
-Class selector e.g. .title Note that the class name is preceded by a dot.
eg;
<p class='par'>Content</p>
.par{
color: red;
}
2. Combinator selector
They indicate relationship between elements. They include
-Descendant selector e.g. div p{…..} selects all the paragraph elements in div
-Child selector (>) e.g. div >p{……} selects all the p elements that are children of a <div>
-adjacent sibling ( + ) selects an element that is directly after another specific element e.g. div + p{…..} selects all the paragraph after the div element
3. Pseudo-class selector
They are used to add styles to selectors only after meeting a certain condition
Syntax
Selector: pseudo-class {
Property: value;
}
Example:
a:hover {
color: #FF00FF;
}
4. Pseudo-element selector
selects only a specific part of an element
Syntax
Selector: pseudo-class {
Property: value;
}
Example:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Flex box and GRID
Flexbox is a one dimensional layout design where you specify if the items should be horizontally or vertically aligned.
References: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid is a two dimension layout design i.e rows and columns.
https://css-tricks.com/snippets/css/complete-guide-grid/
Transitions
Transitions in CSS provide a way to control the speed of a changing property in css.
For instance, if you increase the width of an object it occurs instantly. However, with transitions you can decrease this speed such that you observe every change as it happens.
Ref:
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
-https://www.w3schools.com/css/css3_transitions.asp
Animations
CSS animations makes it possible to animate different styles without using JavaScript or a library
Ref:
-https://www.w3schools.com/css/css3_animations.asp
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Responsive web design
Responsiveness is the art of ensuring that a web page looks good in all devices. That is, the web design should adjust accordingly depending on the screen size, orientation and the platform.
The common ways to achieving responsiveness is use of flexible grids, media queries, and setting the viewport.
MEDIA QUERIES
Media queries specify styles to be applied when certain conditions are meant.
Example;
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Breakpoints
CSS breakpoints are points where the website content responds according to the device width
In the previous example, when the screen is resized to a maximum width of 600px, it will adopt to the given styles. i.e 600px is the breakpoint.
Top comments (0)