We given a information and tutorial of CSS language to help you for learning the web development. So, Read the information carefully and watch the tutorial to better understand for getting a skill and knowledge about the css language.
CSS (Cascading style sheets)
CSS is a stylesheet language that is used to style the layout or structure of the webpage. It is used to design the structure of HTML elements using its properties. It controls the presentation of the webpage throughout the properties. It helps to design a website properly by adding its a better look with styling.
Syntax -
selector {
property: value;
}
- {..} - { }(Curly Braces) are used to add the properties to style the elements.
- selector - It is used to target the HTML elements that we want to style.
- property - It is the property means the attribute that we want to change.
- value - It is the value of the property as we want.
Selectors
Selector is used to target the HTML element that we want to style.
Types of Selector
1) Type selector
It targets the HTML element name.
p{
color: blue;
}
2) Class selector
It targets the class attribute elements and it used with "." (dot) symbol before the class name.
.paragraph{
background-color: yellow;
}
3) ID selector
It targets the id attribute elements and it used with "#" (hash) symbol before the id name.
#container{
background-color: black;
}
CSS Properties
CSS langugae contains various properties that helps to style the elements to design the layout of the website. Here we given a commonly used css properties as below -
Color
It is used to change the color of an element.
color:black;
Background
Background properties are used to set backgrounds.
- background-color - It is used to change the background color of an element.
background-color:black;
- background-image - It is used to set background image.
background-image: url("image.png");
Fonts
Fonts properties are used to set the fonts(text) styles.
- font-family - It is used to change the font style of an element like heading, paragraph.
font-family: Arial;
- font-size - It is used to set or change the size of an element.
font-size: 15px;
- font-weight - It is used to change the weight of an element as bold or light.
font-weight: bold;
Spacing
Spacing properties like margin and padding are used for spacing
- Margin - It is used to set a space outside the element.
margin:10px;
- Padding - It is used to set a space inside the element.
padding:10px;
Border
Border property is used to set a border style with width and color.
border: 1px solid black;
Sizing
Sizing properties like height and width are used to set a size of an element.
- height - It is used to set a height of the element.
height:100px;
- width - It is used to set a width of the element.
width:100px;
Text align and transform
- text-align - It is used to change the alignments as horizontally like left, right and center.
.text {
text-align: center;
}
- text-transform - It is used to change the text case into uppercase or lowercase.
.text {
text-transform: uppercase;
}
Flexbox
Flexbox is a layout model that is used to arrange the items in a container.
.container {
display: flex;
justify-content: center;
align-items: center;
}- display:flex - It is used to arrange the items in a flexible layout.
- justify-content - It is used to align the elements into horizontally as left, right and center.
- align-items - It is used to align the elements into vertically as left, right and center.
Grid
Grid is layout model that is used to create complex grids layout.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}- display:grid - It is used to create a grid layout.
- grid-template-columns - It is used to create equal columns of grid.
- grid-gap - It is used for a space between the grid items.
Transition and Animation
- Transition
It is used for changing the style over a time.
.element {
transition: background-color 0.5s ease-in-out;
}
.element:hover {
background-color: red;
}
- Animation
It is used for movement using a time period.
@keyframes example {
from { background-color: red; }
to { background-color: blue; }
}
.element {
animation: example 10s infinite;
}Media Query
Media Query is used to add the Responsivness to the layout for a better look on all screens like mobile and desktop.
@media (max-width: 480px) {
.container {
height:100px;
width:100px;
font-size:15px;
}
}
Comments
Comments are used to add explanation for understanding the code. Comments not displayed on the webpage.
CSS comments are written as "/*" in beginning and "*/" in the end.
/* This is a comment */
body {
background-color: black; /* Changes the background color into black */
}
Example using HTML and CSS language
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Example</title>
</head>
<body>
<!-- heading -->
<h1>Welcome to my website</h1>
<p>hello coders, Stay connected with us.</p>
<!-- image -->
<img src="" alt="Sample Image"> <!-- Form -->
<h2>Contact us</h2>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<label>Gender:</label>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
</select><br><br>
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>CSS -
/* General Body Styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f4f4f4;
}
/* Heading */
h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
h2 {
color: #444;
margin-top: 20px;
margin-bottom: 10px;
}
/* Paragraph */
p {
font-size: 1.1em;
color: #555;
text-align: center;
margin-bottom: 20px;
}
/* Image */
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: 2px solid #ddd;
border-radius: 5px;
}
/* Form */
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form label {
display: block;
margin-bottom: 5px;
color: #333;
}
form input[type="text"],
form input[type="email"],
form textarea,
form select,
form input[type="file"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
form button {
background-color: #28a745;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
form button:hover {
background-color: #218838;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 10px;
}
form {
padding: 10px;
}
form input[type="text"],
form input[type="email"],
form textarea,
form select,
form input[type="file"] {
padding: 8px;
}
form button {
padding: 8px 15px;
}
}
Output of the example -
Watch this tutorial to learn css from basic to advanced -
Source - Apna college (Youtube)
Also Check this :-
Projects - HTML CSS JS Projects
Compiler to run projects- HTML CSS JS Online Compiler
If you have any confusion or query, then feel free to ask us on coding community.
Learn more and practice more🚀