| title | seoTitle | seoDescription | datePublished | cuid | slug | tags |
|---|---|---|---|---|---|---|
Getting Started with CSS |
Getting started with css |
Introduction to CSS |
Tue Feb 06 2024 14:10:51 GMT+0000 (Coordinated Universal Time) |
clsafuy55000a08ktcopedppr |
getting-started-with-css |
css3, css, getting-started-with-css |
CSS is used to style the elements in a web page.
CSS is a styling language that works together with HTML to give the page its look and layout.
CSS builds on top of HTML. The style attribute allows you to use CSS properties to customize the visual presentation of HTML elements.
<p style= "color:green"> Text<p>
The color property is used to control the color of the text.
CSS properties control the style of HTML elements.
Examples of CSS properties are:
color
border
font-size
margin
CSS properties require values. Values are possible settings for a property.
CSS properties and values are separated by with a colon :
The CSS code for an HTML element must be enclosed in a single or double quotes, following the style attribute.
To apply multiple properties to an element, separate CSS properties with a semicolon ;
<h1 style="color: yellow; background-color: blue ; text-align: center">Heading</h1>
CSS stands for CascadingStyleSheets and is one of the 3 core web technologies.
Cascading refers to the set of rules that we will discuss.
Adding CSS code to every HTML element takes time and makes your HTML structure unorganized.
When CSS is added to HTML elements, this is called inline CSS.
Inline CSS is easy to add to your code but presents some disadvantages. For example, to apply the same style to more than one html element, CSS code needs to be repeated.
An alternative styling technique is internalCSS.
Internal CSS is used to style the entire page.
The <style> container tag is added within the HTML document to group all the CSS code for the page.
<head>
<style>
p {
color: orchid;
}
</style>
</head>
<body>
<p>Explore the city.</p>
<p>Discover hidden gems.</p>
<p>Take a free tour.</p>
</body>
The way CSS code is added depends on the styling technique you are using.
The selector in CSS code matches the HTML tags you want to target.
Selectors are used with internal CSS.
Separate multiple selectors with a comma to apply the same style to different elements. This makes your CSS code simpler.
It's best practice to include all the internal CSS code in the head of the page.
<head>
<style>
h1 {
color: orchid;
background-color: lime;
}
p{
color: orchid;
}
button {
font-size: large;
color: lightyellow;
background-color: orchid;
}
</style>
</head>
<body>
<h1>Explore the city.</h1>
<p>Discover hidden gems.</p>
<button>Take a free tour</button>
</body>
CSS controls all the design- related aspects of your web page. This includes fonts, sizes, colors, position, spacing, layout, animations and much more.
CSS code creates stylingrules . The simplest styling rule consists of a selector, plus a declaration in curlybraces {}.
You can add as many declaration as you need. Each declaration should end with a semicolon;
A declaration consists of two parts: a property and a value. The property and the value inside a declaration always come in pairs.
A property: value pair in a declaration is separated with a colon:
Your CSS can contain as many styling rules as you need.
When styling real pages, your CSS code can grow in length quickly.
Style inheritance enable more precise rules and write code that is simple, organized, clear and efficient.
Styling rules for parent elements will also be applied to child elements by default. This is known as inheritance .
Child elements inherit styles from their parents.
<head>
<style>
p{
background-color: plum;
color: darkblue;
}
</style>
</head>
<body>
<p>Buy a ticket to <b>Portugal</b></p>
</body>
By default children inherit their parent's style. If you need a child to have a different style, you must write a separate rule for the child.
You can use a combination of selectors to make more precise rules.
The descendant selector target children inside a specific parent. It consists of the parent selector, followed by a space, followed by the child selector.
<head>
<style>
h1 u {
color: seagreen;
}
</style>
</head>
<body>
<h1>Back to <u>school!</u></h1>
<p>Our back to <u>school</u> sale from July 15th.</p>
</body>
For total control of the design of your HTML elements, you can give them IDs and classes.
IDs target specific individual element.
Classes target groups of elements.
The id attribute is used to give an unique identifier to a specific element in the page.
You can target specific elements using hashtag # followed by the ID name as a selector.
<head>
<style>
#heading {
background-color: DodgerBlue;
color: white;
text-align: center;
}
#movie {
text-align: center;
}
</style>
</head>
<body>
<h1 id="heading">Movie Stream</h1>
<h2 id="movie">Matrix</h2>
<p>Genre: Action, Sci-fi</p>
</body>
Another way to identify elements is the class attribute.
Class attribute is used to apply the same style to a group of elements.
id: unique element
class: multiple elements
You can create styling rules for a group of elements in the same class (group).
Use a dot . followed by the class name to target all the elements in the same class.
<head>
<style>
.movie {
color: white;
background-color: navy;
}
</style>
</head>
<body>
<p class="movie">Avatar</p>
<button class="movie">Watch now</button>
</body>
id: #
class: .
A style rule for a class will be applied to all the elements in that class.
<head>
<style>
.intro {
color: darkblue;
font-size: 28px;
text-align: center;
}
.content {
color: seagreen;
font-size: 18px;
}
</style>
</head>
<body>
<h1 class="intro">Welcome to
FitLife Blog</h1>
<p class="content">Get inspired to lead a
healthy and active lifestyle.</p>
<p class="content">Explore workout routines
and nutritious recipes.</p>
<button class="content">Sign up</button>
</body>
You can also target only those elements of a specific type that have a certain class.
This CSS rule will modify only paragraphs with the content class.
<head>
<style>
p.content {
color: seagreen;
font-size: 18px;
}
</style>
</head>
<body>
<h1 class="intro">Welcome to
FitLife Blog</h1>
<p class="content">Get inspired to lead a
healthy and active lifestyle.</p>
<p class="content">Explore workout routines
and nutritious recipes.</p>
<button class="content">Sign up</button>
</body>
An HTML element can be targeted for styling in different ways. For example, an element may have both a class and an ID .
<p id="text1" class="info">Text</p>
-
Inline style
-
IDs
-
Classes
-
Elements
Each type of CSS selector has its place in this priority list. When several CSS rules target the same element, the browser uses this order to determine which rule to apply.
<head>
<style>
p {
color: red;
}
#p1 {
color: blue;
}
.texts{
color: seagreen;
}
</style>
</head>
<body>
<p id = "p1" class="texts">Text</p>
</body>
This priority order is known as specificity.
Specificity is the algorithm used by the browsers to determine the rule to apply to an element.
This is needed because an HTML element can be targeted in different ways.
/*.....*/
CSS comments need to be contained in<style> tags when using internal CSS.
An alternative to inline and internal CSS is externalCSS.
External CSS code is written outside the HTML document, in a separate file.
One of the advantages of external CSS is that the same CSS styles file can be used by multiple HTML documents (or web pages).
Some developers prefer external CSS because it separates structure and style into different files. This means your web page project will consist of several files with different file extensions.
External CSS is very useful for multi-page websites as you can style the entire site in one place.
You don't need <style> tags in an external CSS file. You can add the styling rules directly.
The CSS property border-radius: 0.3em; is used to specify the radius of the corners of an element's border.
When you set border-radius to a specific value, it rounds the corners of the element's border. The value can be specified in various units, including pixels (px), ems (em), or percentages (%). In this case, 0.3em indicates that the border radius will be 0.3 times the font size of the element.
Here's an example of how you might use border-radius: 0.3em; in your CSS:
.element {
border-radius: 0.3em;
}In this example, any element with the class "element" will have its border corners rounded with a radius of 0.3 times the font size of the element.
You can adjust the value of border-radius to achieve different levels of rounding for the corners, providing various visual effects such as softer edges or circular shapes.