Web design is an integral part of website development. Creating an attractive and unique design helps to grab users' attention and make the website more memorable. One of the tools used for design creation is CSS (Cascading Style Sheets).
CSS is a language used to describe the appearance of HTML page elements. With CSS, you can set colors, fonts, sizes, and much more for elements on a web page. CSS allows for creating stylish and harmonious designs, as well as applying them to all pages of a website using an external style sheet.
CSS Basics
Before we start learning the basics of CSS to create a unique design for your website, let's go over the key concepts you need to know when working with CSS:
Elements and Selectors
Every element of an HTML page can be selected using a selector. A selector determines which elements will be styled using style rules. For example, the "p" selector will select all paragraph elements on the page, and the ".myClass" selector will select all elements with the "myClass" class.
Properties and Values
A property determines what aspect of an element will be changed with CSS. For example, the "color" property determines the text color, and the "font-size" property determines the font size. Each property has a corresponding value, which sets the desired value for the selected property.
Comments
Comments in CSS start with "/*" and end with "*/". Comments are used to explain the code and make it more understandable for developers.
An Example of a Simple Style Sheet
Let's look at an example of a simple style sheet:
/* CSS comment */ p { color: blue; /* the "color" property sets the text color to blue */ font-size: 18px; /* the "font-size" property sets the font size to 18 pixels */ }
In this example, we selected all paragraph elements on the page using the "p" selector and set properties to change the text color and font size.
Additionally, CSS can use different selectors to target elements more precisely. For example:
p.intro { color: red; } p.outro { color: green; }
In this example, we select all paragraph elements with the class "intro" and apply the "color" property with the value "red", as well as all paragraph elements with the class "outro" and apply the "color" property with the value "green".
Common CSS Properties
CSS has many properties that can be used to create unique designs. Some of the most common properties include:
color: sets the text color.
background-color: sets the background color of an element.
font-size: sets the font size.
font-family: sets the font family used for text.
padding: sets the spacing around the content of an element.
margin: sets the spacing around an element.
border: sets a border around an element.
These are just some of the CSS properties. With a deeper understanding of all CSS properties, you can create more complex and unique designs.
External Style Sheet
Instead of applying styles to each element on a page, you can use an external style sheet. An external style sheet is a file with the extension ".css" that contains all the CSS rules for the design of your website.
To link an external style sheet in an HTML document, the <link> tag is used. For example:
<link rel="stylesheet" type="text/css" href="styles.css">
In this example, we are linking an external style sheet named "styles.css". All CSS rules from this file will be applied to all elements on the page.
Conclusion
Learning the basics of CSS is the first step towards creating a unique design for your website. With CSS, you can set colors, fonts, sizes, and more to make your website attractive and memorable. It's important to study various CSS properties and selector rules to create a stylish and harmonious design for your website.