CSS (Cascading Style Sheets)

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

color – Sets the text color of an element

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;
}
nav {
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.

Leave A Comment