CSS (Cascading Style Sheets) is a language used for styling web pages. It works in conjunction with HTML to add colors, layouts, fonts, and other visual elements to a webpage. In this lesson, we’ll cover some of the basics of CSS and how to use it to style your web pages.
Syntax
CSS is written in a syntax that includes selectors, properties, and values. The selector is used to identify the HTML element that you want to style. The property is the attribute that you want to change, and the value is the new value you want to set for that attribute.
Classes and IDs
You can use classes and IDs to identify specific elements in your HTML code. Classes are used to apply a specific style to a group of elements, while IDs are used to apply a specific style to a single element.
Stylesheets
You can write CSS code directly in your HTML file, but it’s best practice to separate your CSS code into a separate stylesheet. This makes it easier to manage your styles and ensures that your styles are consistent across your website.
Box Model
CSS uses a box model to determine the size and position of HTML elements. The box model consists of four elements: margin, border, padding, and content. The content is the actual content of the element, while the padding is the space between the content and the border. The border is the line that surrounds the element, and the margin is the space between the border and the next element.
Responsive Design
With CSS, you can create a responsive design that adapts to different screen sizes. This is done using media queries, which allow you to apply different styles based on the screen size. This is important because it ensures that your website is accessible and usable on a wide range of devices, from desktops to smartphones.
Here is a list of some commonly used CSS tags:
color – Sets the text color of an element
background-color – Sets the background color of an element
font-size – Sets the size of the font
font-family – Sets the font family of the text
text-align – Sets the alignment of the text
border – Sets the border of an element
padding – Sets the padding inside an element
margin – Sets the margin around an element
height – Sets the height of an element
width – Sets the width of an element
display – Sets how an element is displayed
float – Floats an element to the left or right of its container
position – Sets the position of an element
top – Sets the top position of an element
left – Sets the left position of an element
right – Sets the right position of an element
bottom – Sets the bottom position of an element
z-index – Sets the stack order of an element
opacity – Sets the opacity of an element
text-decoration – Sets the text decoration of an element (underline, line-through, etc.)
background-image – Sets the background image of an element
background-repeat – Sets how a background image is repeated
background-position – Sets the position of a background image
background-size – Sets the size of a background image
box-shadow – Sets the shadow of an element
text-shadow – Sets the shadow of the text
border-radius – Sets the rounded corners of an element
box-sizing – Sets how the width and height of an element are calculated
overflow – Sets how content that overflows an element should be handled
visibility – Sets whether an element is visible or hidden
font-weight – Sets the weight of the font
line-height – Sets the height of a line of text
text-transform – Sets how text is capitalized
text-indent – Sets the indentation of the first line of text
white-space – Sets how white space inside an element is handled
word-wrap – Sets whether long words can be broken onto multiple lines
list-style-type – Sets the style of a list marker (bullet, number, etc.)
list-style-image – Sets an image as the list marker
list-style-position – Sets the position of the list marker (inside or outside the list item)
cursor – Sets the type of cursor to be displayed when hovering over an element
Here are a list of examples
Example:
h1 {
color: red;
}
This will set the color of the text in all h1 elements to red.
background-color – Sets the background color of an element
Example:
body {
background-color: #F0F8FF;
}
This will set the background color of the entire webpage to a light blue color.
font-size – Sets the size of the font
Example:
p {
font-size: 20px;
}
This will set the font size of all p elements to 20 pixels.
font-family – Sets the font family of the text
Example:
body {
font-family: Arial, sans-serif;
}
This will set the font family of the entire webpage to Arial, or a sans-serif font if Arial is not available.
text-align – Sets the alignment of the text
Example:
h1 {
text-align: center;
}
This will center-align all h1 elements.
border – Sets the border of an element
Example:
img {
border: 1px solid black;
}
This will give a 1 pixel black border to all img elements.
padding – Sets the padding inside an element
Example:
div {
padding: 20px;
}
This will give 20 pixels of padding inside all div elements.
margin – Sets the margin around an element
Example:
p {
margin: 10px;
}
This will give a 10 pixel margin around all p elements.
height – Sets the height of an element
Example:
header {
height: 100px;
}
This will set the height of the header element to 100 pixels.
width – Sets the width of an element
Example:
nav {
width: 200px;
}
This will set the width of the nav element to 200 pixels.
display – Sets how an element is displayed
Example:
ul {
display: flex;
}
This will set the display property of the ul element to flex, allowing for flexible item sizing and positioning.
float – Floats an element to the left or right of its container
Example:
img {
float: right;
}
This will float all img elements to the right of their container.
position – Sets the position of an element
Example:
header {
position: fixed;
top: 0;
}
This will fix the header element to the top of the webpage.
top – Sets the top position of an element
Example:
article {
position: absolute;
top: 50px;
}
This will absolutely position the article element 50 pixels from the top of its containing element.
left – Sets the left position of an element
Example:
aside {
position: relative;
left: 20px;
}
This will relatively position the aside element 20 pixels to the left of its default position.
right – Sets the right position of an element
Example:
footer {
position: absolute;
right: 0;
}
This will absolutely position the footer element to the right of its containing element.
bottom – Sets the bottom position of an element
Example:
nav {
position: fixed;
bottom: 0;
}
This will fix the nav element to the bottom of the webpage.
z-index – Sets the stacking order of positioned elements
Example:
header {
position: relative;
z-index: 1;
}position: fixed;
bottom: 0;
z-index: 2;
}
This will give the nav element a higher stacking order than the header element.
opacity – Sets the opacity of an element
Example:
section {
opacity: 0.5;
}
This will make the section element semi-transparent, with an opacity of 0.5.
text-decoration – Sets the decoration of the text
Example:
a {
text-decoration: none;
}
This will remove the underline from all a (link) elements.
These are just a few examples of the many CSS tags and properties available. By learning and practicing these tags and properties, you can create beautiful and responsive websites with ease.
text-transform – Sets the capitalization of the text
Example:
h2 {
text-transform: uppercase;
}
This will make all text inside h2 elements uppercase.
text-shadow – Sets the shadow behind the text
Example:
h3 {
text-shadow: 2px 2px 3px #808080;
}
This will give a shadow effect to all text inside h3 elements.
box-shadow – Sets the shadow behind the element
Example:
div {
box-shadow: 2px 2px 3px #808080;
}
This will give a shadow effect to all div elements.
overflow – Sets what happens when content overflows an element’s box
Example:
p {
overflow: scroll;
}
This will add a scrollbar to all p elements if their content overflows their box.
border-radius – Sets the rounded corners of an element
Example:
button {
border-radius: 5px;
}
This will give a slightly rounded appearance to all button elements.
cursor – Sets the appearance of the cursor when hovering over an element
Example:
a {
cursor: pointer;
}
This will change the appearance of the cursor to a pointer when hovering over all a (link) elements.
background-image – Sets the background image of an element
Example:
body {
background-image: url("background.jpg");
}
This will set the background image of the entire webpage to a file named “background.jpg” located in the same directory as the HTML file.
background-size – Sets the size of the background image
Example:
body {
background-image: url("background.jpg");
background-size: cover;
}
This will set the size of the background image to cover the entire screen.
background-position – Sets the position of the background image
Example:
header {
background-image: url("header-background.jpg");
background-position: center;
}
This will set the background image of the header element to be centered.
background-repeat – Sets how the background image is repeated
Example:
div {
background-image: url("texture.jpg");
background-repeat: repeat;
}
This will repeat the background image of all div elements horizontally and vertically.
By learning and mastering these CSS tags and properties, you can create stunning and responsive websites that stand out.