# Section
The `section` block is one of the most important parts in the structure and layout of a webpage. Sections contain related inner blocks and divide the webpage into readable and fluid content.
By default, when adding a Cwicly Section a container block is automatically inserted inside.
{% hint style="info" %}
When updating from a version prior to 1.2.9.8, Cwicly will automatically toggle on the Deprecated section layout and deprecated button styles.
So if you want to reveal the section container, you need to access the Deprecate settings and toggle off.
{% endhint %}
## Add
There are two ways of adding a section, from the Quick Inserter or the Block inserter.
### Quick Inserter
* Find the Section block in the Quick Inserter and click to insert.
To visualise the Quick Inserter you need to enable it. [Quick Inserter.](#quick-inserter)
### Block Inserter
* Find the Block Inserter and select or search for the Cwicly Section block.
* Click to add.
## Structure
### Outer Section wrapper and Inner Container
By default, the Cwicly Section is made up of two elements, an outer wrapper, or Section wrapper, and an inner container.
### Outer Section wrapper
The Cwicly Section has a semantic \ tab.
### Inner Container
The inner container defines the website content width and is centered on the page.
Some content such as backgrounds and images can break out of the container width but most content will be inside.
### Inner Container defaults
A .cc-cntr class is added by default and applies a maximum width of 1366px.
{% hint style="info" %}
This will not necessarily be apparent on small screen sizes.
{% endhint %}
## Global Settings
You can apply your own section and container settings globally from the Block Inspector.
* Open the Block Inspector and open Global Styles.
* Open the Elements tab and Block tab.
### Section
* Open the Section tab and click the "+" sign to open the Section settings panel.
* Click to open the Section settings you wish to apply.
* Customise as required.
### Container
* In the Block tab, open the Container tab.
* Click the "+" icon to add Container settings.
### 
* Click the Container field to open the Container settings.
### 
* Customise the Global container settings as required.
* For instance, you can modify the Max Width as required.
### Add CSS class to section
From Global Styles, you can add a CSS class to add specific styles to a section.
In the Block tab of the Elements tab of the Global Styles tab, open the Section tab.
* Click the "+" sign to add a new class and input a meaningful section name and class name.
* Style as required. In this example we are adding a black background.
* Select the specific section to which you wish to apply the black background styles.
* Click the "+" sign to add a class.
* Find the class you created in the panel.
* Press enter. The black background will be applied to the designated section.
### Add CSS class to container
From Global Styles, you can add a CSS class to add specific styles to a container.
In the Block tab of the Elements tab of the Global Styles tab, open the Container tab.
* Click the "+" sign to add a new class.
* Input a meaningful container name and class name.
* Style as required, in this case we have given it a black background.
* Select the Container to which you wish to apply the class and styles you have created.
* Click the "+" sign to add a class.
* Find the class you created in the Classes modal and click "Enter" to apply.
### Section VS. Div
`` means that the content inside is grouped (relates to a single theme), and should appear as an entry in an outline of the page. Basically, it is used to group elements together, pertaining to the same theme.
{% hint style="info" %}
The `` element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. (i.e. Front Page, About, Pricing...)
{% endhint %}
`
`does not convey any meaning, aside from any found in its `class` and `title` attributes.
{% hint style="info" %}
When an element is needed only for styling purposes or as a convenience, it is encouraged to use the `
` element instead of``.
{% endhint %}
## Deprecate Settings
When updating from a version prior to 1.2.9.8, Cwicly will automatically toggle on the Deprecated section layout and deprecated button styles.
So if you want to reveal the section container, you need to access the Deprecate settings and toggle off.
* In the Dashboard, open the Settings panel.
* Find Deprecated.
* Toggle off Deprecated Section Layout.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cwicly.com/blocks/section.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
